Track click on Twitter "Follow" button (HTML)

[eurogar]

I have a “Follow” button on my site, so that people can click on it to directly follow a Twitter account. It’s been generated by Twitter and the HTML looks like this:

<a href="https://twitter.com/NASA?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false" id="twitterfollowbuttonheader">Follow @NASA</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I’ve added it on my website using an HTML element, and the button works. Easy.

Now I wan to track the clicks on that element using Google Analytics 4. If it was a normal button (built with Bubble), it’d be easy: when click on element → workflow with the typical “GA4 Set Custom Event (NEW)” action.

However, this is a click on an HTML element, so I need to use some JavaScript. This is what I’ve done, based on the suggestion by @julienallard1 on this thread:

1. After installing Toolbox plugin, I’ve added the JavascripttoBubble element to the page, chosen a function name “bubble_fn_twitterfollowheader” and marked the “Trigger event” and “Publish value” boxes (pic 1 attached)
2. I’ve added a workflow: “When JavascripttoBubble Follow Button Header event”, and inside that I’ve added the “GA4 Set Custom Event” action to track the event (pic 2 attached)
3. I’ve modified the HTML code of the button provided by Twitter to this in order to detect the click on the button:

<a href="https://twitter.com/NASA?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false" id="twitterfollowbuttonheader">Follow @NASA</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<script>  document.querySelector(".twitter-follow-button").addEventListener('click', () => {
        bubble_fn_twitterfollowheader();
    });
</script>

So I’ve basically added a 2nd part to the JS code where I try to get the element by its class name and add an event listener that detects the click and triggers the JavaScript function that should fire the workflow.

However, when I click on the button, I go to Twitter (to follow the user, good) but the Google Analytics event is not triggered. So somehow, the Bubble function is not properly detected… What am I doing wrong?

Thanks a lot!

[julienallard1]

hey @eurogar ,
there could be a ton of reasons why it’s not triggering:

1. This is probably not why it’s not working, but in the JavascriptToBubble element you ticked Publish value but didn’t specified what type of value. Could this prevent the element to work? In your case you’re not passing any argument when triggering the bubble_fn_… function, so no need to publish value.

2. You are using the <a> tag’s class attribute to bind it with the listener. If another element has that class, perhaps the listener is bound to it instead of the link. I see that the link also has an ID. Normally, only one element has it, so it’s better to rely on them whenever possible.

3. To help isolate which part is not working, add the code alert('hey!'); just before calling bubble_fn_twitterfollowheader(). If, when clicking the link you get a popup alert, then the listener works and the problem is with the JsToBub, or the workflow.

[keith]

Hey @eurogar, if you installed Google Tag Manager in your site, you could just set that GA4 event there (in GTM) as triggered on a click on anything with the class twitter-follow-button and send the event to GA4 that way.

(This is more commonly how you’d do that with any site, regardless of the site’s architecture.)

[eurogar]

Thanks a lot for the steps! Interestingly, even after unchecking the “publish value” option (point 1) and using the id -it was not part of the original button, I added it to try your original suggestion on the other thread- instead of the class (point 2), it doesn’t work. I’ve tried point 3 (adding the alert), and the alert is not shown (you click on the button and you go to Twitter site, but no alert is shown). So it could be that the function is not even fired at all?

This is the HTML code of the button, including the modification (the first line is the code of the button provided by Twitter, the script part is what I’ve added based on your suggestion):

<a href="https://twitter.com/NASA?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false" id="twitterfollowheader">Follow @NASA</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
    document.querySelector(".twitter-follow-button").addEventListener('click', () => {
        alert('hey!');
        bubble_fn_twitterfollowheader();
    });
</script>

If you have any further thoughts, please let mw know Thanks a lot!

[eurogar]

Great one! How haven’t I even considered this? I’m going to try it out right now. It adds more things to take care of to the table (e.g. from Bubble it’s easier to retrieve query parameters -source, medium, etc.- to be added as properties to the Google Analytics event), but I don’t see why this option shouldn’t work, even if it’s not as much flexible. On it! Thanks a lot

[eurogar]

Hmmm I’ve been testing it out via Google Tag Manager and it doesn’t work either. That’s weird! I mean, the set up is pretty straight forward (I can track the click on any button of the site built with Bubble, but not the HTML element or even the container). Here are screens of the trigger and the tag, pretty straight forward. Am about to give up with the tracking of this.

[eurogar]

I’ve ended up building my own version of the button with the right destination URL so that the user can automatically follow. So it’s faking the behaviour of the button generated by Twitter, and I have full control over it to e.g. add accurate tracking.

It’s a pity I haven’t been able to find out what the real problem is, but at the end the important thing is finding working solutions, even if they are not the official ones! Thanks everybody for the help!