Google Analytics via Google Tag Manager (GTM)

Google Analytics (GA), one of the most widely used website statistics service offered by Google, checks your traffic statistics and generates detailed stats and reports about your website and visitors. It allows you to track the behaviour of your site’s visitors, and accordingly make relevant business decisions. 

To use GA with Contentstack, we recommend using Google Tag Manager.

What Is Google Tag Manager (GTM)?

Google Tag Manager, or GTM, is a free tool that integrates website tags with snippets of code that sit within the code of a web page and enables you to track, analyze, and create reports of your web page. 

Using GTM, you can implement tracking and analysis code snippets easily onto your website. All you need to do is add the tag into your management dashboard and it will appear on the pages you designate.

Integrating Google Analytics into Contentstack via GTM

We will try to understand how we can integrate Google Analytics into Contentstack via GTM. For that, let’s consider an example where you need to track file download details on your website.

In this scenario, there are two things that you would like to particularly track:

• The count of visitors who downloaded the file(s)
• The page from where the users downloaded the file

For this, you can set up the GTM to easily set up a ‘Click’ trigger and a Google Analytics Tag to see what and where your web resources are being downloaded. You don't need any additional code in your site.

Now let’s look at the steps that need to be performed in order to integrate Google Analytics with Contentstack.

1. Creating Content Type

   We will start by creating a content type in your stack. The content type will be of the Content Block type and marked as ‘Single’. Let’s name it ‘Analytics’ (for ease of use) with uid as ‘analytics’. We have used the ‘Single’ natured content type as we only need to create a single entry.

   In the Content Type Builder page, add a multiline textbox field and name it ‘Code’ with the uid ‘code’. Save and close your content type.
   

2. Setting up the GTM

   Start by logging into your GTM account. Now, navigate to your container as shown in the following screenshot:

   

   Then, go to the ADMIN section and click on the ‘Install Google Tag Manager’ option. You will see the GTM code. You can copy the code provided in either the head or the body section as per your need.

   In this case, we will copy both the head and the body code snippets of the GTM and insert it into our Analytics content type. Provide the title as ‘Google Analytics’ and publish it to the required environment.

3. Setting up your web page

   In this section, we will see how you can integrate GA with your app. We will cover the steps that will help you to integrate GA with apps that are both contentstack-express-based as well as non-contentstack-express-based.
   

   contentstack-express app

   When using contentstack-express, we will make use of partials, which are static code snippets that remain constant across all web pages. Partials include your content for header and footer. Since these content remain constant across all your web pages, we will include our code in the partials.

   Now, go into the partials section of your code and create an HTML file with a name that is same as your content type UID (in our case, it is ‘analytics.html’). Add the following code into the ‘analytics.html’ file:

   {% set analytics = get("analytics") %}
   {{analytics.code}}
   

   When a page is rendered, it is the layout file that gets executed. So, we will include our HTML file into the layout file of the partial. Enter this code either in the head or the body section of the code as per the requirement.

   In this case, we include this file into the body section of layout as follows:

   {% include "partials/analytics.html" %}
   

   So, every time your web page is rendered, the layout page will load which will run your analytics file.

   In case of websites that are not created using the content-express web framework (i.e., created using SDKs),  you can refer the following section.

   Non contentstack-express app

   For non-contentstack-express apps, you can use the relevant SDKs and use queries to retrieve data from your created content type (‘Analytics’, in our case) or you can use API calls to retrieve entries from your content type (‘Analytics’, in our case).

   Now, in order to use Google Analytics after retrieving the desired data (the ‘code’ attribute), you need to put the retrieved code into the ‘body’ section of all of the web pages. Or, if you are have a standard layout set up for your pages then add the code snippet into the body section of your layout page’ code.

4. Adding events into GTM

   Finally, you can start adding events into GTM to track actions that you want to track. To do so, you need to add the appropriate tags and trigger events. For more information, you can refer ‘Google Analytics events’.