CMS Development

TTimes
Contributor

Tracking of custom modules?

SOLVE

Hello there.

I'm still a bit confused about how HubSpot tracking works when building websites with custom modules and HubL. Especially if those modules do not use CTAs but links (link field properties) styled as buttons.

In this case the designer has designed a button that should function with variants such as:

- A button with text
- A button with an icon and text
- A button with reversed text and icon
- A button with a video icon and link+data attribute for an uploaded video that triggers a modal with the video.

An example of the code:

{% for button in module.hero_buttons %}
                        <a href="{{ button.hero_button.url.href }}" title="{{ button.hero_button_text }}" class="btn{% if loop.index > 1 %} btn--ghost{% else %} btn--default{% endif %}{% if button.hero_button_icon %} btn--icon{% endif %}{% if button.button_icon_reverse %} btn--icon-reverse{% endif %}{% if button.video_link %} js-btn--video btn--video{% endif %}" {% if button.video_file.src != '' %}data-video-url="{{ button.video_file }}"{% endif %}>
                            {# Button icon #}
                            {% if button.hero_button_icon.src != '' %}
                                <img src="{{ button.hero_button_icon.src }}" alt="{{ button.hero_button_icon.alt }}"> 
                            {% endif %}
                            {# Button text #}
                            <span>{{ button.hero_button_text }}</span>
                        </a>
                    {% endfor %}


When I inspect other HubSpot websites I can see that they use the CTA field which holds a unique ID, but is this at all feasible in this case, where a button is very flexible as to what the editor choses?

Is the conclusion that I cannot add HubSpot tracking to custom buttons (e.g. links) and should set up tracking via Google Tagmanager/Analytics? Or is the CTA field flexible in a way that the editor can chose between the same options as listed above?

When I look at the CTA field it doesn't really seem to allow for that type of flexibility that we're looking for in this project. 

// CTA field
{
  "name" : "cta",
  "label" : "CTA",
  "required" : false,
  "locked" : false,
  "type" : "cta",
  "default" : null
}

 

1 Accepted solution
assi
Solution
Guide

Tracking of custom modules?

SOLVE

Hi @TTimes. I think you may have 3 choices.

 

1. Use Custom Behavioral Events

If you're using Marketing Hub Enterprise plan, you can create Custom Behavioral Events and track user's action based on HTML elements you choice.

How to create Custom Behavioral Events: https://cln.sh/LLmwNe

 

2. Style CTA

As you thought, CTA field is not flexible well. So add another choice module and add different styles based on selection.

This is rough Custom module: https://cln.sh/5Rylpw

Demo: https://cln.sh/PE2Sy4

* If video is chosen, additonal field for select video and JavaScript is needed for prevention default anchor element click event.

 

3. Set up tracking via Google Tagmanager/Analytics

If the ways above is not suit you, you can do tracking by Google services, as you thought.

View solution in original post

0 Upvotes
3 Replies 3
assi
Solution
Guide

Tracking of custom modules?

SOLVE

Hi @TTimes. I think you may have 3 choices.

 

1. Use Custom Behavioral Events

If you're using Marketing Hub Enterprise plan, you can create Custom Behavioral Events and track user's action based on HTML elements you choice.

How to create Custom Behavioral Events: https://cln.sh/LLmwNe

 

2. Style CTA

As you thought, CTA field is not flexible well. So add another choice module and add different styles based on selection.

This is rough Custom module: https://cln.sh/5Rylpw

Demo: https://cln.sh/PE2Sy4

* If video is chosen, additonal field for select video and JavaScript is needed for prevention default anchor element click event.

 

3. Set up tracking via Google Tagmanager/Analytics

If the ways above is not suit you, you can do tracking by Google services, as you thought.

0 Upvotes
TTimes
Contributor

Tracking of custom modules?

SOLVE

@assi

That's a very useful answer. I'll adapt your approach for future solutions.

In this case the user can actually pick (and upload) the icon through an image field, so the icon won't be static in e.g. the CSS. But since HubSpot is tracking page visits and form submissions we should be good to go with a few added buttons tracked through GA/GTM.

Thank you very much for taking the time to share your thoughts on the subject. Truly appreciated.

Jaycee_Lewis
Community Manager
Community Manager

Tracking of custom modules?

SOLVE

Hi @TTimes 👋. Thanks for reaching out. Let's see what our community has to say.

 

Hey, @assi and @dbeau79 do you have any insight into this type of implementation?

 

Thanks! – Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot