Tracking phone calls generated from your website is an important metric. How else will you learn how effective your ads are in leading to phone calls from your website that ultimately lead to conversions? Granted, not every call that comes from a website is the result of an ad. Many calls are organic, meaning they've been driven by the site itself and the content you publish. Regardless of the vehicles that lead to a phone call, it's still nice to know how many of those calls result from a click through on your website.
With the addition of Google AdWords Call tracking to your site, you can track calls that originate from your site or mobile devices. The instructions for adding the Google AdWords tracking code to your site are pretty straightforward. Straightforward, that is, if you have a plain vanilla, generic type of website. If you are using a professional developers' tool like the Genesis Framework, Google's instructions may not apply to you. We've written this article to help you install the Google AdWords call tracking code into your Genesis based child theme.
First Method—Don't Try This at Home
One way of attempting to add the code is with the genesis_attr_body filter:
1 2 3 4 5 | add_filter( 'genesis_attr_body', 'themeprefix_add_attr' ); function themeprefix_add_attr( $attributes ) { $attributes['onload'] = "_googWcmGet('number', '1-555-555-9999')"; return $attributes; } |
As simple as it is, the problem with the above code is that it doesn't work. When passed through the filter, it does indeed add the AdWords function to the <body> tag. However, it also sanitizes the code and converts the required single quotes within the function into their respective HTML entities (&039). So the resulting HTML looks like this:
1 | <body onload="_googWcmGet(&039;number&039;, &039;1-555-555-2086&039;)"> |
It's not very pretty. It definitely won't work. And we haven't been able to find a work-around.
Second Method—JavaScript
While we're not going to repeat anything you can already learn from the Google AdWords Call Tracking site, one thing their site omits is the fact that you can install their function with a JavaScript snippet. The function below is added to your site's header area. In Genesis you can do this in several ways. You can navigate to the Genesis/Theme Settings admin page and copy the code into the header script meta box. You can also add the code through the Genesis Simple Hooks plugin. Or last, you can create code to add the script through your functions.php file.
1 2 3 4 5 | <script> window.onload=function() { _googWcmGet('number', '1-555-555-2086'); }; </script> |
Third Time's the Charm
The third method, and the one that we prefer, is to add the code directly to header.php. Genesis child themes typically do not have a custom header.php. Header.php is found in the Genesis directory. Since this is core code, you must not under any circumstances edit this file directly. Doing so will create a multitude of problems for you when the Genesis Framework is updated. You can, however, copy header.php into the root folder of your child theme and then edit that file. The code below is an edited header.php from Genesis Version 2.2.3 that you can copy and paste into the child theme directory. Lines 21 and 22 show the modifications. Change the number to your own.
Also note that future versions of Genesis may render this code obsolete. We'll do our best to keep this code updated as new versions of the framework are released.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?php /** * Genesis Framework. * * * @package Copied from Genesis\Templates * @author StudioPress * @license GPL-2.0+ * @link http://my.studiopress.com/themes/genesis/ */ do_action( 'genesis_doctype' ); do_action( 'genesis_title' ); do_action( 'genesis_meta' ); wp_head(); //* we need this for plugins ?> </head> <?php genesis_markup( array( 'html5' => '<body %s onload="_googWcmGet(\'number\', \'1-555-555-9999\')">', 'xhtml' => sprintf( '<body class="%s" onload="_googWcmGet(\'number\', \'1-555-555-9999\')">', implode( ' ', get_body_class() ) ), 'context' => 'body', ) ); do_action( 'genesis_before' ); genesis_markup( array( 'html5' => '<div %s>', 'xhtml' => '<div id="wrap">', 'context' => 'site-container', ) ); do_action( 'genesis_before_header' ); do_action( 'genesis_header' ); do_action( 'genesis_after_header' ); genesis_markup( array( 'html5' => '<div %s>', 'xhtml' => '<div id="inner">', 'context' => 'site-inner', ) ); genesis_structural_wrap( 'site-inner' ); |
David Alexander
June 6, 2016 at 2:46 pmThese guys found a way to escape the characters to get method 1 to work
http://digitalessence.net/how-to-add-onload-to-the-body-using-genesis-add_filter/
I personally think method 2 is the best however I have a question about testing. Do you have to find an adwords ad and click it for the onload to appear? or should it appear on every refresh?
Thanks
Victor M. Font Jr.
June 8, 2016 at 5:43 amI don’t know about the testing. I don’t use AdWords. I wrote this after someone asked for help.
Phil
December 14, 2015 at 12:34 pmThanks Victor, quick question – why don’t you like method 2? It’s easier to edit the head from the Genesis theme settings in the WordPress backend rather than copying over the header.php file to the child theme because then you don’t have to worry about manually updating the child header.php when there are future updates to the parent header.php. Just wonderin’. Cheers, Phil
Victor M. Font Jr.
December 15, 2015 at 7:21 amHi Phil,
You are right of course. The second method provides longevity, but I never said that I didn’t like preference 2. The goal of the article is to provide a method to accomplish what Google is asking us to do. That is, add the tag to the body markup. If you want it in the body tag, create a custom header.php. Thank you for your insight.