How to set up tracking for dynamic URLs in Google Tag Manager

Author:

Tracking dynamic URLs in Google Tag Manager (GTM) allows you to monitor pages with URLs that change based on user interaction, such as products with different parameters, category pages, or user-specific URLs. Setting up tracking for dynamic URLs ensures that you capture relevant data for these types of pages and provides insights into user behavior and content interactions.

Here’s a step-by-step guide on how to set up tracking for dynamic URLs in Google Tag Manager:

Step 1: Identify Dynamic URL Patterns

Dynamic URLs often contain variables that change depending on the content or actions taken on the page. These variables can include:

  • Query parameters (e.g., ?product=123&color=blue)
  • URL paths that change based on categories or products (e.g., /category/{category-name}/product/{product-id})
  • Fragment identifiers (e.g., #section1)

Before setting up tracking, identify the type of dynamic content you want to track. Determine if you’re tracking URL parameters, specific path patterns, or fragment identifiers.

Step 2: Create Variables in Google Tag Manager

To capture dynamic URL data, you need to create custom variables in Google Tag Manager to extract parts of the URL. GTM provides built-in variables like Page URL and Page Path, but you can create more specific custom variables to capture dynamic parts of the URL.

1. Use Built-In Variables

Google Tag Manager has several built-in variables that are helpful for tracking URLs:

  • Page URL: Captures the full URL of the page.
  • Page Path: Captures the part of the URL that comes after the domain name (e.g., /products/item123).
  • Query Parameters: GTM can automatically capture query parameters like product, color, etc.

To enable these built-in variables:

  1. In GTM, go to Variables.
  2. Click Configure in the top-right corner.
  3. Check the boxes for the built-in variables you want to use (e.g., Page URL, Page Path, Query Parameters).

2. Create a Custom JavaScript Variable (for complex URL structures)

If you need to capture specific dynamic elements in the URL, you can create a custom JavaScript variable to extract parts of the URL. For example, if your URLs have specific query parameters like product or category, you can create a variable to capture these.

Example: Extracting a Query Parameter (product) from the URL

  1. Go to Variables in GTM.
  2. Click New to create a new variable.
  3. Choose Custom JavaScript as the variable type.
  4. Use the following script to capture a URL query parameter:
    javascript
    function() {
    var url = new URL(window.location.href);
    return url.searchParams.get('product'); // Replace 'product' with the query parameter you want to track
    }
  5. Name the variable something descriptive, like Product ID.

This variable will now capture the product query parameter from the URL.

3. Regular Expression Variable (for pattern-based matching)

If your URLs follow a specific pattern (e.g., /category/{category-name}/product/{product-id}), you can use a regular expression (regex) to extract parts of the URL.

For example, to capture the product ID from a URL like /category/blue-widget/product/12345, you can use the following regular expression:

  1. Create a new Custom JavaScript variable in GTM.
  2. Use the following script:
    javascript
    function() {
    var path = window.location.pathname; // Get the URL path
    var regex = /\/product\/(\d+)/; // Match the product ID (assuming it's a number)
    var matches = path.match(regex);
    return matches && matches[1] ? matches[1] : undefined; // Return the first capturing group (product ID)
    }

This will capture the product ID (e.g., 12345) from the URL path.

Step 3: Set Up Triggers for Dynamic Pages

Once you have your variables set up, you need to configure triggers to fire your tags when users visit dynamic URLs. GTM provides several ways to set up triggers based on dynamic content.

1. Page View Trigger for Dynamic URLs

To track dynamic URLs, you can create a Page View Trigger that fires based on the URL. You can use a Page URL or Page Path condition to target specific pages.

  1. Go to Triggers in GTM.
  2. Click New to create a new trigger.
  3. Choose Page View as the trigger type.
  4. Select Some Page Views to target specific URLs, and set the condition based on the URL variable you want to track:
    • If you’re tracking query parameters, use Page URL contains product=.
    • If you’re using regular expressions, select Page Path and set the condition to match the pattern (e.g., matches RegEx for /category/.*/product/\d+).
  5. Save the trigger.

2. Custom Event Trigger (for on-page actions)

If you’re tracking URL changes that occur as a result of user interactions (e.g., scrolling, clicking), you can use a Custom Event Trigger.

For instance, if your website dynamically loads content through JavaScript (such as when a user selects a product), use a custom event to trigger the GTM tags when the URL changes.

You can use a push to the dataLayer to send the updated URL as a custom event.

Example:

javascript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'urlChange',
pageUrl: window.location.href
});

Then, create a Custom Event Trigger in GTM to listen for this event and fire your tags accordingly.

Step 4: Create Tags for Dynamic URL Tracking

With the variables and triggers set up, you can now create tags to track dynamic URLs.

For example, if you want to track product page views and send data to Google Analytics, create a tag like this:

  1. Go to Tags in GTM and click New.
  2. Choose Google Analytics: Universal Analytics as the tag type.
  3. Set the Track Type to Page View.
  4. In the Page Path field, use the dynamic URL variable (e.g., {{Page Path}} or the custom variable like {{Product ID}}).
  5. Set the trigger to fire on the appropriate dynamic URL page view (e.g., when {{Page URL}} contains product=123).
  6. Save and publish the tag.

Step 5: Test and Debug

Before publishing your container, test and debug the implementation:

  1. Use Preview Mode in GTM to test your tags and triggers.
  2. Use Google Tag Assistant or Browser Developer Tools to verify the data being sent to Google Analytics or any other analytics platforms.
  3. Check the dataLayer for correct values if you’re using custom events.

Conclusion

Tracking dynamic URLs in Google Tag Manager is essential for capturing user behavior on websites with content that changes based on user actions or URL parameters. By using built-in variables, custom JavaScript variables, and triggers based on URL patterns or custom events, you can accurately track dynamic pages and send relevant data to your analytics platforms. Testing is crucial to ensure that your tags fire correctly, so always verify your implementation before publishing.

Categories: Digital Marketing