How To Do Analytics with GTM

/ SprUng, KEEPERS, CODE-NOW-NOW-NOW, CODING / 3 minutes of reading

1. Initialize All Environments with GTM and Analytics Stream IDs

  • Install GTM: First, ensure that Google Tag Manager (GTM) is installed on your site across all environments (development, production, etc.). You’ll add the GTM container to your website or web app.
  • Analytics Stream Setup: In GA4, set up the Analytics Stream ID, which is needed to track events. Make sure the GTM container sends data to the correct GA4 Analytics Stream ID.

2. Set Up a History Trigger for Single-Page Apps (React)

  • In Single-Page Apps (SPAs) like React, page views don’t trigger like traditional websites because the page doesn't reload on navigation. Set up a History Change Trigger in GTM to track navigation changes in React applications (this acts like a page view trigger in SPAs).

3. GTM Setup: Tags and Parameters

3.1 Using Standard Tags (Basic Parameters)

  • Google Analytics has many built-in parameters that can be tracked automatically (e.g., page views, clicks, etc.).

  • For GA4, set up basic tags in GTM, such as:

    • Page View: Tracks when a page is loaded.
    • Event: Tracks custom user interactions (e.g., button clicks, form submissions).

3.2 Adding Non-Basic or Custom Parameters

  • For any non-standard/custom parameters (like nats_affiliate_referrer), you need to:

    1. Create a Variable in GTM to capture the parameter (e.g., Data Layer Variable).
    2. Add the Custom Parameter to the Tag in GTM. For example, when setting up a GA4 Event Tag, include the custom parameters as part of the event.
    3. Push the Parameter into the Data Layer on the site (or within GTM). You can either push these parameters directly from the website (using the dataLayer.push() method), or you can handle it directly in GTM by capturing these values as variables in the GTM container.

    Note: The parameter push can be done either on the page directly (using dataLayer.push) or inside GTM by configuring the variable, but it's essential that the parameter exists in the Data Layer before the event is fired.

4. Setting Up Custom Dimensions in GA4

  • For Custom Dimensions (Non-Standard Parameters):

    • Once you add a custom parameter (like nats_affiliate_referrer), you need to set it up as a Custom Dimension in GA4.
    • In GA4: Go to Admin > Custom Definitions > Custom Dimensions, and add the custom dimension, mapping it to the exact parameter name (e.g., nats_affiliate_referrer).
    • This ensures that the data sent from GTM is captured and stored in GA4, where you can use it for reporting and analysis.

Recap of Confusing Part: Parameter Push

If you push custom parameters (like nats_affiliate_referrer) using the dataLayer.push() function directly on your page (in the code), you don't need to push them again in GTM. Instead, just configure GTM to capture and pass that information.

However, if you don't push it from your page, you can use GTM to capture and send it by creating variables that pull values from cookies, the DOM, or other sources, and then include those variables in your tags.

Final Checklist:

  1. GTM Tags Setup: Set up page view and event tags.
  2. Push Custom Parameters: Ensure custom parameters are pushed either on-page (via dataLayer.push()) or configured as variables in GTM.
  3. Custom Dimensions in GA4: Set up corresponding Custom Dimensions in GA4 for any non-standard parameters.
  4. Testing: Use Preview Mode in GTM and GA4 DebugView to ensure that your events and parameters are being sent and received properly.
Scroll to Top