Gatsby: Using the GA/GTM Data Layer with Gatsby

[jeremylynch]

What is the best way to use the GTM Data layer in Gatsby?

Importantly, the Data Layer needs to be defined (with dynamic variables) BEFORE tracking data is sent to Google Analytics. The standard implementation of GA in Gatsby is by sending tracking data after onRouteUpdate:

exports.onRouteUpdate = ({ location }) => {
  // Track pageview with google analytics
  window.ga(`send`, `pageview`)
}

How can I define my Data Layer with dynamic variables before tracking data is sent to GA?

[horacioh]

have you checked this plugin ?

here you have a config file you can add when boostrapping. also, what type of dynamic variables you need to setup?

also there should be some examples of how other gatsby websites are using this plugin. How I used it in the past i had no use case where I needed to add a dynamic config before sending data to it.

hope these helps!

[jeremylynch]

Each different page has dynamic variables (eg. Page title) that are unique to that page. Essentially, I need to take those dynamic variables and add them to the Data Layer before the page view data is sent to GA.

In other systems where the entire page reloads this is easy to achieve, just by changing the Data Layer in a script tag in the head on each different page. Not sure how to achieve this in Gatsby

[horacioh]

what you can do is:

• disable the automatic pageView event from the GTM backoffice
• make a pageQuery on everypage to get the dynamic information you need
• when you have that info, fire a custom event to GTM with that information
• then setup a custom trigger in GTM to send the proper pageView to GA from GTM with the data provided to the DataLayer.

let me check if there's documentation from GTM that explains these process with examples :)

[shansmith01]

I have a data layer component that I include on every page which fires and event "custom page view". In gtm i set google analytics to track on this custom page view rather than the default.

Here is a snippet if it helps. I plan to expand this out with more props so I can handle ecom tracking etc. If anyone can think of a better way I would be keen to hear it.

import React from 'react';

/**
 * A component for pushing events into the GTM datalayer. Uses component did mount to ensure a window dom element is available.
 * Further work is needed on this component to make it more powerful
 */
export default class DataLayer extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <></>;
  }
  componentDidMount() {
    const { event, pageType, destination } = this.props;

    {
      window.dataLayer.push({
        event: event
        // pageType: pageType,
        // destination: destination
      });
    }
  }
}

[shansmith01]

In case it's useful. Adding i eCommerce tracking is pretty straight forward. Let's say you are using stripe payments. When a successful response comes back you would fire something like this:

dataLayer.push({
                    event: 'Purchase',
                    ecommerce: {
                      purchase: {
                        actionField: {
                          id: json.charge.id, // Transaction ID. Required for purchases and refunds.
                          revenue: revnueWithNosymbol // Total transaction value (incl. tax and shipping)
                        },
                        products: [
                          {
                            // List of productFieldObjects.
                            name: description, // Name or ID is required.
                            price: revnueWithNosymbol,
                            quantity: 1, // Coule make dynamic
                            coupon: '' // Optional fields may be omitted or set to empty string.
                          }
                        ]
                      }
                    }