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:
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
{% 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 %} id="{{ module.google_tag }}">
{{ module.button_label }}
</a>
if you want to add CSS classes you have several ways. My recommendations are:
the code for choice and text fields 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 %} id="{{ module.google_tag }}" class="{{ module.css_class }}">
{{ module.button_label }}
</a>
for booleans 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 %} id="{{ module.google_tag }}" class="btn {% if module.secondary_button %}secondary{% endif %}">
{{ module.button_label }}
</a>
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
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: Screenshot by Lightshot
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.
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
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:
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: Screenshot by Lightshot
(There’s another one that fires on an exit attempt - but that’s not what I’m doing at the moment).
