topic Re: Popup in Google Tag Manager as CTA Hubspot in CMS Development

Popup in Google Tag Manager as CTA Hubspot

HPrzygoda — Tue, 08 Nov 2022 06:54:55 GMT

Hello,

I wanted to use CTA Hubspot in an external tool - Google Tag Manager (GTM) to count views and clicks.

I prepared a CTA as a graphic and then the CTA code was 'rewritten' and added in GTM:
https://prnt.sc/lEv7Pzl0PryV

The popup works - shows on the website:
https://www.sodexo.pl/lojalnosc-i-motywacja-w-biznesie/wsparcie- Sprzedaż-poznaj-4-legalne-sposoby/
all its elements (elements from the CTA code) are loaded:
https://prnt.sc/rtDrWilMRtYH
But unfortunately, nothing counts in the statistics in HS.

Is it possible to solve?
If so, in what way?

Re: Popup in Google Tag Manager as CTA Hubspot

Anton — Tue, 08 Nov 2022 07:57:38 GMT

Hi @HPrzygoda,

unless you really need the CTA (function) I would go with a custom button module.

The most basic custom button module contains:

Link function
text function (name: Button label; not rich-text)

and looks like this:

{% set href = module.link_field.url.href %} {% if module.link_field.url.type is equalto "EMAIL_ADDRESS" %} {% set href = "mailto:" + href %} {% endif %} <a href="{{ href }}" {% if module.link_field.open_in_new_tab %}target="_blank"{% endif %}{% if module.link_field.rel %}rel="{{ module.link_field.rel }}"{% endif %}> {{ module.button_label }} </a>

you can expend it to your needs. Since you want to add GTM parameters/tags to it you can add another text field called "Google tag"(feel free to rename it) like it

if you want to add CSS classes you have several ways. My recommendations are:

choice fields with the css class(es) as values
text fields
booleans (if you want to trigger a single class)

the code for choice and text fields looks like this

for booleans like this

There are almost no limitations how many options you'd like to add.
If you don't have experience in custom module development - take a look how/where to start here in the docs

hope this helps

best,

Anton

Re: Popup in Google Tag Manager as CTA Hubspot

HPrzygoda — Tue, 08 Nov 2022 09:07:36 GMT

Hi Anton,

Thank you very much for your reply, but it is probably not the solution to my problem.

I want to use the hubspot CTA code and add it in Google Tag Manger.
I want to add this via GTM because I do not have access to the code of this page and this is the only option.
This is how (via javascript) adds a popup at the moment.
And in a similar way, I wanted to do it by adding the 'split' CTA code: https://prnt.sc/lEv7Pzl0PryV
Works, but unfortunately statistics are not counted: https://prnt.sc/_9AiN5pA7cA8

Adding the code blocks you indicated is rather impossible in GTM - errors appear and the tag does not fire at all.

I suspect, therefore, that such 'splitting' the CTA code and adding it in parts via js does not work and hubspot does not ensure correctness and support for such an operation.

best,

Hanna

Re: Popup in Google Tag Manager as CTA Hubspot

Anton — Tue, 08 Nov 2022 17:29:05 GMT

Hi @HPrzygoda,

no problem - to get it right: You're placing the id from the img(CTA) to the GTM, right?

If so - is the GTM script loaded in the header or footer? I only can assume that if the GTM is loaded after the CTA script it might not get the code but maybe I'm completly off.

So if your GTM code is - for some reason - in the footer area, try moving it to the header area

best,

Anton

Re: Popup in Google Tag Manager as CTA Hubspot

HPrzygoda — Wed, 09 Nov 2022 07:25:17 GMT

Hello,

Popup / CTA is not added to the header or footer - only in the body.

I'm giving the correct URL because I noticed that I pasted the wrong link at the top:
https://www.sodexo.pl/lojalnosc-i-motywacja-w-biznesie/wsparcie- Sprzedaż-poznaj-4-legalne-sposoby/

I have a CTA code:
<! - HubSpot Call-to-Action Code -> <span class = "hs-cta-wrapper" id = "hs-cta-wrapper-5e8e2239-f821-492b-85c1-5b4643fbff33"> <span class = " hs-cta-node hs-cta-5e8e2239-f821-492b-85c1-5b4643fbff33 "id =" hs-cta-5e8e2239-f821-492b-85c1-5b4643fbff33 "> <! - [if lte IE 8]> <div id = "hs-cta-ie-element"> </div> <! [endif] -> <a href = "https://cta-redirect.hubspot.com/cta/redirect/7768293/5e8e2239-f821 -492b-85c1-5b4643fbff33 "target =" _ blank "rel =" noopener "> <img class =" hs-cta-img "id =" hs-cta-img-5e8e2239-f821-492b-85c1-5b4643fbff33 "style = "border-width: 0px;" height = "1200" width = "1200" src="https://no-cache.hubspot.com/cta/default/7768293/5e8e2239-f821-492b-85c1-5b4643fbff33.png" alt = "Download our guide" /> </a> </span> <script charset = "utf-8" src="https://js.hscta.net/cta/current.js"> </script> <script type = "text / javascript "> hbspt.cta.load (7768293, '5e8e2239-f821-492b-85c1-5b4643fbff33', {" useNewLoader ":" true "," region ":" na1 "}); </script> </span> <! - end HubSpot Call-to-Action Code ->

And this code is 'broken down' into elements and added individually with JS:
https://prnt.sc/lEv7Pzl0PryV

But looking at what you write, I have to add one more thing - I don't know if it is important:
the trigger in GTM that fires this tag (with the coded CTA as above) is to scroll to 60% of the article / this page - then it appears: https://prnt.sc/ZLFx4NaOTQ9J

(There's another one that fires on an exit attempt - but that's not what I'm doing at the moment).

Perhaps the problem is this trigger (scroll 60%)?

Best,

Hanna