Google Tag Manager integration

Overview

With Sitefinity Insight, you can easily integrate Google Tag Manager (GTM) to collect data and track specific user behavior. In case you are already working with the Tag Manager, you can use your existing triggers and create custom HTML tags to enable Sitefinity Insight to collect data when your tags fire. For more information, see Google Tag Manager.

In this article, you will learn how to integrate Sitefinity Insight with Google Tag Manager on your Sitefinity CMS sites and on sites which are not built using Sitefinity CMS.

PREREQUISITES: Register a Google Tag Manager account and create a container. For more information, see Setup and install Tag Manager.

Configure Google Tag Manager

First, you need to install and configure the Sitefinity Insight template in your GTM workspace. To do this, perform the following:

Log in to Google Tag Manager.
Follow the procedure described in the GTM documentation Community template gallery » Add a template from within Tag Manager.
In step 3, enter Progress Sitefinity Insight.

RESULT: Sitefinity Insight is available in Google Tag Manager, and you can create tags based on its template.

Use Google Tag Manager in Sitefinity CMS sites

To use GTM in your Sitefinity CMS sites, you must use the JavaScript code provided by Google on your pages or page templates.
To do this, perform the following:

Create and configure the Sitefinity Insight tag

Perform the following:

Log in to Google Tag Manager.
Click Tags » New.
The Untitled Tag dialog box opens.
Name your tag
For example, enter Sitefinity Insight Tag.
In Tag Configuration, click .
In the list that appears, select Progress Sitefinity Insight.
The Tag Configuration window appears.
Select the Use this tag only on Sitefinity CMS sites checkbox.
Enter the Interaction type, also known as the tracking predicate.
For example, enter Visit.
For more information, see Developer terminology » Predicate.
Enter the Interaction, also known as tracking object, such as the page URL.
For example, enter https://example.com/about.html.
For more information, see Developer terminology » Object.
Optionally, enter Contact details (also known as Subject metadata).
For more information, see Developer terminology » Subject metadata.

IMPORTANT: Unless instructed otherwise by the Sitefinity Support team, leave the Additional interaction data field empty. There is no way to access this data from within Sitefinity Insight.
Configure the firing trigger.
For more information, see GTM documentation » Tag Manager Triggers.
Click Save.

Get the GTM integration code

Perform the following:

Log in to Google Tag Manager.
Click the container you want to use.
Its ID looks like GTM-ABCDEF.
The Workspace window appears.
Click Install Tag Manager.
The Install Google Tag Manager window appears.
Copy and save the two scripts.
The first script is the head script and the second - the body script.
Close the dialog.

Use the integration code on MVC pages

Perform the following:

In Sitefinity CMS backend, navigate to Design » Page templates.
Open the page template where you want to use GTM.
Alternatively, you can use GTM only on a particular page. In this case, click Pages, and open that page for editing.
Drop a JavaScript widget anywhere in the template.
Click Set JavaScript and paste the head script that you copied in the previous procedure.
Click More options and select In the head tag.
Save your changes.
Drop an Embed code widget anywhere in the template.
Click Embed code.
Paste the body script that you copied in the previous procedure.
Save your changes.
Publish the page template.

Use the integration code on ASP.NET Core pages

Perform the following:

In Visual Studio, open your Sitefinity CMS ASP.NET Core Renderer application.
Open the page template where you want to add GTM.
For example, open Views » Shared » _Layout.cshtml, which is the default ASP.NET Core template.
For more information, see Develop with ASP.NET Core » Layout files.
Paste the head script that you copied in the previous procedure inside the <head> section, after the @* Custom scripts *@ comment.
Paste the body script that you copied in the previous procedure in the beginning of the <body> section.
Save the file and build your solution.

Use the integration code on Next.js pages

Perform the following:

To get started, install the @next/third-parties library in the terminal:
npm install @next/third-parties@latest next@latest
Open your Next.js project in your code editor.
To load Google Tag Manager for all routes, include the component directly in your root layout and pass in your GTM container ID.
Open the app/layout.tsx file, which is the default layout file for Next.js applications.

Use the following code snippet:

TSX

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
    <!--- replace "GTM-XYZ" with your GTM container ID-->
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

To load GTM for a single route, include the component in your page file:

TSX

import { GoogleTagManager } from '@next/third-parties/google'

export default function Page() {
    <!--- replace "GTM-XYZ" with your GTM container ID-->
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

RESULT: GTM and the Sitefinity Insight tag are active on your Sitefinity CMS site, and you can use them.

Use Google Tag Manager on non-Sitefinity CMS sites

As a marketer, GTM offers you multiple benefits, such as the ability to quickly perform experiments, to change your web properties without coding knowledge, or to manage multiple marketing tools from a single place.
If you want to use it together with Sitefinity Insight on your non-Sitefinity CMS pages, perform the following:

Create and configure the Sitefinity Insight tag

Perform the following:

Log in to Google Tag Manager.
Click Tags » New.
The Untitled Tag window appears.
Name your tag.
For example, enter Sitefinity Insight Tag.
In Tag Configuration, click .
In the list that appears, select Progress Sitefinity Insight.
The Tag Configuration window appears.
Deselect the Use this tag only on Sitefinity CMS sites checkbox.
In Insight deployment, select the Insight deployment that you will use to host your data centers.
For more information, see Sitefinity Insight deployment options.
In Data Center API key, enter the API key for the data center where you want to host your data.
For more information, see Data centers and data sources » API key.
In Data Source, enter the identifier for the data source.
For example, enter My website.
For more information, see Data sources.
In Tracking cookie domain, enter the domain from which your tracking cookie is served.
For more information, see Track interactions across multiple domains.
In Domains for cross-domain tracking, enter a comma-separated list of external domains.
For example, mydomain.com, example.com.
For more information, see Track interactions across multiple domains » Configure external (non-Sitefinity CMS) sites.
In Max age for tracking cookie, enter the value in days the period that the visitor’s browser will retain the tracking cookie.
The default value is 365, which is one year.
If you want the cookie validation to reset every time the visitor visits the tracked property, select Sliding expiration for tracking cookie.
Enter the Interaction type, also known as the tracking predicate.
For example, enter Visit.
For more information, see Developer terminology » Predicate.
Enter the Interaction, also known as tracking object, such as the page URL.
For example, enter https://example.com/about.html.
For more information, see Developer terminology » Object.
Optionally, enter Contact details (also known as Subject metadata).
For more information, see Developer terminology » Subject metadata.

IMPORTANT: Unless instructed otherwise by the Sitefinity Support team, leave the Additional interaction data field empty. There is no way to access this data from within Sitefinity Insight.
Configure the firing trigger.
For more information, see GTM documentation » Tag Manager Triggers.
Click Save.

Integrate the GTM code on your non-Sitefinity CMS pages

Perform the following:

Log in to Google Tag Manager.
Click the container you want to use.
Its ID looks like GTM-ABCDEF.
The Workspace window appears.
Click Install Tag Manager.
The Install Google Tag Manager window appears.
Copy and save the two scripts.
The first script is the head script and the second - the body script.
Close the dialog.

Finally, Integrate the head script in the <head> tag of the pages where you want to use the Sitefinity Insight GTM tag and the body script in the beginning of the <body> tag.

RESULT: GTM and the Sitefinity Insight tag are configured and ready to to be used on your non-Sitefinity CMS site.

Test the integration

To test whether Sitefinity Insight receives interaction data and verify that the integration is properly configured, you can just open a tracked page in a browser. You can look at the Network tab of the browser Developer tools and verify there are requests to the Sitefinity Insight API servers. Next, you can look at your data center in Sitefinity Insight and see the tracked interactions in the Journey timeline of known contacts.