A step-by-step guide on how to integrate Hubspot cookie banner (cmp) with Google Tag Manager.

Integrating Hubspot cookie banner with Google Tag Manager (consent mode v2)

This blog post explains how to integrate Hubspot's cookie solution with Google Tag Manager

This comprehensive guide will walk you through setting up the HubSpot Cookie Banner (CMP), leveraging Google Consent Mode for precise tracking control, and seamlessly connecting HubSpot with Google Tag Manager (GTM).

HubSpot CMP simplifies consent management by providing intuitive cookie banners, saving user preferences, and offering geolocation-based options. However, it's essential to note a critical limitation: HubSpot's CMP doesn't inherently stop marketing scripts (other than it's own) when a user opts out of tracking. This gap can lead to non-compliance with regulations.

To address this issue, we'll explore integrating Google Consent Mode with HubSpot CMP, ensuring that user preferences are accurately reflected in script execution.

The initial steps for setting up HubSpot's consent management are straightforward:

Access your HubSpot account and navigate to "Preferences" (cog icon).

In the sidebar, select "Privacy & Consent."

Choose your domain and create a consent banner, specifying its name, display criteria, and applicable countries.

Enable "Display cookies by category" to activate additional settings.

Customize the banner text and publish it.

For further customization options, refer to HubSpot's guide on customizing cookie tracking settings.

However, note that while HubSpot CMP collects user preferences, it doesn't automatically halt script execution. This is where Google Consent Mode comes into play.

Using Google Consent Mode for Tracking Control

Google Tag Manager's (GTM) Consent Mode feature is instrumental in aligning script execution with user preferences. Here's how to activate it:

In Google Tag Manager, access "Admin" and select "Container Settings" for your chosen container.

Enable "Consent Overview" and save the changes.

This action unlocks the "Consent Settings" section in tag configurations, allowing tags to respect user consent preferences.

However, Google Consent Mode requires existing consent when GTM initializes, making it unsuitable for first-time visitors. To bridge this gap, we need:

HubSpot CMP to facilitate preference changes.

Integration between HubSpot CMP and Google Consent Mode.

In GTM, create a new tag, find "Hubspot CMP" in the gallery, and choose it as the tag type. If you can't find the template, here is the direct link to it in the template gallery.

Set the tag to trigger on "Consent Initialization."

Ensure HubSpot fires before the CMP tag using GTM's "Tag Sequencing" feature.

Customize tracking settings by region using the "Default consent settings" section in the tag settings. 

The most common way is to create one for the countries covered by the GDPR policy and one for the rest of the world. To do this, do the following:

Add a setting without specifying the country code - this will make it a default state for all of the countries.

Add a second one for the countries covered by GDPR. Here is a list of country codes for that: AT, BE, BG, HR, CY, CZ, DK, EE, FI, FR, DE, GR, HU, IS, IE, IT, LV, LI, LT, LU, MT, NL, NO, PL, PT, RO, SK, SI, ES, SE, UK

Step 3: Triggering Scripts on Consent Change

Create a GTM trigger for the `cookie_consent_update` event, indicating consent changes.

All of your tags except Hubspot and the Hubspot CMP integration should use this trigger. Here is how this works:

1. The template waits for the Hubspot cookie banner to change the consent state.

2. Once it gets changed, the template updates the consent API AND gives you a custom event (`cookie_consent_update`) for firing all the other tags.

3. When this happens, the default consent state is already updated with the values from the banner, so the tags can now fire according to their consent settings in the tag manager. You do not need to change it for the tags with built-in consent (unless you want to).

Use tag assistant to confirm the scripts fire correctly. You should see the `cookie_consent_change` event in the left sidebar and the consent summary should have the updated values you've set through the banner.

You might get a message in your tag assistant that looks like this:

In this case, Hubspot is used as a Consent Management Platform, so it needs to load before consent is set. This would be an issue with some other tag, but since it's a CMP, it will manage its own cookies and tracking when consent is changed. Once that happens, Google will manage the rest of the tags in the Tag Manager. 

The reason why you see that warning is because tag manager is not smart enough to know that this is happening. Its kind of annoying that they dont have a workaround for it but it is what it is.

If you are having difficulties running the template, check the following: 

Ensure the HubSpot banner sets a cookie called `__hs_cookie_cat_pref`

Check that the `cookie_consent_change` event is firing.

Ensure that the Hubspot CMP integration fires on Consent initialization and that Hubspot fires before Hubspot CMP.

Check that you don't have any console errors that might prevent the code from working.

Integrating HubSpot CMP with Google Consent Mode and GTM is a strategic approach to maximizing compliance and user privacy. If you have any questions regarding this guide or the template, feel free to reach out!

Below are the projects that I worked on as a freelancer as well as part of the companies I worked at.

Projects I have worked on

Below are the projects I did as a freelancer and also while working for companies.

Projects I've worked on

Rewind Backups _ Top-Rated Backup Service for SaaS Apps (1).gif

I was introduced to the company through a shared connection. I had a blast working with Rewind as a freelancer and later joined as a full-time employee. During my time at Rewind, I’ve worked on many different projects, many of which included their marketing websites. 

Rewind helps businesses protect their SaaS and cloud data. Their backups solution has integrations with several apps like Shopify, BigCommerce, QuickBooks Online, Github, and more. Just like any other SaaS company, their online presence and brand are very important aspects of their business.

Rewind’s website was originally made using a visual builder (Divi). Divi worked well while the team (and the site) was small and didn’t have a developer, but became a burden once the site became too big to manage every page one by one. The site was slow (10s fully loaded time) and relied heavily on many additional plugins to handle things like sliders, forms, and popups.

All 700 pages of the website were made using Divi, which meant that you couldn’t disable it until every single one of them is not using the builder. The challenge was to convert pages into parts instead of doing everything at once. Both variants also had to look identical to keep a good user experience. The project had to be broken down into phases:

Most important pages. A custom child theme was created to be able to switch off Divi for the individual pages. When you choose to use a custom theme instead of a builder, all scripts/styles of the theme & any additional extensions were removed from the page. On the surface, you were getting a custom theme, but only for that specific page. This was created for the most important pages of the site (data from Google Analytics was used to decide this).

Other important pages & archives. In this phase, templates for archives and single templates were made. A lot of elements were enhanced during this phase.

The leftovers & dynamic components. Rewind’s website had a lot of pages that didn’t fit into a specific category but still needed to be reworked. These pages were addressed during phase 3. Even though Divi was causing issues to the site, it also had some benefits, like its flexibility. Rewind’s marketing team was able to create unique layouts quickly without needing a developer. This flexibility was partially kept by introducing a dynamic component system to WordPress’ backend. This system was made based on Flexible Content functionality from Advanced Custom Fields Pro. This functionality allowed to reuse any section that was ever created on the site, making the editing process fast and keeping it flexible.

Standalone theme. In this phase, the site was completely reworked and converted to a standalone custom WordPress theme on Bootstrap 5. The theme uses SASS and ES6 Javascript compiled via Babel. The new theme is managed with GitHub to make sure Rewind has full control over what goes live.

Completely resolved website downtime caused by plugin conflicts

Rewind's website has several integrations to help meet the needs of its internal teams.

The site pulls all of the partners using the PartnerStack API and caches them via WordPress transients. This data is used throughout the site to personalize partner-related landing pages with partner-specific data. The site is also able to generate partner-specific landing pages without creating entries in the database using custom rewrite rules.

There is a form integration that styles HubSpot forms and adds new variants to them: a pop-up form and a multi-step form. Certain user actions are captured with HubSpot’s custom behavioral events.

Started as a Divi extension, this custom WordPress plugin is meant to show pricing for different products Rewind has to offer. Everything is controlled via WP admin: you can edit text, hide/show certain elements, and choose different price formulas (per-item calculations, tiered pricing, plan pricing, or a mix of 3). From a technical standpoint, the backend functionality is organized into PHP classes to make it easier to extend and manage. The front end uses vanilla ES6 Javascript and SCSS. The plugin is made to be extended outside of its code: there are several WordPress hooks baked in to let you add new features without changing the source code. There is also a custom JavaScript event that lets you make changes to the frontend based on the interaction with the price slider. This is used to personalize the page (like updating CTAs based on the slider value) and also tracking (like sending a GA event whenever a certain plan is shown to see demand).

One of the most popular and converting pages on the website 

As the site evolved, I had a chance to create a suite of custom Gutenberg blocks using React. The blocks are mirroring the component library created by the design team. This addition to the website allowed Rewind to create landing pages 3 times faster and enable more non-technical people to create them.

Every feature listed above is thoroughly explained in over 20 pages of documentation. There are docs explaining how to use the theme, where to edit the pages, and even what components are available. There is also a document for the third-party agencies that go over our setup and how to properly work with the site.

This project included setting up Google Analytics events for the most important actions on the website, such as:

Website migrations, custom plugins and themes, various marketing integrations, tracking, and more.

PHP, SCSS, JS (ES6), WordPress, Babel, MySQL, React, Next.js, Bootstrap 5

A complete overhaul

Site overhaul, React microsites and more for Rewind

SEO Variants _ Grow Your Sales With Flexible Product Variants.gif

SEOVariants, a Shopify app for generating SEO-friendly variants, required a high-performance, SEO-optimized website. The site was built using Astro.js, a framework that enhances efficiency by generating static files from a headless CMS. This setup allows quick content updates and easy editing through reusable sections. Custom transitions ensure smooth loading experiences.

The site employs TinaCMS, which stores content in markdown files, allowing for excellent git-based version control. Despite adding performance-impacting marketing scripts, optimization techniques were implemented to maintain solid Google PageSpeed scores.

Additionally, the website features a custom help portal integrated into the CMS, enhancing user support and accessibility.

The website is built on Astro.js, a web framework designed for ultra-fast and efficient websites.

Unlike traditional CMS setups, where content is fetched live from the database with each user request, Astro.js improves efficiency by converting the site into static files with content directly from the headless CMS. This means pages are only generated once, and incremental rebuilds occur whenever content is updated to add what's missing.

Pages in the CMS are constructed from reusable sections, making the editing process quick and easy, allowing SEOVariants to create content rapidly.

The site uses TinaCMS for the content management system, which saves all of your data in markdown files. Because of this, you are able to store all of it in git and have an amazing version control. This approach is fairly uncommon, but there are definitely some big companies that use this, like the Smashing magazine.

The project required the addition of several marketing scripts, which initially caused a significant drop in performance. To fix this, I applied some optimization techniques to ensure the scripts ran smoothly without slowing down the load time.

The website features a built-in help portal that is fully integrated into the CMS, ensuring seamless access to support resources. The changelog includes an API endpoint that allows data to be passed both to the app and the website, ensuring synchronized updates across all platforms.

A scalable headless website for a Shopify startup

Admin preview

Astro.js, TinaCMS, Node.js, TailwindCSS, HubSpot

Headless and serverless

Powering growth with a scalable headless website for a Shopify app

seoplus-new.gif

As a web developer at seoplus+, I have worked on more than 200 websites. While the majority of the project was on WordPress, seoplus also has clients on platforms like Shopify, CraftCMS, Drupal, Grav, and even custom CMS solutions. In order to stay respectful to seoplus+ and not create any conflicts of interest, I won’t be directly disclosing the names of the clients.

seoplus+ is an award-winning digital marketing agency with a strong focus on SEO (as you can probably imagine from their name). They hold a special place in my heart because I have never seen so much bonding happening in the workplace. Whether you are a client or their employee, you will be surrounded by friends.

During my time in seoplus I had an opportunity to work on several projects for a Canadian phone repair company. I’ve worked on maintaining their WordPress website, adding new features, and working on the performance of the site. Below are a few projects that are worth mentioning.

The company needed a multi-step tool that gives users an instant quote on the device they want to sell.

The user selects their device model, brand, and specs. The user then answers a few questions that help determine the condition level. After that, the tool connects to a third-party API of the phone prices and returns the correct one based on the API. From a technical standpoint, the tool was mainly written in PHP - it is a custom page template that decides which content to show based on the URL query parameters. There were 2 versions created for the A/B test - one that gives the quote instantly and one that sends it over email (a Contact Form 7 plugin extension was created to pass in custom shortcodes in the email body).

The company needed a tool that will allow its users to book an on-site repair session with one of their technicians. Here is how it works:

The user enters their address or a postal code

The system assigns a technician that covers that area

A booking window for that technician is shown to choose the date and time.

Most of the functionality was handled in JavaScript using the jQuery library. The address field is using the Google Maps autocompletion API. The booking component has custom integration with a third-party booking system.

Below are a few projects worth noting that were made for an Ottawa-based rental company.

Automating the content throughout the site

The company has a list of rental properties that are shown on its WordPress website. The information on these listings changes every month, so it needs to be updated throughout the site. Originally, the website and the list of properties were a lot smaller, so their theme was not automating a lot of the things that should be automated: pricing was often a text field and had multiple different formats, which meant you have to update everything manually every time something changes.

To solve this, I proposed a project that will allow the pricing for all of the properties to be controlled in one place. An options page was created that allowed you to create a relationship between a property page and a price. To allow usage of the price in the WYSIWYG editors, a few custom shortcodes were made, one of them was a shortcode that shows the “Starting from” price based on the cheapest option of the selected property type (1-2-3 bedroom apartments, townhomes, houses).

This project drastically reduced the number of hours needed to update the website.

The company needed a new listing page that would show all of its available properties. The page had to have a filtering system that lets you choose the price ranges, amenities, property types, and features. This functionality was mainly created with jQuery and the properties were pulled from the WP Rest API.

While working at seoplus+ I’ve made a lot of custom themes for WordPress. To avoid any conflict of interests, I will not share the company names, but here are some of the project types that I’ve done:

Traveling museum exhibit website: a custom theme with an integration with Google Maps to show their current exhibits throughout the world. Built with Bootstrap 4 and jQuery

Testing facility for self-driving cars: a custom WP theme built with the Understrap framework

A new website for a pest control company made with the Understrap framework

Working on a client site’s performance was a common task at seoplus+ since a lot of clients already have a site and need help promoting it. Because of this, I’ve done a lot of work optimizing websites. Some of the common improvements include:

reducing the number of resources loaded on the page

lazy loading elements or breaking down into subpages

Another common task in seoplus. I’ve done many website migrations during my time there, some of which included writing custom scripts to automatically migrate/create post types based on the data available.

Seoplus specializes in SEO, so every website we worked on was made with best SEO practices in mind. There was also a lot of work-related to SEO on existing sites. Here are some of the tasks I’ve done:

Find & replace text actions via the database

Custom WordPress themes, website improvements, working with third-party APIs, site optimizations, technical seo work, website migrations, maintenance, and more.

PHP, CSS, JavaScript, WordPress, Shopify, GravCMS, Bootstrap 3,4, jQuery

Custom WordPress themes

Projects done while working for seoplus+

allrotors-preview.gif

Allrotors needed a new website for their custom e-commerce PHP CMS. Project was done for Superior Web Systems.

Site overhaul, React microsites and more for Rewind

Powering growth with a scalable headless website for a Shopify app

Projects done while working for seoplus+

New website for a car parts store on a custom PHP CMS