Streaming live at 10am (PST)

Adding Tracking Code To Button

Hi!
I am trying to add custom tracking code that Google provides to a button on the front page of this website. I need to add it to the book online button beside the call button. I’m not exactly sure how to do it, but I did try adding it to the custom attributes options. Any help would be appreciated…
Thanks, Darcy


Here is my site Read-Only:
https://preview.webflow.com/preview/jantz-electrical?utm_medium=preview_link&utm_source=designer&utm_content=jantz-electrical&preview=78506d6e4101a7123001efb7602046a5&mode=preview

Any help would be appreciated…

Hi @americanupstarts,
what are you using to track. Google Analytics?
And are you using Google Tag Manager? I would recommend using tag Manager, because it simplifies the process of creating custom event tracking.

Maxi

Hi.
This is the code the Google ads rep sent me to use.

  1. Install the global site tag on every page of your website.
  2. Open the HTML for each page.
  3. Choose from the following options:
    * If you haven’t installed the global site tag on your website, copy the tag below and paste it between the head tags ( <head></head> ):

<!-- Global site tag (gtag.js) - Google Ads: 942669475 --> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-942669475"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-942669475'); </script>

See more guidelines on setting up the global site tag.

* If you installed the global site tag on your website from another Google product (example: Google Analytics) or from another Google Ads account, copy the ' `config` ' command below and add it to every instance of the global site tag, right above the `</script>` end tag.

gtag('config', 'AW-942669475');

* If you or a manager account already installed the global site tag on your website while setting up the tag for another conversion action, make sure that the tag is on every page of your website and check that the ' `config` ' command has this Google Ads account's conversion ID: `AW-942669475`
  1. Save the changes to your webpages.

  2. Install the event snippet on the page that has the button or link you’d like to track.

  3. Open the HTML for the page.

  4. Copy the snippet below and paste it between the head tags ( <head></head> ) of the page, right after the global site tag.

<!-- Event snippet for Book appointment 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-942669475/kz7MCMqjm_MBEKP9v8ED', 'event_callback': callback }); return false; } </script>

  1. Add an onclick attribute directly to the code for the button or link you’d like to track. The code you use will depend on how the link or button is displayed on your site: as a text link, button, or button image.

Add the code to a text link: In the code below, replace “http://example.com/your-link” with the URL for your website or telephone link, and replace “Download now!” with your link text.

<a onclick="return gtag_report_conversion('http://example.com/your-link');" href="http://example.com/your-link">Download now!</a>

Add the code to a button: This code shows you how to add click tracking functionality to a button using the <button> tag. Replace “http://example.com/your-link” with the URL for your website.

<button onclick="return gtag_report_conversion('http://example.com/your-link')">Submit</button>

Add the code to a button image: In the code below, replace “download_button.gif” with your button image, replace the width and height with your image’s parameters, and replace “http://example.com/your-link” with the URL for your link.

<img src="download_button.gif" alt="Download Whitepaper" width="32" height="32" onclick="return gtag_report_conversion('http://example.com/your-link')" />

  1. Save the changes to your webpage.

Ok, great. As i said i would recommend, creating a google tag manager account. This will simplify processes in future significantly. See this short tutorial from webflow university:

After following the tutorial, you should have a container, connected to your webflow site.
I dont know, if you have google analytics, or a cookie consent platform… But this can be implemented all over the tag manager.
I am unsing tag manager to run google analytics after analytics consent. (cookiehub)

Ok lets get back to your tracking code. I´ll provide a tutorial with google tag manager, but if you dont want to create a tag manager accound and / or connect it to your site i can give you a explination how to do it.

Step 1 : Create a new Tag

Step 2: get all the information you need from google ads.


Step 3: Add a new google ads conversion tracking tag

Step 3: Fill in the information from google ads

Step 4: Add a trigger (when your conversion will be triggered)


Step 5: Configure the trigger the way you want. (on button click)



(select an integrated variable)

Step 6: select “Click ID”


This means, if the id of an link element is =“yourWebflowButtonID”, and it is clicked, then the google ads conversion event should be triggered.

Step 7: add the id, you set in google tag manager to your button which should be tracked.

A video how to do…

Maxi