Jump to content

Archived

This topic is now archived and is closed to further replies.

laurenp

Adding Google Conversion Tracking Code to a Masthead Button

Recommended Posts

laurenp

Hi there,

I have used the second masthead buttons as a click to call button in the mobile version of my site. I need to setup conversion tracking on this button with code as per google's example below:

 

<body>

<!-- Below is sample text link with a phone number. You need to replace the number with your own phone number and the CALL NOW text with the text you want to hyperlink. -->

<a onclick="goog_report_conversion('tel:949-555-1234')" href="#" >CALL NOW</a>

</body>
</html>

 

I was unable to make this work using the simple field provided in the masthead options (as I'm guessing it has already the href wrapped around it).

I'm wondering if you guys have an ideas of how I could add in the onclick code. I'd even thought of adding it to the masthead section.php but not sure how I could do this without effecting the first button.

Any tips would be appreciated.

Google's info on this is here: https://support.google.com/adwords/answer/1722054?hl=en_US.

Cheers!

Share this post


Link to post
Share on other sites
James B

Hi there, try the following

 

In the masthead options paste the line without the href in <a onclick="goog_report_conversion('tel:949-555-1234') >CALL NOW</a> into the masthead button text field.

 

Then add the link into the link destination field in the masthead options.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
laurenp

Hi James,

 

Thanks for the response but no joy I'm afraid. See the result below + the code I entered. Does this give you any further clues as to a way around it? Cheers! Lauren

 

1.png
2.png

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Yeah that won't work, what you can try doing is adding the button classes to your a tag, like so:

 

<a class="btn btn-large btn-primary" onclick="goog_report_conversion('tel:949-555-1234')" href="#" >CALL NOW</a>

 

Then add this code to the Masthead Meta field instead.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
laurenp

Hi Danny,

 

Ok for some reason whatever I enter into the Masthead meta field doesn't display in the masthead. If I ask it to display a menu that doesn't show up either so not sure what is happening there.

I tried 2 other options with limited success. I think I am close but just need another head to brainstorm with to get it over the line.

1. If I added the onclick code to the link destination field ie
tel:1300 XXX XXX onclick="goog_report_conversion('tel:1300 XXX XXX')"

then it generates the following code...

<a class="btn btn-warning btn-large" 877')""="" 882="" goog_report_conversion('tel:1300="" href="tel:1300 XXX XXX onclick=">CALL NOW</a>

 

I am wondering if I can wrap something around it that may make the format work? It seems kind of close to what I need.

 

 

 

2. The other thing I tried was adding the following code to the masthead button text

<a class="btn btn-warning btn-primary" onclick="goog_report_conversion('tel:1300 XXX XXX)" href="tel:1300 XXX XXX" >CALL NOW</a>

 

which worked in terms of the code but gives me a few CSS issues to solve (eg random blue button in there + yellow button differs from red.. see below)
3.png

I tried putting a display:none on the blue button but that hid the yellow one as well.

 

My final option failing this would be to get someone to somehow hard code it into the masthead.php file for me but I'm not sure if that is doable.

 

BTW am happy to message or email you a link to the site if that makes it easier but don't wish to publish it on the forum.

 

thanks in advance,

 

Lauren
 

Share this post


Link to post
Share on other sites
James B

Hi there, I've tried Danny's option of putting in the meta and that does it, need to save and refresh though for it to populate. http://screencast.com/t/8Qw5zOyA

 

In option 2, you have the btn primary class, thats the blue button, remove that and the blue should vanish. Add large as the button type and it will match the size of the first button :-)

 

Button styles are listed here as well if needed - http://support.pagelines.me/docs/miscellaneous/shortcodes/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
laurenp

Hi there, ok I think we are there (with the exception of a few CSS tweaks)!

The reason I couldn't see the meta due to my CSS setup (I have the masthead hidden via CSS on all but the mobile views). So once I set #masthead .mastlinks{display: block; } within my mobile styles then it was all good. And the final code I used within the masthead meta FYI was:

<a class="btn btn-warning btn-large" onclick="goog_report_conversion('tel:1300 xxx xxx')" href="1300 xxx xxx">CALL NOW</a>

Many thanks for your help on this :)

Share this post


Link to post
Share on other sites
Danny

Awesome and thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×