Installation of the HubSpot tracking code and its configuration were discussed in the article titled HubSpot Tracking Code. Now, I’d like to talk about how we can add Google Analytics and Google Tag Manager code to the pages we’ve created on HubSpot.
HubSpot GA / GTM Setup
In my previous article, I discussed in detail the tracking (tracking) code provided by HubSpot. Alongside this tracking code, which is an essential component of the CRM system, HubSpot also provides us with the ability to easily associate Google Analytics, Google Tag Manager, and AdRoll tags with our pages1.
To perform the setup, follow the steps under Settings > Tools > Website to reach the Pages option.
By clicking on the Integrations tab in this section, we can access the relevant fields for the tags. Under the Tracking integrations section, HubSpot provides us with a simple way to activate the following code setups:
- Google Analytics
- Google Tag Manager
- AdRoll
Before diving into the code details, let’s briefly discuss the domain. Unless otherwise specified, under the Choose a domain to edit its settings header, the active option will always be Default settings for all domains. This option ensures that the operation applies to all defined Pages (website, landing page, blog). By clicking on the relevant selection, you can view the other domain settings defined, and you can carry out the relevant actions specifically through the selected domain configuration2.
In this example, I will proceed using the all domains option.
Google Analytics
When you enable the Integrate with Google Analytics option, Google Analytics setup code containing the analytics.js library will be inserted into the head tag of your web page. As you know, these analytics.js functions start with ga().
<!-- Added by GoogleAnalytics integration -->
<script>
var _hsp = window._hsp = window._hsp || [];
_hsp.push(['addPrivacyConsentListener', function(consent) {
if (consent.allowed || (consent.categories && consent.categories.analytics)) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create','UA-XXXXXX-Y','auto');
ga('send','pageview');
}}]);
</script>
<!-- /Added by GoogleAnalytics integration -->Thus, you should proceed with the next steps based on this information. For further details regarding the subsequent actions, please refer to the Templates section below.
Google Tag Manager
When you select Integrate with Google Tag Manager, the standard setup code will be added to the head tag of your web page, and the iframe code will be inserted immediately after the body tag.
<!-- Added by GoogleTagManager integration -->
<script>
var _hsp = window._hsp = window._hsp || [];
_hsp.push(['addPrivacyConsentListener', function(consent) {
if (consent.allowed || (consent.categories && consent.categories.analytics)) {
(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-XXXXXXXX');
}}]);
</script>
<!-- /Added by GoogleTagManager integration -->Adroll
The Integrate with Adroll option ensures that the Adroll tracking code is inserted immediately after the opening body tag. The GTM iframe code follows this tracking code.
<!-- Added by AdRoll integration -->
<script type="text/javascript">
adroll_adv_id = "XXXXXXXXXXXX";
adroll_pix_id = "YYYYYYYYYYYY";
var _hsp = window._hsp = window._hsp || [];
(function () {
var _onload = function(){
if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
_hsp.push(['addPrivacyConsentListener', function(consent) { if (consent.allowed || (consent.categories && consent.categories.advertisement)) {
var scr = document.createElement("script");
var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
scr.setAttribute('async', 'true');
scr.type = "text/javascript";
scr.src = host + "/j/roundtrip.js";
((document.getElementsByTagName('head') || [null])[0] ||
document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
}}]);
};
if (window.addEventListener) {window.addEventListener('load', _onload, false);}
else {window.attachEvent('onload', _onload)}
}());
</script>
<!-- /Added by AdRoll integration -->As observed in Google Analytics, Google Tag Manager, and Adroll code, our global object is _hsp.
When these codes are activated, Google Analytics is first added to the page. Unless otherwise specified, there’s generally no need to include the Google Tag Manager code alongside Google Analytics. However, if you’ve also activated the GTM container, the GTM code will follow immediately after the Google Analytics code. Both codes appear just before the </head> tag. The Adroll snippet comes immediately after the <body> tag, and the GTM iframe code appears after the Adroll snippet3.
Templates
Another option under the Pages section is Templates. After clicking on this option, you will see two sections under the HTML heading: Site header HTML and Site footer HTML. These fields allow you to add external code to your web pages. These options are also available for the Content > Blog section. These additions will be processed according to the selected field definition.
Site header HTML
The code added to this field will be placed at the end. In other words, if we refer to the order of GA and GTM, the code added here will appear after all other codes have been added. Therefore, it will appear just before the </head> tag.
Site footer HTML
The code added to this field will be inserted just before the </body> tag. Thus, it will appear after all DOM elements.
You can use the selections under Templates for defining dataLayer and ga event triggers. If you’re activating existing options, do not forget to use the _hsp object.