Hide Hubspot chat in some pages using Google Tag Manager

Question

I have integrated the HubSpot chat function in our website using GTM. It works all fine.

The issue here is that I want the chat to be hidden on our checkout page(due to some reason).

Here's how I have it configured now:

A custom pageview event occurs on all pages except the checkout page. This event is used to create a trigger CustEv-pageview. This trigger is used to activate the Hubspot chat tag.

Now, since the trigger doesn't fire on checkout page, the tag isn't activated and the Hubspot code should not be included in the section but it is.

And the chat widget is visible.

However, if I refresh the page the Hubspot code and the chat widget both disappear.

We use Nuxt.JS for our front-end.

Here are some screenshots.

Tag configuration.

When we move from a product page to the checkout page.

After refreshing the checkout page.

Answer 1

To answer perfectly, I'd need to know: What are the details of the custom event you have triggering this and the custom event you have as an exception? Are these custom events going to be affected by any AJAX/Lazy Loading you're implementing?

However, you can simplify things. Instead of your custom events, trigger the Custom HTML tag using the DOM Ready trigger built into Tag Manager, and then add an exception for the page you don't want it to appear on. Thusly.

If there are any other pages you want to exclude, you can simply add them as additional exclusions in the same way.