Skip to main content

I Implemented Google Phone Website Call Conversions a while ago using the following page



I have just noticed that the buttons I use are not as I would like them to appear.


This is how I would like it to appear

03%20am


This is how it actually appears

46%20am


At the very least I would like the “Call Us Now” Text to remain in button


How do I fix this issue

thanks

Rodney

Hey @Rodney


The easiest way to re-insert the text before the phone number would probably be to add it via CSS pseudo-class:


#your-button-id .label:before {
content: 'Call Us Now';
}

As for the formatting of the number itself, I believe Google will match the same formatting of the number that you pass through the following function in the script (at the bottom):


<script>
$(function(){
_googWcmGet(ubCallback, '1-800-123-4567')
});
</script>

In this part of your script, does your number have the format (00) 0000 0000?


Hi Leah.ann


Thanks for the reply


Not sure where to add this css on my page? Do I add it to the button text field? or style sheet area?

Also do I delete the Call Us Now text from button text field" your instructions are vague.


Also this doesnt address the issue of the number is there a way of hiding the google number and display my number instead?


as for formatting you can see from images that it follows that formate which is fine.


Thanks

Rodney


Sorry @Rodney, I should have been more clear with my instructions!


You’ll want to add the CSS to the stylesheet area at the bottom of your page builder. Be sure to wrap it in <style> tags, so the full text that you’ll paste into the stylesheet will be:


<style>
#your-button-id .label:before {
content: 'Call Us Now';
}
</style>


You certainly can, and might want to for the sake of keeping things clean, but you don’t have to. What’s essentially happening is that the Google phone call conversion code is replacing all of the button text with the new tracking number, not just the phone number itself.


By adding the text using the :before pseudo-class, it is not affected by the script.



Apologies, I misunderstood what you were wanting here. I thought you just wanted the number formatting to look like 00 0000 0000 instead of (00) 0000 0000.


Unfortunately, the Google number is what needs to be displayed in order for the tracking to work properly.


The way that Google is able to track phone calls on your landing pages is by inserting their own tracking numbers in place of your number. Since they have control of these numbers, they’re able to attribute it to the proper channels on your AdWords account. These tracking numbers will then forward to your number, so from your end everything should be the same. If you removed the Google tracking number and just kept your number, there would be no way for Google to track phone calls.


I hope this was a more clear explanation. Let me know if I didn’t answer any of your questions completely or if you want me to explain anything further!


Hi Leah.ann


Finally got around to testing this and it works but now have a new problem the text is inserted before the number the only problem is that it is all one long sentence that wraps around ie

Line 1: Call Us

Line 2: Now (03) 85669635


Need to put a line break in this CSS somehow so it appears the same as top image on this post

Line 1: Call Us Now

Line 2: (03) 85669635


Any Ideas?


Hi Leah.ann


I have now fixed that issue with following code using \A as a line break



#lp-pom-button-226 .label:before {
content: 'Call Us Now \A';
}
#lp-pom-button-79 .label:before {
content: 'Call Us Now \A';
}

I now have another issue the text now appears at very bottom of button how do I get it to appear in middle of button.


Hey @Rodney


Glad to hear you figured out the line break issue!


Would you mind sharing a link to the landing page that you’re working on? Vertical alignment tends to be a bit finicky and there are a few different ways to approach it depending on how the button is already styled.


Ok sure the page is here


http://ad.synergyhypnotherapymelbourne.com.au/


Thanks

Rodney


Cool, thanks for sharing that with me.


Does this page have the Google tracking script on it? I’m seeing “Call Us Now” twice and your phone number doesn’t look to have changed to the tracking number, so it looks like this:


Screen%20Shot%20on%20Feb%2022nd%20at%2003_05%20PM


When I used the browser DevTools to see what it would look like without the second “Call Us Now”, everything looked to be aligned correctly:


Screen%20Shot%20on%20Feb%2022nd%20at%2003_08%20PM


Are you experiencing something different on your end?


Hi Leah.ann


ok sorry about that forgot to delete the Call Us Now in my second variant. I have now fixed that.


You wont see the google tracking number unless you do a search and click on a adwords ad that I have running only then will google change the number.

You can search for “hypnotherapy melbourne” remember I am in australia. look for synergy hypnotherapy.


you dont need to do this to see the text not aligning properly if you have a look again it will appear as I described

10%20am



My bad, you’re totally right! Sorry about that.


I’m definitely seeing what you’re describing now. Try adding the following CSS to the same stylesheet that you added the other CSS above:


#lp-pom-button-226 .label,
#lp-pom-button-79 .label {
top: 35%;
}

Hi Leah.ann


Thanks for that all fixed now using the following CSS

indent preformatted text by 4 spaces


<style>

#lp-pom-button-226 .label:before {

content: ‘Call Us Now \A’;

}


#lp-pom-button-79 .label:before {

content: ‘Call Us Now \A’;

}


#lp-pom-button-226 .label {

top: 35%;

}


#lp-pom-button-79 .label {

top: 35%;

}


Wonderful, glad to hear it!


Reply