Implementing Adobe Analytics for Gatsby site

Adobe Analytics is the industry-leading analytics solution to track website and mobile app performance. It is at the core of an organization’s digital marketing strategy. It empowers data-driven decision-making in enterprises. Adobe Launch is the tag management tool from the Adobe Experience Platform. It integrates well with Adobe analytics and is the preferred method to implement Adobe analytics tags.

In this article, we will learn the specific adaptation required to implement Adobe Analytics for a Gatsby site.

Adding Gatbsy plugin:

The below link contains the plug-in to be added: https://github.com/nbaosullivan/gatsby-plugin-adobe-launch The code needs to be added in Gatsby config. Upon building the code, it goes to the main HTML page, within a script tag.

Here are a few tips:
a. The adobe launch script URL is the URL you get within Adobe Launch -> Environment -> Install
b. If you are not using a data layer in your web analytics, you can comment on that part of the code or remove it.

Default Adobe launch rule

In a regular Adobe launch implementation, you will typically capture page views in the following way.

(1) Create a data element that captures page name using a Javascript variable or DOM attribute
(2) Create a rule
that watches for
Event: Page load or DOM Ready
Action:
(a) Adobe analytics extension -> Set variables -> Set Page Name = the value of the data element created
(b) Adobe analytics extension -> Send beacon

If you try the above method on a Gatsby site, you would have noticed that only the home page is recognized as a hit. Moving to any other tabs/pages on the website will not generate a hit. However, it’s very important to track analytics data for each website page, to measure pageviews, pathing, and so on.

Why is only the first page recognized by Adobe analytics?

This behavior is because a website built with Gatsby is essentially a single-page application (SPA).

Gatsby loads all resources required to navigate through a website on the first-page load itself. When the user clicks links within the website, different pages seem to load just like a multi-page application. Even the URL changes. However, in reality, the page does not reload. Gatsby achieves this effect using the concept of routing.

Adobe launch rule for Gatsby site

The solution to achieve the desired result on a Gatbsy site involves watching for the Route change event
Now let us see how to change this to work for a Gatsby site.

(1) Create a data element that captures page name using a Javascript variable or DOM attribute
(2) Create a rule
that watches for
Event: Direct Call
Identifier: gatsbyRouteChange

Action:
(a) Adobe analytics extension -> Set variables -> Set Page Name = the value of the data element created

(b) Adobe analytics extension -> Send beacon

Notice that the only change we made in the launch was to change the event from DOM Ready to Direct call. Ta-da! The pageviews will start getting captured accurately now.

Above is a screenshot from the Adobe Experience Platform Debugger. It is a chrome extension that you can install to debug the values of your Adobe analytics variables. You will notice that there is a hit sent for each page change and the Page Name is getting captured correctly.