Google Tag Manager and Sitefinity CMS

As a marketer, capturing useful web data should be an important component of your digital strategy. Knowing what pages perform well and what elements on those pages generate the most engagement allows your team to create web content and campaigns that convert site users into customers.  The way to track the success of your marketing campaigns is by using tags. 

As defined by Google, “Tags are segments of code provided by analytics, marketing, and support vendors to help you integrate their products into your websites or mobile apps.”  Tags help your team gather useful marketing data.

Implementing tags on a website used to take someone with a lot of technical expertise, such as a developer, but Google Tag Manager makes it easier for marketers to deploy and manage tags on your Sitefinity site.

In this article, we’ll explain what you can track with tag manager, how to set-up Tag Manager on your Sitefinity site, how to create a basic tag to collect website data, and also how to test your tag to verify that it’s been implemented correctly. 

A Guide for Using Google Tag Manager and Sitefinity CMS

• The Real Benefit of Tag Manager (GTM) for Marketers
• What Can You Track on Your Site with Tag Manager?
• How Google Tag Manager Works
• Should You Have Both Google Tag Manager and Google Analytics on Your Site?
• How to Know if Google Tag Manager is on Your Site?
• What if Your Marketing Team Can't Access Your GTM (Google Tag Manager) Account?
• How to Find Your GTM Code Snippet to Add to Your Site?
• Installing Tag Manager with JavaScript in Sitefinity
• How to Create a Tag in Google Tag Manager?
• How to Test Your GTM Code Snippet?
• Can You Add Tags/Install Tag Manager on Your Dev or Test Environment?
• Can I Pull Data from Google Tag Manager into Sitefinity Insight?
• Helpful Tools When Using Tag Manager

The Real Benefit of Tag Manager (GTM) for Marketers

Google Tag Manager (GTM) allows you to easily implement snippets of code on your website without having to modify code. As a marketer, web analytics and site tracking data are important and every time you want to track something, with GTM you don’t need to rely on a developer to go in and add code snippets.

Having a lot of different code snippets on your website could cause a page on your site to load slower but it can also make your code messy. GTM allows you to track actions from users on your site without having to add a bunch of tags.  These are both great benefits for using a tool like Google Tag Manager.   

What Can You track on Your Site with Tag Manager?

There’s a lot of different things you can track on your site. These are called tag types in Tag Manager.  You can set up tags for Google Analytics, AdWords Conversion Tracking, remarketing, Facebook pixels, etc.  With GTM you can track things like clicks on buttons or links, PDF downloads, form submissions, or most other calls to action (CTAs). 

How Google Tag Manager Works

There are three main components to Google Tag Manager; tags, triggers, and variables.  Tags are snippets of code from 3rd party tools that essentially tell GTM what it needs to track on your site. A trigger is an action someone takes that signals GTM to track that action. A variable provides GTM additional information to enable your tag and trigger. This can be things like click classes, click elements, click text, click ID.

For example, let’s say you want to track when a user clicks on a custom interactive quiz widget on a specific page but the page doesn’t load every time an item is clicked. In order for your analytics to track this type of interaction, a tag needs to be set up with a variable that has a trigger firing on ‘click classes’ that contains the name of the class identified in your code.

The trigger tells Tag Manager to do what you want it to do. Some examples of triggers are page views, clicks on a button or link, form submission or you can set-up a custom event. 

Should I Have Both Google Analytics (UA Tracking Code) and Google Tag Manager on My Site? 

If you plan on utilizing Google Tag Manager to implement tracking scripts on your website, then remove your Google Analytics or UA tracking code from your page template. Before you remove your UA code snippet, go ahead and set up a Google Analytics tag in GTM.  Keeping both tracking snippets could cause issues in your reporting and will duplicate visit counts. 

How Do I Know if Google Tag Manager is on My Site? 

There are a few ways to find out if you already have Google Tag Manager on your site. The easiest way to determine this is by viewing your site's source code and searching for a GTM code snippet.  You can do this by visiting your site's homepage. While on your home page, right-click and then select View page source.  A new window will open with source code, which is where you will do a search for the GTM code snippet.  Next, hit Ctrl-f on your keyboard and type in "gtm". You should see the code snippet in a top section of your source code.  

What if Our Marketing Team Can't Access our Google Tag Manager Account?

It can be really frustrating when you're marketing team cannot access your GTM account. This typically happens if a previous employer or agency created the account for your business and you have no way to gain access to it. If no one on your team has access to your GTM account, it's very difficult to obtain access to it.  Sometimes it quicker to just create a new GTM account, swap out the container code snippet on your website, and start from scratch with setting up tags. 

How to Find Your GTM Code Snippet to Add to Your Site

In order to use Google Tag Manager, you will need to add the code snippet to your site. 

When you log-in to your Tag Manager account workspace, you will see right under the top Tag Manager logo; Workspace, Versions, and Admin. Go to Admin. On the right side of the screen, you’ll see the container with options below. Go to “Install Google Tag Manager” which will bring you to a screen with two code snippets. 

It says to copy and paste the code and add it to every page of your site. But there are two ways to do this. You can add to every page of your site using the Sitefinity JavaScript widget in your page editor or you can add it to the master template page (recommended). Adding it to the master page is more technical and may require a developer. Any modifications to the master template should be done very carefully as it will impact every page of your site. 

Adding to your master template means you won’t have to add it to every page of your site. For a site with a lot of pages, this is a big-time saver. 

Installing Tag Manager with JavaScript in Sitefinity

The directions in Tag Manager says to “Paste this code as high in the <head> of the page as possible.” 

• First go to the page in your Sitefinity CMS to edit 
• All your widgets are listed on the left side of your screen
• Go to the JavaScript widget – ours is categorized under Scripts and Styles
• Drag and drop the widget on your page
• Select Set JavaScript on the widget 
• First, copy the top code snippet in GTM and paste it in the JavaScript widget
• Next, select More options
• It will ask, “Where to include in HTML?” and you will want to make sure ‘In the head tag’ is selected
• You can add a description for internal reference and hit save. 

Another reason why adding the code to your master page template is our recommended method is because when you add the <noscript> tag (the second code snippet listed in GTM), you can only add to master template because this tag cannot be added to your page using the JavaScript widget in Sitefinity. 

How to Create a Tag in Google Tag Manager 

We’ll start simply by creating a tag that will track your site metrics. 

First, we’ll need to set-up a variable in GTM that the tag will reference. The variable will include your Google Tracking ID. 

From your Tag Manager workspace, go to ‘Variables’ and select the button for ‘New’. 

Name your variable. We named it "GA-Variable" and then select inside the configuration box window and select Google Analytics Settings from the drop-down options.

In this next step, you will add your Google Analytics Tracking ID and set the cookie domain to ‘auto’. Hit save.  

Now we’ll create the tag that will reference this variable. We don’t need to create a trigger because this tag will fire on all pages and that is a default trigger in GTM. 

1. Go to your workspace and go to ‘Tags’ and then select ‘New'.

2. Name your new tag. 

3. Click in the ‘Tag Configuration’ box and a window will pop-up to the right, select ‘Google Analytics: Universal Analytics’ from Featured tags. 

4. Track Type should be set to ‘Page View’ and ‘Google Analytics Settings’ should be set to {{GA-Variable}}, which is the variable we set-up earlier. 

This is how the set-up should look like so far. 

 

Go to ‘Advanced Settings’, make sure that ‘Tag firing options’ field is set to “Once per event”  

The trigger should be set to ‘All Pages’ and then ‘Save’ your changes.

It’s time to publish your Google Analytics Tag. 

Go to your workspace and select ‘Publish’, name your version, make sure you are publishing to the correct environment and hit ‘Publish’. 

 

How to Test Your Google Tag Manager Code Snippet 

Once the GTM code snippet has been added to your website and you have set-up your tag in GTM, you will want to test it to make sure it’s set-up correctly. First, make sure you submitted your GTM workspace changes by going into Google Tag Manager and selecting ‘Submit’ and creating a version name like,” GTM Code Snippet Added”, add a description if you wish, make sure ‘Live’ environment is selected and hit submit.  

GTM has something called ‘Preview Mode’, so you can preview the tag you just published and determine if it’s firing correctly on your site. 

To do this, go to your Tag Manager workspace, and near the submit button on the left side of your dashboard, hit the ‘Preview’ button.  It will refresh this screen with an orange bar across the top of your workspace stating that you are in preview mode. 

Then within your web browser, go to a new tab and go to your site. Here’s an example of Tag Manager's preview mode for our own site. 

If the tool doesn’t show on your site, then refreshing the page should do the trick. If nothing shows, there may be an error in the set-up process. The debug tool is simple to use and the easiest method to ensuring your tags are firing correctly.  The summary section to the left shows the events that were captured, and you will see all the tags that fired on the page once it loaded. Since Universal Analytics or your Google Analytics Tag fires once a page is loaded to capture data like page views, you should see this tag listed.  On ours, it is the first tag listed. This tells us that our tag has been set up correctly. 

If you have set-up a tag that fires when a user clicks an element on the page, then you’ll need to go to that element or “button” and click it. Once clicked, you should see the tag listed in your debug tool. 

Can I Add Tags to My Dev or Test Environment in Tag Manager? 

Tag Manager allows you to add and manage different web environments, which is a very helpful tool if you want to test if a tag works properly before pushing a page to your live environment. 

From your workspace, go to the Admin section at the top and in the container go to ‘Environments’. 

Select ‘New’ to create a new environment. Name your environment and add the destination URL as your dev URL and then select ‘Create Environment’.  Here are screen previews of the steps: 

Go to Admin tab and in the container select Environments at the bottom of list:

Name your environment and then go to Click here to add destination URL:

Copy/paste your dev or staging URL in the field and select button to create the environment:

 

In the environments section, go to a column called Actions and in the drop-down select Get snippet:

Copy/paste your code in your site:

Once your dev environment has been added to Tag Manager, you will need to add the code snippet to your Sitefinity CMS. This would be the same process for adding the code snippet on your live site.  

To find the code snippet, go to your recently create Dev Environment in GTM and go to ‘Actions’ > Get Snippet. Copy the snippet and follow the instructions. 

 

Can I Pull Data from Google Tag Manager into Sitefinity Insight?

Are you using Sitefinity Insight? There’s a way to integrate your GTM to Sitefinity Insight so that Sitefinity Insight collects the data when your tags fire.  Once you have your GTM tracking code added to all your pages by adding it in the master page (recommended method) you can then configure the integration in GTM by setting up a custom HTML tag that fires anytime a user clicks on a page element that includes the class, class=”sfPublicWrapper” (trigger in GTM). 

 

Helpful Tools when Using Tag Manager

One tool that you will want to add to your tool belt is Google Tag Assistant. It's a Chrome extension that allows you to quickly test and diagnose tags that you implement on your site. 

Utilizing Google Tag Manager for a site on Sitefinity CMS does require some technical expertise, in both Sitefinity and tag manager but when implemented and utilized correctly, the data you receive can be used to maximize your marketing efforts. If you have any questions on your Sitefinity CMS or if you’re looking for a Sitefinity maintenance partner, reach out to our team.