Add A Google Ads Conversion Tracking Tag To Your WordPress Website

Original Post

Add A Google Ads Conversion Tracking Tag To Your WordPress Website

For Conversions And Conversion Value Bidding Strategy

There are several bidding strategies available in Google Ads, including conversion, conversion value, clicks, etc. If you want to choose conversions, then conversion tracking tag will be essential.

Add Global Site Tag

There are two parts of conversion tracking code that you have to add to your website. First is the global site tag(gtag.js), which is unique and for all conversions. The second part is the event snippet, and it should be installed for each conversion tracking.

Both codes can be found in the Google Ads > Tools & Settings (At the right top of the page) > Conversion. Of course, you have to create a tracking conversion first.

gtag.js will be like as below, and you have to insert it between the and tag. You can manually add it to your WordPress theme, through Google Tag Manager, or with a plugin.

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

Add Event Snippet

After setting up the global site tag, we can take a look at the event snippet.

<!-- Event snippet for conversion name
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-xxxxxxxxx/XXXXXXXXXXXXXXXX',
      'value': 10.0,
      'currency': 'TWD',
      'event_callback': callback
  });
  return false;
}
</script>

In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button.

Generally, we don’t want to track conversions on every page, so it is inappropriate to insert the event snippet to the head tag. As google official document said, you can add an onclick attribute to trigger the conversion event.

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

If you use Gutenberg as your WordPress editor, you can switch the block to HTML mode, then add the code. However, if you use the classic editor, or you want to add it to a WooCommerce product page, the onclick attribute will be removed automatically after saving. I guess it is for a security purpose.

Alternatively, we can complete it with post_meta. There are two steps.

Step 1. Add Post_Meta Between Head Tag

Between head tag, add the php code as below. It will display blank if the post doesn’t have a post_meta named google_ads_conversion.

<!-- Google Ads Conversion -->
<?php
  $google_ads_conversion = get_post_meta(get_the_ID(), 'google_ads_conversion', true);
  echo $google_ads_conversion;
?>

Step 2. Create A Post_Meta

By default, admins can add a post meta on the edit page. Create it and paste the event snippet. Of course, you can name it everything, but remember to match with the post_meta key(like google_ads_conversion above).

Another point is I added a jQuery event to trigger gtag function. Again, you can change the selector (.google_ads_link below) as you want, but remember to add a class, or id, or title in the editor to ensure it works.

<!-- Event snippet for conversion name -->
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-xxxxxxxxx/XXXXXXXXXXXXXXXX',
      'value': 10.0,
      'currency': 'TWD',
      'event_callback': callback
  });
  return false;
}
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
	$('.google_ads_link').on('click', function(e){
		gtag_report_conversion($(this).attr('href'));
	})
});
</script>

Related Posts

Learn Python And R On DataCamp. Start Your Data Science Career.

---