Tracking Embed CTAs in GTM

Marketing & Content Hub Tips, Tricks & Best Practices
1

Hi,

We just switched our CTAs to the new Embed CTAs, not to be confused with the animated CTAs, and now I’m having a hard time tracking the embed CTAs in GTM.

My first issue is that the preview GTM shows no click activity. I’m also encountering an issue placing the embed code as a Custom HTML event.

I’ve read a bunch of the posts on here, and so far I have not found the answer.

Could someone please assist? Thank you!

Sarah

2

Hi @SBrewer9 and all my Best Wishes for 2024!!!
I love to read your post, thanks for asking the Community!
I found this post from @TomM2 on this thread “CTA (Beta) GTM Tracking”, not sure if you have seen it already.
If there is an Iframe, then it seems that this is the reason Google Analytics is not picking up the data.
Tom gives this workaround that might work for you:
"A workaround might be to us custom URLs with UTM parameters as the submission/redirect urls on these ctas https://support.google.com/analytics/answer/1033863?hl=en#zippy=%2Cin-this-article "
I’d be happy to put you in touch with some of our Community Members that also try to track CTAs with GA: Hi @Ryan_G_Thompson, @CCorreia5, @raejada, @hammermarketing, @mike-ward do you have tips to help @SBrewer9, please?
I also wanted to invite a couple of subject matter experts to this conversation: Hi @Crystal_Hopper, @jonchim and @HFisher7 do you have suggestions to help @SBrewer9, please?
If anybody else has anything to add and/or share, please feel free to join in the conversation :slightly_smiling_face:
Thank you very much :glowing_star: and have a lovely day!
Best,
Bérangère

3

Thanks @BérangèreL That post would definitely be an issue. However since then there has been an update to the CTAs.

@SBrewer9 if you create a “custom HTML CTA” you can actually add in a CTA outside of an iframe, which would mean you can track it as an event in GTM since the HTML exists on your page. I would start with that, create a custom HTML CTA then use the classes from that to track the click event in GTM!

At the moment these can only be buttons however, you can create a pop-up with custom HTML ctas.

4

Sending Custom Events to HubSpot with GTM (Detailed Version)

This guide details how to send a custom event (“pe2144704_cta_click_v2”) to HubSpot using Google Tag Manager (GTM) with dynamic values.

Here’s what we’ll cover:

  1. Setting Up the Custom Event in HubSpot (Optional)
  2. Creating a GTM Variable for Dynamic Values
  3. Building the Custom HTML Tag with Dynamic Properties
  4. Setting Up the Trigger to Fire the Event

1. Setting Up the Custom Event in HubSpot (Optional):

  • If you haven’t already, create the custom event “pe2144704_cta_click_v2” within HubSpot. You can typically find this option in your HubSpot settings under “Marketing” or “Analytics.”
  • Define the event properties like cta_name and latency during creation.

2. Creating a GTM Variable for Dynamic Values:

  • In GTM, navigate to the “Variables” section.
  • Click “New” and choose “Built-In Variable.”
  • Select “Click Element” from the available options.
  • Name your variable something descriptive, like “ClickedElementDetails.”
  • Save the variable.

This variable will capture details about the element the user clicked, allowing you to access dynamic values like the element’s text content or class name.

3. Building the Custom HTML Tag with Dynamic Properties:

  • In GTM, navigate to the “Tags” section.
  • Click “New” and choose “Custom HTML.”
  • Paste the following code into the HTML field:

JavaScript

_hsq.push([ 'trackCustomBehavioralEvent', {
 name: "pe2144704_cta_click_v2",
 properties: {
 cta_name: {{ClickElementDetails.textContent}}, // Use ClickedElementDetails variable for dynamic text content
 latency: {{ClickElementDetails.className.indexOf('primary') !== -1 ? 'high' : 'low'}}, // Example using class name for dynamic latency (replace with your logic)
 }
}]);

Use code with caution.

content_copy

Explanation:

  • We removed the if condition entirely.
  • We use the {{ClickElementDetails.textContent}} variable to dynamically populate the cta_name property with the text content of the clicked element.
  • The latency property uses a conditional statement to assign “high” if the clicked element’s class name contains “primary” (replace with your own logic for determining latency).

4. Setting Up the Trigger to Fire the Event:

  • In the same Custom HTML tag, navigate to the “Triggering” section.
  • Click “New” and choose the trigger type based on your desired behavior. Common options include:
    • Click - All Elements: Fires when any element is clicked. (Not recommended for specific CTA clicks)
    • Click - Link Clicks: Fires when a link is clicked.
    • Click - Element Clicks: Fires when a specific element (with a class or ID) is clicked. (Recommended for targeted CTA clicks)
  • Configure the trigger settings based on your chosen trigger type.
  • In the Custom HTML tag, set the “Firing Trigger” to the trigger you just created.

Save the tag and publish your GTM container.

Additional Notes:

  • Replace the logic in the latency property with your own logic to determine the appropriate value based on the clicked element.
  • You can create additional GTM variables to capture other dynamic information from the clicked element and use them in the event properties.
  • Consider using a more granular trigger to avoid sending the event on every page load.

By following these steps, you can configure GTM to send the “pe2144704_cta_click_v2” event to HubSpot with dynamic property values whenever the user clicks a specific element. This allows you to capture more relevant data about your user interactions.

Sharing with HubSpot Community:

When sharing this guide with the HubSpot community, emphasize the benefits of using GTM variables for dynamic event properties. This allows for more granular tracking and analysis of user behavior. You can also mention alternative trigger types based on specific use cases.