Last year I took an excellent Google Analytics class, and in that class, we learned about Google Tag Manager which allows you to manage not only your Google Analytics code, but any other tracking codes (tags) that you want to install on your website. For instance, maybe you need to install the JavaScript code for CrazyEgg or LinkedIn ads. Every time you want to make changes, you have to go in and edit the DNN skin files or muck around in the code. By using GTM, you can set up the Tag Manager code once, and make all the changes external to your website.

If you’re not technical, you can have your web developer do this once, then you can manage all your code yourself without messing up your website. DotNetNuke (DNN) is a content management system (CMS) that we use for many of our clients, and it can be a bit tricky to edit. It’s easy to screw things up if you don’t know what you’re doing.

So here are the easiest steps to get it working properly on your site.

Set Up Your Google Tag Manager Account

First, you’ll need to create your Google Tag Manager account. Log into https://tagmanager.google.com and add a new account and container. The “container” is the website that you’ll add the code to.

Set up Google Tag Manager Account

Once you have the container, you’ll see your account number, which looks like GTM-xxxxxx.

Set up a tag for the Universal Google Analytics using your GA code. Save it and publish it. Add any other tags you want to fire on your website.

Set Up Your Google Tag Manager Account Number in DNN

Assuming you’re using DNN 6 or higher, we’re going to use the built-in Google Analytics module to load the GTM code onto the website. Go into Admin -> Google Analytics. We’re going to put our Google Tag Manager account number (NOT our Google Analytics account) here:

You can turn it off for Admins and Superusers by unchecking the box if you’d like.

Update DNN Google Tag Manager in Google Analytics

 

Save the module.

Edit the Google Analtyics Module on DNN

You’ll need ftp access to your web host, or ask your web developer to do this for you. Find the file in the root directory of your website called SiteAnalytics.config, and download it to your computer. Edit the file with Dreamweaver or any text editor (Notepad works fine). It should look something like this:

site-analytics-xml-file

There are three pieces you need to change:

1. Change the line that reads <ElementId>Head</ElementId> and change “Head” to be “Body”:

<ElementId>Body</ElementId>

2. Change the line that reads <InjectTop>False</InjectTop> and change “False” to “True”:

<InjectTop>True</InjectTop>

We want the GTM code to be injected at the top of the <body> tag on the website, not in the <head> section. If you put it in the <head> section, GTM will complain.

3. Remove all the Google Analytics code and past in your GTM code between the <![CDATA[ and closing ]]> so it looks like this:

<![CDATA[

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=[TRACKING_ID]”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’[TRACKING_ID]‘);</script>
<!– End Google Tag Manager –>

 ]]>

Remove your account number and change it to be [TRACKING_ID] (two places). Be careful not to remove and quotation marks or alter anything else. Just remove the GTM-xxxxxx and replace it with [TRACKING_ID].

Remember how we updated the Google Analytics module with your GTM account number? That’s where it will show up, and get replaced by the [TRACKING_ID] short code when the DNN platform renders the page.

Save the file. I recommend renaming the original SiteAnalytics.config file to something like SiteAnalytics.config-orig (or whatever so it’s preserved in case you screwed this part up). Upload the new version of the SiteAnalytics.config file, and visit your website in your browser.

Refresh the screen and review the source to make sure that the GTM code is rendering properly just after the <body> tag.

You can also install Google’s Tag Assistant extension in your Chrome browser to make sure that it’s all got a green smiley face, and not a red frowny face.