How to configure custom HTML tags in Google Tag Manager

Author:

Configuring custom HTML tags in Google Tag Manager (GTM) allows you to insert custom code snippets, such as JavaScript, HTML, or third-party tracking codes, into your website without directly editing the site’s code. This flexibility is particularly useful for integrating third-party services, embedding widgets, or running scripts that are not available as pre-defined tags. Here’s a step-by-step guide on how to create and configure custom HTML tags in GTM.

Step-by-Step Guide to Configure Custom HTML Tags in Google Tag Manager

1. Access Google Tag Manager

  1. Log In: Go to the Google Tag Manager website and log in with your Google account.
  2. Select Your Container: Choose the container for the website where you want to add the custom HTML tag.

2. Create a New Tag

  1. Navigate to Tags:
    • In the left sidebar, click on “Tags.”
  2. Create a New Tag:
    • Click the “New” button to create a new tag.

3. Configure the Custom HTML Tag

  1. Choose Tag Type:
    • Click on “Tag Configuration” and select “Custom HTML” from the list of tag types.
  2. Insert Your Custom Code:
    • In the text area that appears, paste your custom HTML or JavaScript code.
    • Ensure that your code is correctly formatted and does not contain any errors to prevent issues on your website.

    Example: If you want to add a custom JavaScript code snippet for tracking purposes, it might look something like this:

    html
    <script>
    console.log('Custom HTML Tag Fired!');
    </script>
  3. Enable or Disable Tag Firing Options:
    • If your code includes scripts that need to be executed only once (such as for tracking pixels), you can check the “Support document.write” option if necessary.

4. Set Up Triggering

  1. Assign a Trigger:
    • Click on the “Triggering” section below your custom HTML code.
    • Click the “+” icon to add a trigger.
  2. Choose a Trigger Type:
    • Select an appropriate trigger type based on when you want the custom HTML tag to fire. Common options include:
      • Page View: Fires when the page is loaded.
      • Click: Fires when a user clicks a specific element.
      • Form Submission: Fires when a user submits a form.
  3. Configure the Trigger:
    • For example, if you want the tag to fire on all page views:
      • Choose “Page View” and then select “All Page Views.”
    • For specific clicks, choose “Click – All Elements” or “Click – Just Links” and define your conditions (e.g., click on a specific button).
  4. Name Your Trigger:
    • Give your trigger a descriptive name (e.g., “All Page Views Trigger”) and click “Save.”

5. Review and Save Your Tag

  1. Name Your Tag:
    • Click on the “Tag Configuration” title to enter a descriptive name for your custom HTML tag (e.g., “Custom HTML for Tracking”).
  2. Save the Tag:
    • Once you have configured your tag and trigger, click the “Save” button to store your changes.

6. Preview and Debug Your Setup

  1. Enter Preview Mode:
    • Click on the “Preview” button in the top right corner of the GTM interface to enable preview mode.
  2. Test the Custom HTML Tag:
    • Open your website in a new tab where the GTM preview mode is active.
    • Perform the action that should trigger your custom HTML tag (e.g., navigate to a page or click a button).
    • Check the GTM preview pane to see if your tag fired as expected.
  3. Verify Functionality:
    • If your custom HTML includes JavaScript, open the browser’s console (usually accessed via F12 or right-clicking and selecting “Inspect”) to check for any console messages or errors that might indicate issues with your code.

7. Publish Your Changes

Once you’ve verified that the custom HTML tag is working correctly:

  1. Click on Submit:
    • In the GTM interface, click the “Submit” button in the top right corner.
  2. Add a Version Name and Description:
    • Enter a version name and description (e.g., “Added Custom HTML Tag for Tracking”).
  3. Click Publish:
    • Click the “Publish” button to make your changes live.

Best Practices for Custom HTML Tags

  • Test Thoroughly: Always test custom HTML tags in preview mode to ensure they function as intended before publishing.
  • Minimize Script Size: Keep your custom code concise to improve loading times and reduce the risk of errors.
  • Avoid Conflicts: Ensure that your custom code does not conflict with existing scripts on your site. Use unique variable names if you are declaring JavaScript variables.
  • Use a Content Security Policy (CSP): If your website implements a CSP, ensure that it allows inline scripts and any domains your custom code needs to access.
  • Documentation: Keep documentation for your custom tags to track what each one does and why it was implemented. This is particularly helpful for future updates or debugging.

Conclusion

Configuring custom HTML tags in Google Tag Manager offers a powerful way to enhance your website’s functionality without directly modifying its code. By following the steps outlined above, you can successfully implement custom scripts, integrate third-party services, and track user interactions more effectively. Regular testing and monitoring will ensure your custom tags perform as expected, helping you gather valuable insights for optimizing user engagement and conversions.

Categories: Digital Marketing