How to track dynamic content with Google Tag Manager

Author:

Tracking dynamic content with Google Tag Manager (GTM) involves capturing changes on a website or app that occur without a full page reload, often driven by JavaScript, AJAX calls, or other dynamic elements. This is essential when you need to track interactions with content that is loaded or updated dynamically, such as user-specific data, form submissions, product additions to the cart, or content that changes without triggering a full page load (e.g., infinite scroll, AJAX content loading, etc.).

Here’s how you can track dynamic content using Google Tag Manager:

1. Identify the Dynamic Content on Your Site

The first step is to identify the dynamic content you want to track. This content could be anything that changes after the initial page load, such as:

  • New products added to the shopping cart.
  • Content revealed after user actions (like clicking a button to load more items).
  • Data loaded from AJAX requests (such as search results, filtering, or pagination).
  • Form fields that dynamically change based on user inputs.

2. Use Data Layer Variables for Dynamic Content

Google Tag Manager relies on the Data Layer to pass information about events or changes in the page. Dynamic content can be tracked by pushing updates into the Data Layer.

How to Push Dynamic Data to the Data Layer:

  1. Modify the Website’s JavaScript: To capture dynamic content, you’ll need to modify the website’s JavaScript or use built-in GTM triggers to push dynamic data into the Data Layer when specific actions or content changes happen. This is often done when content is dynamically loaded or updated on the page.

    Example JavaScript code for pushing data to the Data Layer:

    javascript
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    event: 'dynamicContentLoaded',
    contentType: 'product',
    contentId: '1234', // Unique identifier for the content
    contentName: 'Product ABC'
    });

    In this example:

    • event: The event name that can be used as a trigger.
    • contentType, contentId, and contentName: Dynamic data that gets pushed into the Data Layer when content changes.
  2. Verify Data Layer Pushes: Open the browser’s Developer Tools (press F12 in Chrome or Cmd+Option+I in Mac) and navigate to the Console tab. Check the window.dataLayer to confirm that the dynamic data is pushed correctly:
    javascript
    console.log(window.dataLayer);

3. Set Up Triggers in Google Tag Manager

To track the dynamic content, you will need to set up triggers in Google Tag Manager that will activate tags based on the event or changes pushed to the Data Layer.

Example of Event-based Trigger for Dynamic Content:

  1. Create a Trigger for the Dynamic Content:
    • Go to Triggers in GTM and click New.
    • Choose Custom Event as the trigger type.
    • Set the Event Name to match the event name used in the Data Layer push (dynamicContentLoaded in this case).
  2. Configure Trigger Settings:
    • You can use additional filters to ensure the trigger only fires when specific dynamic content is loaded. For instance, if you’re tracking a product, you can add conditions like contentType equals 'product' or contentId matches a specific value.

    Example:

    • Trigger Type: Custom Event
    • Event Name: dynamicContentLoaded
    • Fire On: All Custom Events (or only those with specific conditions like contentType = 'product')

4. Configure Tags for Dynamic Content Tracking

Once you have your trigger set up, the next step is to create tags that will fire when dynamic content is loaded.

Example: Tracking Dynamic Product Views with Google Analytics

  1. Create a Tag for Google Analytics (GA4):
    • Go to Tags in GTM and click New.
    • Choose Google Analytics: GA4 Event (for GA4 tracking) or Universal Analytics (for UA tracking).
    • For GA4, configure the event to track, e.g., view_item for product views.
      • Event Name: view_item
      • Event Parameters:
        • content_type: product
        • content_id: {{contentId}}
        • content_name: {{contentName}}

      For the Universal Analytics tag, you would use the Track Type: Event and configure it as:

      • Category: Content
      • Action: Dynamic Content Loaded
      • Label: {{contentName}}
  2. Link the Trigger to the Tag:
    • In the tag setup, link the trigger you created earlier (e.g., dynamicContentLoaded trigger).
    • Ensure the tag fires when the specified event occurs in the Data Layer.
  3. Test Your Tag:
    • Use GTM Preview Mode to test whether the tag fires when the dynamic content is updated.
    • Ensure the correct event and parameters are passed to Google Analytics (or other tools you’re using).

5. Track AJAX Content Loads

AJAX is commonly used for loading content dynamically without refreshing the page. To track AJAX content loads:

  1. Identify AJAX Events: If your site uses AJAX to load content (e.g., new search results or product recommendations), identify the specific event when the content is updated. This could involve listening to JavaScript events like ajaxComplete, load, or custom events triggered by your site’s scripts.
  2. Push AJAX Data into the Data Layer: As with other dynamic content, use the JavaScript code to push data to the Data Layer whenever new AJAX content is loaded:
    javascript
    $(document).ajaxComplete(function(event, xhr, settings) {
    window.dataLayer.push({
    event: 'dynamicAJAXContentLoaded',
    ajaxData: xhr.responseText
    });
    });
  3. Create Triggers for AJAX: Set up custom event triggers in GTM to listen for dynamicAJAXContentLoaded events or any other event you’ve pushed to the Data Layer.

6. Track Form Changes

Form fields that change dynamically can also be tracked with GTM. For example, if users select options that dynamically change the available choices or pricing on a form:

  1. Track Dynamic Form Changes: Use a Form Submission or Element Visibility trigger to detect when certain form fields change.
    • You may need to set up custom JavaScript to listen for form field changes, especially if they happen without a page reload.
  2. Create Variables for Form Data: You can capture form field values dynamically by creating Auto-Event Variables or Custom JavaScript Variables in GTM. This will allow you to track user inputs and changes to the form as the user interacts with the page.

7. Testing and Debugging

Before going live, always test your setup thoroughly:

  • Use GTM’s Preview Mode: This allows you to see whether tags are firing when dynamic content is loaded or updated.
  • Use the Developer Console: Check the Data Layer for the dynamic content data and ensure it’s being passed correctly.
  • Google Analytics Debugging: Use Google Analytics Debugger (for Universal Analytics) or the GA4 DebugView to verify that events are being sent correctly.

8. Publish Your Changes

Once everything is set up and tested:

  • Publish your container in GTM to push the changes live.
  • Regularly monitor the dynamic content tracking in your analytics tool to ensure data accuracy.

Conclusion

Tracking dynamic content with Google Tag Manager is a powerful way to measure user interactions and behaviors that happen without full page reloads. By utilizing the Data Layer, triggers, and tags, you can effectively track events such as AJAX loads, dynamic form changes, or content added to a shopping cart. Proper testing and debugging are essential to ensure that the tags fire as expected, and once everything is set up correctly, it provides valuable insights into user engagement with dynamic content.

Categories: Digital Marketing