Google Analytics event tracking for buttons in Webflow

Design help General
1

Just want to start off by saying webflow as a tool is awesome.

I created a website with a few buttons, each involving a slightly different pop-up lightbox window. I want to track the button clicks using Google analytics. I have enabled Google analytics for the site (well, the pages in the site). However, when I did some research, I found the link below to enable event tracking for button clicks.

Unfortunately, I am not able to find a way to include “onclick” Google analytics event in ahref without manually changing the underlying code. Not that there is anything wrong with manually changing the underlying code but it is a maintenance nightmare as everytime I change the website using webflow, I have to include the event tracking code manually.

Can you suggest a way to include event tracking code in ahref for buttons / links?

5 Likes
2

Hey @DesignerPC based on the article this is the structure they’re looking for…

<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a>

When you need to add something like onClick="" to an HTML tag like the <a> tag inside of Webflow you have to add a custom attribute. Here’s some more info on custom attributes: HTML Attributes

To add onClick or any other custom attribute, click on the plus button in the Custom Attributes section of the lightbox link (not the thumbnail image):

And then add your values:

For something like a lightbox it would make sense for it to have a value like this:

_gaq.push(['_trackEvent', 'Lightbox', 'Open', 'Microsoft Project']);

and replace Microsoft Project with the project or series of images you’re showing off in that particular lightbox. Then you’d customize that last one for each lightbox.

Hope it helps!

5 Likes
3

Hi Sergie,
Thanks for the quick response. Your suggestions were spot on. I was able to get event tracking working by adding custom attributes. Thanks for your help.

  • DesignerPC
4

Hey guys, hey @thesergie

I tried to follow your solution to add event tracking with GA for visitors clicking on “download on appstore” buttons on our page ( www.getjettied.com) but when I setup a custom attribute with the name “onClick” an error message in red comes up: This is a reserved name.

Any way around this? Thank you in advance!

5

Thanks @thesergie… I was looking for an answer here as well.

We do a lot of seo / google analytics work.

6

It kind of always does… put your cursor/focus on the next field, or the previous if you’re already on the second, and the red color disappears.

Edit : just tested it, and you’re right, onClick produces a real error that I don’t know how to get around.

1 Like
7

It worked a couple months ago, but for security reasons we’ve disabled it.

We’ll update you guys soon on what’s going on. Sorry about any inconvenience!

1 Like
8

Hey guys, one workaround to this for the time being is to use the custom code feature to wire up an event handler.

First, give your link some unique ID in the Settings tab:

Then go to your site’s Dashboard, go to the Custom Code section, and add the following example code in the Footer Code section:

<script>
  $(document).ready(function() {
    $('#my-unique-link').on('click', function(e) {
      _gaq.push(['_trackEvent', 'Lightbox', 'Open', 'Microsoft Project']);
    });
  });
</script>

If you have a lot of these all across your site with different parameters, you can create a common handler that keys off of allowed custom attributes, like so:

First add a data-gatrack attribute to the links you want to track. You can call it whatever you want, but it should start with data- and it must match the script (shown below) exactly.

Then add the following more-generic click handler to the Footer Code of your site:

<script>
  $(document).ready(function() {
    $(document).on('click', '[data-gatrack]', function(e) {
      var $link = $(this);
      var trackData = $link.data('gatrack');
      if (!trackData) { return; }
    
      var trackParams = ['_trackEvent'].concat(trackData.split(','));
        _gaq.push(trackParams);
      });
  });
</script>

Note that attribute names here are case-sensitive, so if you set your custom attribute to something like data-gaTrack and don’t update the script to reflect that, it won’t work.

14 Likes
9

Thank you guys, I tried the first option and it works! Thank you so much!

10

@callmevlad. Does your second option here work on tracking light box clicks? Can’t seem to get it work. Do you still need to add a unique I’d as in the first option?

11

Too complex for me to accomplish this in a short period. Can you post an exemple that will work with localize.js instantly?
Thanks again.

12

Hi! Please, update us on what’s going on! :slight_smile: We still not able to use “onclick” attribute? And what to do? How to track an events directly, without “workarounds”?

13

Hi this doesn’t seem to be working. I’ve set up exactly as you’ve described here and I’m not getting anything register on my Analytics account. You can see from this image that link settings are set up correctly:

You can see from this image that the snippet is in my footer.

Uploading…

Any ideas on how I can fix this? I really need to start tracking button clicks.

Thanks,
Dan.

1 Like
14

Forget that, it must have taken a few minutes to register as it wasn’t showing on live analytics but it is now.

15

How to make correct script for Universal Google Analytics?

http://joxi.ru/8An3pGdtBQE4rO

Doesn’t work((

1 Like
16

This topic was automatically closed after 24 hours. New replies are no longer allowed.

18

Hey guys! Any news to add atribute onClick for buttons? It seems they doesnt works…

19

yes, they don’t. the workaround is to place a GTM container inside the < body > and to create Event tags in the Google Tag Manager.
It works fine for me.

3 Likes
20

I tried option 2 here with the generic click-handler in the footer code and it’s not working, at least as far as I can tell with the tag assistant. (https://new.botanicalcraft.com)

1882×1639 155 KB

472×1100 64.7 KB