Can Google Conversion Tracking Tags be added to buttons on Website X5?
Author: Jason M.My client just sent me instructions (through Google Ads) to add Google Conversion Tracking Tags to the site I built for him in Website X5 Professional. Here are the instructions:
How to use the tag
For conversion tracking to work, you'll need to install the conversion tracking tag, which consists of a Google tag and an event snippet. You'll also need to add code so Google Ads records a conversion only when a customer clicks on a chosen link, button, or image. If installing the tag with Google Tag Manager, follow these instructions instead.
HTML PAGES
- Install the Google tag on every page of your website.
- Open the HTML for each page.
- Choose from the following options:
- If you haven't installed the Google tag on your website, copy the tag below and paste it between the head tags (<head></head>):
<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11003761779"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-11003761779'); </script>
See more guidelines on setting up the Google tag.
- If you installed the Google 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 Google tag, right above the </script> end tag.
gtag('config', 'AW-11003761779');
- If you or a manager account already installed the Google 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-11003761779
- 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.
- Open the HTML for the page.
- Copy the snippet below and paste it between the head tags (<head></head>) of the page, right after the Google tag.
<!-- Event snippet for Submit lead form 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-11003761779/vJnbCIn085UYEPOogP8o', 'event_callback': callback }); return false; } </script>
3. 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')" />
4. Save the changes to your webpage.
_____________________________________________________________________________
Steps 1 & 2 I get. I can add the tag and the event snippet between the head tags (<head></head>).
But how do I do Step 3? Is there a way to add the required code to the buttons through the Website X5 Professional platform (there are way too many buttons to do it manually, and then I'd also have to do it again and again every time I make a change to the website. So that option definitely wouldn't work)? If so, what are the instructions for that?
I don't use Google Conversion Tracking and if the other users or moderators don't have a magic trick, then each button object has to be replaced with an HTML object and the code from the instructions under point 3 has to be inserted.
You can also paste the code in a text object, but then the HTML symbol [</>] must be clicked at the top so that it is outlined in blue. The code is only executed if the HTML symbol [</>] has a blue border, otherwise the code just stands on the page and has no effect.
If the buttons have the same link address, then you could also copy the HTML object with the code and paste it multiple times in other places.
But wait and see what the other users and the moderators do for suggestions.