Google Tag Manager is the needed bridge between analytics tools and marketers, and after 2014 with its second version, it becomes a must tool for everyone.
In this post, I will give you a short tutorial how to implement Google Tag Manager and Google Analytics in Sitefinity.
The first difference that you will encounter between Google Tag Manager (GTM) and Google Analytics (GA) is the tracking code. In GA, there is only one <script> tag that needs to be placed ideally before the closing </head> tag. In GTM the placement is recommended to be as high as possible in the <head> tag, but there is a second one, an <iframe> tag wrapped in <noscript> tag. The idea of the second code is capability, and even if client disables JS from the browser, the tracking will not be interrupted.
Here I will propose two ways of implementing GTM:
If you have access to the source code
(the smart way)
The best way to my opinion is to preserve the given codes as much as possible and in the same way the default.cshtml layout as clean as possible.
- Create two empty *.cshtml files named for example TagManagerHead.cshtml and TagManagerBody.cshtml and place them in ~Mvc/Partials/ or another designated folder.
- In the files copy paste both tracking codes, the
<script>tag in TagManagerHead.cshtml and<noscript>tag in the TagManagerBody.cshtml. It’s important not to strip or modify parts of the code. - In the default.cshtml or all others layout templates that are not based to any other, import the files:
- for more information about layout templates visit: Base page templates on layout files
<!DOCTYPE html>
<html @Html.RenderLangAttribute()>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title></title>
@Html.Partial("~/Mvc/Partials/TagManagerHead.cshtml")
<!-- other code -->
</head>
<body class="@bodyClass">
@Html.Partial("~/Mvc/Partials/TagManagerBody.cshtml")
<!-- other code -->
</body>
</html>If you do not have access to the source code
(the dumb, but sometimes necessary way)
Well, the not recommended way is still better than nothing, so go to the backend or www.yourwebsite.com/Sitefinity. From the menu navigate to Design > Page Template and choose your default layout or layouts.
First, you will need to Drag widget from Scripts and Styles > JavaScript. When clicked on Edit choose Write JavaScript and paste the tracking head code without the opening and closing script tags. It’s important to remember this as it might not work correctly, the widget will wrap the source code with <script> tag. After that go to More options and choose to include the code in HTML In the head tag.
For the body tracking code, we will use widget Scripts and Styles > Embedded code. Will place it as the very first block above all others, as it plays the role of "Where the widget is dropped" and we need to be right after the opening <body> tag.
With one of these two ways, you will have a working Google Tag Manager and the power to utilize all its features.
Happy tracking!
