ceaksan - E-commerce & User Behavior Analytics

HubSpot Tracking Code (Tracking Code) Operations

Master the setup and optimization of HubSpot tracking code for accurate user behavior analysis and CRM insights.

Ceyhun Enki Aksan
Ceyhun Enki Aksan Entrepreneur, Maker

To understand and optimize web usage, it is often necessary to use a variety of tools throughout the process of measuring, collecting, analyzing, and reporting web data.

In general, preferences may differ when distinguishing between websites and web applications. However, certain services can create specialized systems operating within their own infrastructure. Customer Relationship Management (CRM) as discussed in the following section of the article, HubSpot is one such example.

In this article and in the subsequent articles I will publish, I will discuss the analytics process within the HubSpot context.

HubSpot and Web Analytics

HubSpot features a comprehensive and well-functioning tracking system within its own infrastructure. I previously mentioned various packages (Hub) under the HubSpot heading. The relevant tracking code successfully integrates with all these systems. It is important to remember that this code sends a unique ID value (Hub ID). Additionally, the Landing Page, Blog, and CMS structures are naturally considered part of this system1. What if we are using an external system (externally hosted pages)?

As previously mentioned in the related article, HubSpot offers numerous integration options. This opportunity also provides various API and plugin options.

First, a few reminders are in order.

  • Each tracking code is associated with a single HubSpot account (Hub ID).
  • If multiple HubSpot tracking codes are loaded on a single page, only the first loaded tracking code will trigger; subsequent HubSpot tracking codes will not load. Therefore, you should use only one tracking code2.
  • A separate setup process should be followed for SPAs3.
  • If your website is published under a different domain or subdomain, you must also add your domains (in addition to the company domain) and/or subdomains to the HubSpot settings4. The steps to follow are: Settings > Tracking & Analytics > Advanced Tracking
  • The tracking code does not work on AMP websites.
  • If you are using a tool that supports plugins, you must perform the tracking process through official extensions5.

Embed code is as follows:

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/<hub-id>.js"></script>
<!-- End of HubSpot Embed Code -->

Under the Advanced Tracking option, you can manage settings related to the tracking code, such as domain, cookie, cross-domain, exclude traffic, and more.

Placing the above JavaScript code before the </body> tag is sufficient. Then, you can verify that the relevant code has made the request by checking the Network tab in your modern web browser.

For WordPress websites, if you are unable to use the HubSpot All-in-One Marketing - Forms, Pop-ups, Live Chat WordPress plugin, you can add the tracking code to the footer.php file (assuming the </body> tag is located here). Of course, you must have a Business plan or higher plan to perform this action5.

For Shopify installations, you can also implement the code through the theme.liquid file.

Certainly, you can also carry out similar operations for many other CMS systems, using the corresponding files within the same rule framework2.

Code Customization

You may also wish to track page-level interactions such as Ajax, modals, popups, sliders, etc. In this case, as I mentioned in the dataLayer entries, we will need to use the push() method similarly on the HubSpot side.

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/home']);

When this code snippet is used before the embed snippet, the page tracking code will be sent to the initial (default) page path of /home. Subsequent changes can then be passed as follows after the embed code.

var _hsq = window._hsq = window._hsq || [];
_hsq.push(['setPath', '/about-us']);
_hsq.push(['trackPageView']);

The trackPageView is sent together with the embed code, and subsequent changes must be repeated to be passed through6.

For state changes, we implement them as follows3.

var stateObj = { foo: 'updated' };
history.pushState(stateObj, "updated page", "updated.html");
// If _hsp exists // otherwise we need to create it using var _hsq = window._hsq = window._hsq || []; 
_hsq.push(['trackPageView']);

To identify a user, we use the identify parameter. Then, we must specify which information we will use to associate with the user. For example, let’s see how we can do this for email and favorite color3.

_hsq.push(["identify", {
    email: 'name@domain.com',
    favorite_color: 'orange'
}]);

For special events (such as button clicks, element views, adding items to cart, etc.), we use the trackEvent parameter3.

_hsq.push(["trackEvent", {
  id: "Clicked Buy Now button",
  value: 20.5
}]);

Yes, that’s all the essential information we need to know about the tracking code. In the next section, we’ll look at how to monitor various activities, starting with form submissions, using the GTM tool.

Footnotes

  1. Track visitors in HubSpot. HubSpot Knowledge Base ↩
  2. Install the HubSpot tracking code. HubSpot Knowledge Base ↩ ↩2
  3. Tracking in single-page applications. HubSpot Developers ↩ ↩2 ↩3 ↩4
  4. Set up site tracking in HubSpot. HubSpot Knowledge Base ↩
  5. Install and use the HubSpot WordPress plugin. HubSpot Knowledge Base ↩ ↩2
  6. Track Page View. HubSpot Developers ↩
zoho analysis javascript crm