Streaming live at 10am (PST)

Add Snippet to track button clicks


#1

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


#2

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


#4

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>

#5

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


#6

@samliew www.onestopnyc.com


#9

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.


#10

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.


#11

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


#12

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


#13

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


#14

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


#15

@cyberdave Thank you, I really do appreciate it.


#16

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


#17

@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.


#18

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


#19

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.


#20

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


#21

@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


#22

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: