Use Google Analytics with Kontent.ai

What is Google Analytics? 

Google Analytics (GA) is a free Web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes. The service is available to anyone with a Google account.

We recommend using Universal Analytics and Google Tag Manager as they are most suitable to connect data from multiple channels, such as mobile or IoT.

This tutorial covers basic web scenarios. For logging of views and events from other channels, refer to the Google Analytics developer documentation.

What is Google Tag Manager? 

Google Tag Manager (GTM) is a free Tag Management System, which allows you to place simple static code into your web site and manage individual tags (pieces of tracking code) from the GTM admin interface.

Integration with Kontent.ai

In this tutorial, you'll learn how to integrate Google Tag Manager into a web site to track its page views, and add a custom tracked event connected to a specific piece of content.

You will:

• Connect the web site with GA.
• Track page views.
• Add a custom conversion event to GTM.
• Extend content with metadata for GA.
• Provide the metadata to GTM on the web site.

Now let's look at the steps in detail. As you will see, it follows a familiar process of integrating GA and GTM with just any site.

Step 1: Connecting the web site with Google Analytics

First, you need a GTM account. Visit Google Tag Manager and if you don’t have an account yet, create one.

Then navigate to the Admin tab, and select Install Google Tag Manager. This will show you the code to insert into your web site. If you are not a developer, ask your developer to insert the code for you.

The Google Tag Manager code should be present on all pages where you want the tracking to be enabled.

Step 2: Adding a tag for page views

Google Tag Manager doesn't track anything by default. To start tracking page views, you need to add a tag for it.

Create a new tag from either the Overview or Tags section of the account, with the following settings:

• Tag name – Page view
• Tag type – Google Analytics – Universal Analytics
• Track type – Page view
• Google Analytics Settings – see below
• Trigger – All pages

You need to connect the tag to your Google Analytics account. For that, you need to configure the Google Analytics Settings field within your tag. Create a new variable from that field with the following information:

• Name – Google Analytics
• Type – Google Analytics settings
• Tracking ID – The Tracking ID of your Google Analytics account

You can find the Tracking ID in the Admin section of your Google Analytics account under Tracking info.

After you save the tag, you need to Submit the GTM version to apply the changes to the live tracking environment.

Page views tracking finished – At this point, your page views should be tracked. When you visit the Real-Time report in Google Analytics and view pages on the web site, you should see the page views being tracked already.

Step 3: Register tag for the custom conversion event 

The next step is to try custom tracking. This is a simple enough scenario that could be also achieved directly from GTM using click triggers. However, the outlined steps give you broader options with your future custom tracking which you can connect just anywhere (not every action is a click event). That is why we are showing an approach with a custom event in this tutorial.

We will be interested in clicks on the contact address in the Sample app's Contact section, which now focuses the map to the specific address. That is the main action we expect the site visitors to perform on this page.

Navigate back to Google Tag Manager and create another tag with the following settings:

• Tag name – Conversion
• Tag type – Google Analytics – Universal Analytics
• Track type – Event
• Category – Campaign
• Action – Conversion
• Value – See below
• Google Analytics Settings – Google Analytics (the one you created earlier)
• Trigger – See below

Most of the values are up to you – they provide a better context within the Google Analytics report.

To place the conversion name into the event, set the Value of the event. The most universal way is to get the Value from Data Layer (DL) data. A Data Layer is an object that contains all the information that you want to pass to Google Tag Manager.

Create a new variable in the Value with the following information:

• Variable name – DL Conversion
• Variable type – Data Layer Variable
• Data Layer Variable Name – Conversion

Using the variable will place {{DL Conversion}} into the Value of the tag.

Similarly to page views, you need to specify a trigger for the tag. Add a new trigger with the following settings:

• Trigger name – Conversion event
• Trigger type – Custom event
• Event name – conversion

After you save the tag, the GTM part is ready. Now you need to call the custom event with the appropriate metadata from an action on your site.

Make sure to submit the GTM changes again for the changes to take effect on your live website.

Step 4: Extend Content type with conversion name

In this step, you will extend a specific content type in Kontent.ai with a conversion name for the newly created custom event in GTM.

1. In Kontent.ai, select Content model from the app menu.
2. Open the Cafe content type.
3. Add a Text element.
   1. Title – Conversion name
   2. Guidelines – Text that explains to the editor what kind of conversion names you expect.
4. Save the content type.

Now you need to add values to the element in existing items.

1. In Kontent.ai, select Content & Assets from the app menu.
2. Filter the list by content type to only the Cafe type.
3. Open a content item for editing.
4. Fill in a conversion name for the item.
   Tip: To keep things simple, you can use just the name of the cafe or its geographic location (for example, "north_america"); it's up to you.
5. Publish the content item to make sure the data is available on your live website.
6. Repeat steps 3–5 for other Cafe items.

Step 5: Fire custom conversion event on click 

The Conversion tag in Google Tag Manager expects a custom event with the name conversion (with the appropriate metadata) to be fired.

To do that, add the following code to the address onClick event in the Cafes page of the Sample App. If you're not a developer, ask a developer to do it for you.

JavaScript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'conversion',
  'conversion': cafe.conversion_name,
});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'conversion',
  'conversion': cafe.conversion_name,
});

Note that the cafe.conversion_name is specific to the data model used in your application. Make sure that your data model is updated with the new element conversion_name (element codename generated from the element title), and that you use the correct property name in your code.

If you're trying this on your own page, select whichever click handler you like and populate the conversion value with a value from your data model.

Custom conversion tracking finished – At this point, your custom conversions should be tracked. When you visit the Real-Time report in Google Analytics and perform the click actions on your website, you should see the custom conversion events being tracked.