How to configure custom HTML tags in Google Tag Manager

Author:

Configuring Custom HTML Tags in Google Tag Manager (GTM) allows you to inject custom JavaScript or HTML code into your website without directly modifying the site’s codebase. This is useful for implementing third-party scripts, tracking tools that aren’t natively supported, or custom functionalities like pop-ups or special events.

Here’s a detailed guide on how to configure and manage Custom HTML Tags in GTM.

Step 1: Set Up Google Tag Manager

Before adding custom HTML tags, ensure that Google Tag Manager is installed on your website.

  1. Create a GTM Account: If you haven’t already, go to Google Tag Manager, create an account, and set up a container for your website.
  2. Install GTM Code: After creating the container, GTM will provide two pieces of code. Place the first snippet inside the <head> tag and the second one just after the opening <body> tag on your website’s HTML.
  3. Verify Installation: After installing the GTM code, use the “Preview” mode in GTM to ensure that the code is properly installed.

Step 2: Identify the Custom Code You Want to Use

Before configuring a Custom HTML Tag, you need to know what specific HTML, JavaScript, or third-party code you want to inject. Common examples include:

  • Third-party tracking pixels (e.g., Facebook Pixel, Hotjar)
  • Chat widgets (e.g., Intercom, Tawk.to)
  • A/B testing scripts (e.g., Optimizely)
  • Custom JavaScript for analytics or form handling

Step 3: Create a Custom HTML Tag in GTM

Now that you’ve prepared your custom code, follow these steps to add it to GTM:

  1. Open GTM: Log in to your Google Tag Manager account and open the container for the relevant website.
  2. Navigate to Tags: In the left-side menu, click Tags.
  3. Create a New Tag:
    • Click the New button to create a new tag.
  4. Tag Configuration:
    • In the Tag Configuration section, click Tag Configuration.
    • Scroll down and select Custom HTML from the list of available tag types.
  5. Enter Custom Code:
    • In the Custom HTML text box, paste the HTML, JavaScript, or other code that you want to add to your website.
    • Ensure the code is properly formatted and doesn’t contain any syntax errors, as this could break functionality on your website.
  6. Prevent Script Tag Blocking (Optional):
    • If your HTML contains a <script> tag, check the option that says Support document.write. This ensures your script is not blocked or stripped out by certain browsers.
  7. Assign a Trigger:
    • Click on the Triggering section below the HTML box.
    • You’ll need to assign a trigger to determine when the custom tag should fire (more on triggers below).

Step 4: Set Up Triggers for Your Custom HTML Tag

Triggers control when a tag should fire based on specific conditions. You can fire a Custom HTML tag on all pages, specific pages, or in response to certain user interactions.

Common Trigger Options:

  1. Page View Trigger (All Pages):
    • Use this to fire the tag on every page of your website.
    • Steps:
      1. In the Triggering section, click Trigger Configuration.
      2. Select Page View.
      3. Choose All Pages to fire the tag every time a page is loaded.
  2. Page View Trigger (Specific Pages):
    • Use this trigger if you want to fire the tag only on specific pages (e.g., homepage or product pages).
    • Steps:
      1. Select Page View as the trigger type.
      2. Choose Some Pages.
      3. Define the condition for which pages should trigger the tag (e.g., “Page URL contains ‘/contact-us’”).
  3. Click Trigger:
    • Use this to fire the tag when a user clicks a specific element, such as a button or link.
    • Steps:
      1. Choose Click – All Elements or Click – Just Links.
      2. Set conditions based on elements like Click URL, Click Text, or Click Classes.
  4. Form Submission Trigger:
    • If you want to fire the custom HTML when a user submits a form, you can use the Form Submission trigger.
    • Steps:
      1. Select Form Submission as the trigger type.
      2. Define the specific form or forms that should trigger the tag.

Step 5: Preview and Test Your Custom HTML Tag

Before publishing your Custom HTML tag, you should always test it to ensure it works as expected:

  1. Enter Preview Mode:
    • In GTM, click the Preview button at the top-right corner of the dashboard.
    • This will open a new tab with your website in debug mode, where you can test the tag’s firing behavior.
  2. Trigger the Tag:
    • Navigate through your website and perform actions (e.g., page views, button clicks) based on the trigger you set up.
    • In the Tag Assistant (which opens in the lower part of your website preview window), verify that the Custom HTML tag fired when expected.
  3. Inspect Variables:
    • Check for any custom variables, parameters, or user interaction data to ensure they are captured correctly.

Step 6: Publish the Custom HTML Tag

Once you’ve tested and confirmed that your Custom HTML tag works as expected:

  1. Exit Preview Mode.
  2. Click the Submit button in GTM.
  3. Name the new version of your container (e.g., “Custom HTML Tag for Chat Widget”).
  4. Click Publish to make the changes live on your website.

Step 7: Monitor Tag Performance in Google Analytics (Optional)

If your Custom HTML tag is linked to an event or analytics tool (such as Google Analytics, Facebook Pixel, etc.), you can monitor its performance in the respective platform.

For example, if your Custom HTML tag is used for tracking specific user actions in Google Analytics:

  1. Go to Google Analytics.
  2. Navigate to Real-Time > Events (for Google Analytics 4: Reports > Engagement > Events).
  3. Verify that your custom events are firing correctly and sending data.

Example Use Cases for Custom HTML Tags

  1. Third-Party Tracking Pixels:
    • Many third-party services, like Facebook Ads, LinkedIn, and Hotjar, provide tracking codes in JavaScript. You can implement these codes via a Custom HTML tag instead of directly pasting them into your website’s code.
  2. Custom Pop-ups:
    • You can insert custom pop-up code or modals using a Custom HTML tag and control its appearance based on user behavior or triggers (e.g., after scrolling 50% of the page).
  3. Custom Event Tracking:
    • If you have special JavaScript to track user interactions that Google Tag Manager doesn’t natively support, you can use a Custom HTML tag to trigger this script.

Key Considerations

  1. Code Quality: Ensure that the HTML/JavaScript code is clean, error-free, and optimized to avoid performance issues on your website.
  2. Security: Be cautious when injecting third-party scripts or custom JavaScript. Malicious or poorly written code can expose your website to vulnerabilities.
  3. Cross-Browser Compatibility: Test your Custom HTML tags across different browsers and devices to ensure consistent functionality.

Conclusion

Custom HTML tags in Google Tag Manager provide a powerful way to inject and manage custom scripts on your website without direct code modification. By using GTM’s triggers and variables, you can control exactly when and where these custom scripts are fired, making your website more flexible and capable of handling various tracking, marketing, and interactive needs. Always remember to test your tags in GTM’s Preview mode to avoid any unexpected behavior on your live site.

Categories: Digital Marketing