DataPowered

Note: this guide is meant to help you integrate Amplitude with your Hubspot-built website. If you’re looking for other Amplitude+Hubspot integrations, check out Amplitude’s documentation. The guide was developed in partnership with Pablo Abad while implementing Amplitude on Expatrio’s Hubspot CMS site.

I’m detailing below the quickest way to implement Amplitude if you have a website that’s built with Hubspot, either fully or partially. However, this will work with any website, as long as you have access to editing the website code (e.g. the website header or at least part of its JavaScript code).

Hubspot CMS Integration Steps

1. Create an Amplitude account. A free account is sufficient unless you have more than 50k monthly users.
2. Go to your Hubspot account and access Content > Website Pages. Click on the page you’d like to track first. I recommend choosing a test page first.
3. Go to Settings > Advanced > Header and paste the snippet below (source; adjust it if you have an EU account) after replacing the API key with yours:

<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
 
<script>
  window.amplitude.init('YOUR_AMPLITUDE_API_KEY', {
    fetchRemoteConfig: true,
    autocapture: true
  });
</script>

That’s it! Once your header settings are saved, repeat for any other page you’d like to track. If your template uses a global header, editing it at step 3 will update it across all pages using that template.

Important Notes

• Amplitude’s Autocapture will, as the name implies, track data automatically. By default, that includes various types of user actions and properties which you will see in Data > Events or Properties. Depending on your usual volume of visitors, this may result in a large amount of data that may go above your Amplitude account limits. It’s highly recommended to monitor your event/user volume in the first hours and days after setup and block any unimportant data to stay below the threshold.
• Leverage the Visual Labeler and Custom Events to make your events easier to use. Some auto-captured events may be clear enough. Others, such as Element Clicked, are very generic and you’ll end up spending unnecessary extra time setting up your charts.
• If you’re using Hubspot blog partial integration and the Hubspot site is on a separate domain, you may need to implement cross-domain tracking. You can validate this with your test user by navigating through the site and checking whether your actions are reflected accurately in Amplitude.
• If you’re not seeing any data coming to Amplitude, check that the snippet was correctly saved in the header and follow this guide for step-by-step troubleshooting.

Tracking Optional Custom Events

You might be one step ahead and wonder how to track more custom user actions on your site. If there are elements of your site that cannot be auto-captured (like some forms that may sit behind iframes), you can complement the above with additional custom tracking.

Example for tracking a specific link/button click as a custom event

1. In your Hubspot account, go to Content > Design Manager.
2. Click on Add New File > Module > Next > Check the location of your link/button > Add a File Name > Create.
3. In module.js paste the following code and replace “myElement” with your link or button id:
   • document.addEventListener('DOMContentLoaded', function() { const link = document.getElementById('myElement'); if (link) { link.addEventListener('click', function(event) { amplitude.track('Button Clicked:', link.innerText); console.log('Anchor clicked:', link.innerText); }); } });
4. Click Publish Changes, then go back to Content > Website Pages and click on the page where your link or button is located. Ideally, find the test version of your page and test it there first.
5. Click Add (+) > Modules > Search for the module you just created > Drag it anywhere on the site. Don’t worry, it won’t be visible.

Example for tracking forms inside iframes

1. In your Hubspot account, go to Content > Design Manager.
2. In the “Search assets” box, find the form you’d like to track and click on it.
3. The form should have some JavaScript code in the module.js section.
4. Find the part where the form checks for a 200 response and add the line amplitude.track('Form Submitted'); underneath:
5. 

If you’re stuck or would like to discuss this topic further, don’t hesitate to get in touch with me.