Recently I was tasked with adding number tracking w/ Adwords to a client’s website. They are using OptimizePress which isn’t very friendly for any user editing (no child themes, very confusing theme layout for modifications etc).

Anyway, I figured it out and thought others might need to know this, if nothing else, at least on how to edit the body tag to include an onload(); function 🙂

So, here’s what you do;

Edit the main theme’s functions.php, which, will be replaced upon an upgrade, so take note of that if you plan on upgrading OptimizePress at a later date (you should!).

  function add_body_onload($c) {
   $c[] = ' onload="_googWcmGet('number', '+1-555-222-3333')"';
   return $c;
  }
  add_filter('body_class','add_body_onload');

Then, you’re going to want to edit the header file and add the following code at around line 344 of /lib/functions/page.php;

} else {
 $logo = '<div class="op-logo">test'.$logoH1Start.'<a href="'.esc_url( $header_link ).'"'.$title_str.' rel="home"><img src="'.$logoimg.'" alt="'.$alt.'" /></a>'.$logoH1End.'</div>';
 }

changes to

} else {
 $logo = '<div class="op-logo"><a href="tel:+1-555-222-3333" id="number">555-222-3333</a></div>';
 }

Then, login to the wordpress backend, and add these changes.

First, go to optimizepress -> dashboard -> global settings -> custom css and add this

#number {
 font-weight: bold;
 font-size: 50px;
 color: #fff;
 line-height: 55px;
}

Now, save your changes.

Then, go to optimizepress -> blog settings -> modules -> other scripts and add the script you got from Adwords, changing the YOUR_ID_HERE portion. Add this toone of the header scripts boxes (or, create a new one);

<script type="text/javascript">
(function(a,e,c,f,g,h,b,d){var k={ak:"YOUR_ID_HERE",cl:"P8GfCKfi9mgQ6tz9oQM"};a[c]=a[c]||function(){(a[c].q=a[c].q||[]).push(arguments)};a[g]||(a[g]=k.ak);b=e.createElement(h);b.async=1;b.src="//www.gstatic.com/wcm/loader.js";d=e.getElementsByTagName(h)[0];d.parentNode.insertBefore(b,d);a[f]=function(b,d,e){a[c](2,b,k,d,null,new Date,e)};a[f]()})(window,document,"_googWcmImpl","_googWcmGet","_googWcmAk","script");
</script>

<script type="text/javascript">
var callback = function(formatted_number, mobile_number)
 var e = document.getElementById("number");
 e.href = "tel:" + mobile_number;
 e.innerHTML = "";
 e.appendChild(document.createTextNode(formatted_number));
};
</script>

And, that should be it. Now you’re going to want to test the site, by finding one of your ads, clicking it, and going to the page to make sure the number has changed to to one of your call extensions.