How to Setup Tracking Code

Overview

Setting up tracking code allows for in-depth insight and analysis of visitor activity. There are many different analytics providers and tracking solutions on the web. This article will help explain how to add some of the more commonly used tracking solutions to your responsive site. We will specifically be discussing Google Tag Manager, Google Analytics, Google Ad Words tracking, and Facebook tracking pixels. This is a very advanced setup, so you may want to seek help from developers to implement the code for you.

Important Information

For all of the following guides, you will need to already have the code snippets from these various services. These guides will explain how to implement the code, but will not explain the purpose, best practices, or usability of the code. It is recommended that you familiarize yourself with these services before implementing them by reviewing the extensive online discussions about these tracking solutions, which you can find on their websites or through web searches.

Google Tag Manager

Adding Google Tag Manager

The Tag Manager code you receive from Google should look something like the below snippets. There are two parts to this code, a 'script' and a 'noscript' section. This difference will become important later in this guide. Note: The below code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google.

Script Section

<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

1. You will first need to access the global header section. Click "Settings" in the left menu, and then select the "Header HTML" sub-section.

2. Place the 'script' part of the Tag Manager code in the "Header HTML" section and click Save.

Note: All of the above code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google Tag Manager.

3. Navigate to "Developer Mode" by clicking on the </> symbol in the top bar.

4. Expand the "Site HTML/CSS" section, and click on the "body-end.html" section. Place the 'noscript' part of the code in this section. Then, click Save.

Notes and Considerations for Google Tag Manager

• Google recommends to place the "noscript" code in the beginning of the "body" section. This is a workaround Google suggests to get around limitations of very old web browsers which do not load header code.

• The body-end.html section of developer mode works for adding the "noscript" code.

• For information about setting up Tag Manager within your Google account, please seek help from Google.

Google AdWords Tracking

Adding Google AdWords Tracking

The Google AdWords Tracking code you receive from Google should look similar to the below image.

Note: All of the below code is just an example - do not copy this directly into your site. Please be sure to obtain the correct tracking code from Google AdWords.

<!-- Google Code for Add to Cart Conversion Page
In your html page, add the snippet and call goog_report_conversion
when someone clicks on the chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 12345678;
w.google_conversion_label = "abcDeFGHIJklmN0PQ";
w.google_conversion_value = 13.00;
w.google_conversion_currency = "USD";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
    </script>

1. You will first need to access the global header section. Click "Settings" in the left menu, and then select the "Header HTML" sub-section.

2. Place the code provided by Google into this section, then click Save.

Once you have added the tracking code into the header section, you need to add code to the widget that you want to be considered the tracking event.

Please note that AdWords does not differentiate between click and load tracking.

3. Next, you need to add Google's tracking on individual links. For example, if you wanted to add tracking to a button click, then you would go to the button within the editor and right-click to bring up the below menu, and then select HTML/CSS.

4. Once you are looking at the HTML for the button widget find the <a> tag and add the following snipet to this section.

onclick=";return try{goog_report_conversion('http://example.com/your-link')}catch(e){}"

Note: The above code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google.

Notes and Considerations for Google AdWords

Google recommends to use:

onclick="goog_report_conversion ('http://example.com/your-link')"

The one we use also enables us to track into stats.

Google Analytics

Adding Google Analytics

Adding Google Analytics to individual widgets provides another way for you to track statistics on certain functions.

1. Make sure that Google Analytics is already set up on your website. To do this go to site settings and then click on the "Google Analytics" section. Paste your Google Analytics code in the field provided.

2. After the code is added, you can set individual widgets to be tracked by modifying the HTML of the widget. To do this, right-click on the widget you want to be tracked and click 'Edit HTML/CSS'.

3. Enter your Google Analytics code. 

Note: The code you copy and paste from Google will not work. You need to modify the Google code so that the tracking gets reported to the right analytics. If you do not specify the Google Analytics account to report to by adding the c., then the event will not be tracked at all.

Before modification:

onClick="_gaq.push(['_trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"

onClick="_gaq.push(['c._trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"

4. Click Update to save your changes.

Notes and Considerations for Google Analytics 

Once again, it is very important that you add the c. to the code. If you do not specify the Google Analytics account, the event will not be tracked.

Facebook Tracking Pixels

You can add Facebook Tracking Pixels to your responsive website to track events. Create your Facebook Tracking Pixel code in the Facebook Pixel tab.

Adding Facebook Tracking Pixel

Script Section

<!-- Facebook Pixel Code --> <script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>

<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Access the HTML Header section by clicking "Settings" in the left menu, and then select the "Header HTML" sub-section.

Place the <script> part of the code provided by Facebook into the header HTML section, then click Save.

Note: All of the above code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Facebook Pixel Code.

3. Navigate to "Developer Mode" by clicking on the </> symbol in the top bar.

4. Expand the "Site HTML/CSS" section, and click on the "body-end.html" section. Place the 'noscript' part of the code in this section. Then, click Save.

Notes and Considerations for Facebook Tracking Pixels

• Like with Google Tag Manager, Facebook recommends to place the "noscript" code in the beginning of the "body" section. This is a workaround they suggests to get around limitations of very old web browsers which do not load header code.

• The body-end.html section of developer mode works for adding the "noscript" code.

• For more information about Facebook Pixel Implementation, check out this guide.