Streaming live at 10am (PST)

Add Snippet to track button clicks

Hi all,

I don’t have a great understanding with coding so if possible please give a very detailed reply.

I essentially want to track how many people click on certain buttons. I went ahead on my google analytics and set up my conversion action.

From what I understand I need to paste the event snippet code somewhere so that every time someone clicks on a button related to the conversion action record on GA.

Could some one please tell me what exactly I have to do and where I need to paste the event snippet?

Thank you

What does the event snippet look like? Are there any instructions that come with it? Which button do you want to track?

Hi,

I want to track a book button, so when someone clicks on it takes them to a valuable page. It looks like this.

<!-- Event snippet for Click Hero book button conversion page
In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
<script>
function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
      'send_to': 'AW-823066871/povGCPuL7noQ94G8iAM',
      'event_callback': callback
  });
  return false;
}
</script>

Please click on this link. Please provide a link to your page.

@samliew www.onestopnyc.com

Hi @beauty, here is one thing to try:

Step 1:

Create a class named “tracking-button” on the button or element that you wish track once the element is clicked.

Step 2:

Paste the following code into the Before Body section of custom code in Page settings

<script>
$( document ).ready(function() { 

function gtag_report_conversion(url) { var callback = function () { if (typeof(url) ≠ 'undefined') { window.location = url; } }; gtag('event', 'conversion', { 'send_to': 'AW-823066871/povGCPuL7noQ94G8iAM', 'event_callback': callback }); return false;
}
$(".tracking-button").click(function() {gtag_report_conversion()});
});

</script>

The code is to be pasted in to the Before Body section of Page settings as shown below:

Save changes and then republish the site.

Here is some helpful articles:

Using custom code in the head and body: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

Using custom code in an embed component on the page: https://university.webflow.com/article/embed

Save the changes and the republish the site to see if that helps.

1 Like

Hi Dave,

Thank you for taking the time to answer my question.

I added the tracking-button tag to my hero section button and pasted in the
code.
When I checked the conversions on adwords it was not popping up.

Hi @beauty, thanks for replay also. Could you please share the link to the published url so that I may take a look? I am not an expert on Google Tracking but I can check if there are any other console errors.

Thanks in advance,
Dave

Hi @cyberdave, the link is www.onestopnyc.com

@cyberdave I don’t know if you mean this link? http://one-stop-beauty.webflow.io/

Hi @beauty, thanks, I will check both. Custom code can be tricky so thanks for your patience, I am here to help.

@cyberdave Thank you, I really do appreciate it.

Hi @beauty, it seems maybe not the complete code is being used,

Can you check this article: https://learn.uberflip.com/google-analytics/how-to-set-up-google-adwords-conversion-tracking

Check Step 3, your code snippet does not look like it is complete, could you check that again?

Thanks in advance

@cyberdave, these were the two code snippets that google gave me.
The one was an event snippet and the other was a global site tag.

@cyberdave, maybe I am supposed to paste the global tag and the event tag?

Hi @beauty, you will need to paste the global script tag (the first script) into the Head section of custom code, and then republish the site.

See here: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

After pasting that in, republish the site and let me know, I will take another look. Your doing great.

@cyberdave I added the code. I added it via the project code not via page
code? Is that the correct way to do it?

@cyberdave I think I figured out what was wrong, I am using the new adwords
platform check this

https://support.google.com/adwords/answer/6331304?co=ADWORDS.IsAWNCustomer%3Dtrue&oco=0

In the article it explain what to edit in the code, but I don’t know where
in the code I must put the button code.
Could you have a look?

Thanks

Hi @beauty, the article link you sent is the one showing the old method: https://support.google.com/adwords/answer/6331304?co=ADWORDS.IsAWNCustomer%3Dtrue&oco=0

The new method is here: https://support.google.com/adwords/answer/7548399

Even google recommends to use the new tag: