GTM Validation

This documentation outlines how to validate Google Tag Manager (GTM) setup and dataLayer pushes

Validate basic dataLayer events

Ensure gtm.dom & gtm.load fire on initial page only

    1. Open the ‘Console’ tab in developer tools (see FAQ below for how to open developer tools).
    2. Click into the window and type ‘dataLayer’ and hit enter/return button on your keyboard.
    3. Click the caret to expand the dataLayer object.
    4. The output will show a list of dataLayer events and pushes that occurred on the current page.
    5. Verify that there is a ‘gtm.dom’ and ‘gtm.load’ events in the dataLayer object. These events should only be triggered on the initial page load. If either are missing in the dataLayer, then notify the Nyla team.
      image.png

Ensure gtm.historyChange-v2 & page_view fire on next page load

    1. Open the ‘Console’ tab in the developer tools window (see FAQ below for how to open developer tools).
    2. Click into the window and type ‘dataLayer’ and hit enter/return button on your keyboard.
    3. Click the caret to expand the dataLayer object.
    4. Verify that there is a ‘gtm.historyChange-v2’ and ‘page_view’ events in the dataLayer object. These events should be triggered on every page load on the Nyla site. View a few pages and verify these events happen on each page.  If it’s missing in the dataLayer, then notify the Nyla team.
      image.png

See the following screen recording showing how to validate the above:

Ensure allow.cookies fires (if using Consent Management)

This step applies if a consent management app is enabled on your Nyla site (highly recommended). If you don't have a consent management app enabled and you're selling to regions requiring consent management, we recommend you enable a consent management app and then come back to this section to continue validation.

  1. Open the ‘Console’ tab in the developer tools window (see FAQ below for how to open developer tools).
  2. Click into the window and type ‘dataLayer’ and hit enter/return.
  3. Click the caret to expand the dataLayer object.
  4. Verify that the ‘allow.cookies’ event has fired on the initial page load.
  5. Click to another page on the same site and repeat Steps 2-4. Verify that you can still see the 'allow.cookies' event from Step 5, and that it's not repeated. If it’s missing in the dataLayer (or firing more than once), then notify the Nyla team.
    image.png

Here's a screen recording of dataLayer validation on a site that a) is using GTM (which makes it easy to validate) and b) is running a typical mix of marketing technologies, all of which is subject to allow.cookies. This recording delves into the allow.cookies event as well as showing some validation regarding Enhanced Ecommerce events as described in the next section:

Validate Enhanced Ecommerce Events

The following ecommerce events power web analytics and marketing tracking on the client’s site.  Please ensure the following events have the correct information and are triggered at the proper time.

  1. product detail view
    1. Navigate to a product detail page (PDP).
    2. Open the ‘Console’ tab in the developer tools window (see FAQ below for how to open developer tools).
    3. Click into the window and type ‘dataLayer’ and hit enter/return button on your keyboard.
    4. Click the caret to expand the dataLayer object.
    5. Find the most recent ‘product detail view’ event in the object (if multiple).
    6. Continue to expand the nested object until the product array is visible.
    7. Verify data is accurate and matches the current product viewed. This event should be triggered every time a PDP is viewed. If it’s missing or inaccurate, then create a development ticket to resolve.
      image.png
    Repeat the above validation steps a-g for the following enhanced ecommerce events, which are indicated in the format Event Name | Event Description | Event Trigger(s):
  2. product impressions | tracks when a list of products viewed | view homepage, plp, pdp, cart pages
  3. product click | tracks when a product clicked in list | click product in list on homepage, plp, pdp, cart
  4. add to cart | tracks when a product is added to cart | add to cart action from pdp and plp or increase quantity in cart.

Note: When the user goes into checkout, Shopify's native tracking takes over, and is no longer connected in any way to Nyla. The following enhanced ecommerce events are listed for the sake of avoiding any confusion regarding whether they will occur in a purchase journey, but cannot be validated in the same way as the events above. For all matters related to tracking of checkout and beyond in the customer journey, please reach out to Shopify support.

  1. checkout [not included in Nyla dataLayer] | tracks the user’s progress through the checkout | view each checkout page (shipping, billing, payment) // Note: the checkout tracking tracking event occurs within the Shopify checkout page, which is controlled by Shopify.
  2. transaction [not included in Nyla dataLayer] | tracks a purchase/conversion | place an order // Note: the transaction event occurs within the Shopify checkout success page, which is controlled by Shopify.

Validate Tags Configured in GTM

    1. Ensure tags are triggered based on the correct dataLayer events (listed above) and pass the correct information.
    2. Two common third party tags configured in GTM are Google Analytics and Facebook. These third party tags pass event information such as when a user visits a product page, adds to cart and ultimately completes the order.
    3. The steps below show how to validate the tags are configured correctly.
      1. Navigate to Nyla site.
      2. Open the browser developer tools (steps listed above).
      3. Navigate to a product page and view the tags fire in the Network tab or download this Chrome extension here that shows the tags in the Console tab.
        image.png
      4. Repeat this process for other key dataLayer events (listed above) and any other tags that are configured in the GTM container.

Post Launch: Reporting

    1. If migrating to Nyla and a Google Analytics property already exists, then it’s recommended to setup the report linked here to monitor the migration.

FAQ

Q: How do I open browser developer tools?

A: Browser developer tools will be needed to validate the GTM and dataLayer configuration. This walkthrough utilizes Chrome’s developer tools, but similar testing can be done on other browsers as well.

To access Chrome’s developer tools, navigate to the site you want to validate. There are a couple ways to access developer tools:
  1. Right click on the website page and click the ‘Inspect’ button.
    image.png
  2. In the top browser menu, navigate to the ‘View’ → ‘Developer’ → ‘Developer Tools’ section.
    image.png

 

Reference

Haven't yet set up your GTM container? For a step-by-step guide, click here

New to GTM? Check out this helpful overview