Unbounce can be a tricky beast, but its array of easy-to-use features make it a stand-out choice for custom landing page design. One issue we’ve had is with Google Call Tracking not working properly to update the corresponding tel of link hrefs, meaning clicks go to the usual number rather than the forwarding number, despite the text replacement occurring as it should.
This is a frustrating issue as at first glance it seems that the call replacement is working as intended, but you will soon find that these interactive links aren’t behaving as expected and that the numbers just don’t seem to add up.
Today we will make use of Unbounce’s much-awaited custom class features, along with a bit of savvy mutation observer logic, to update the href correctly according to Unbounce formats for when you next create a landing page. This means those links will be updated with the call replacement number Google provides!
Unbounce Nesting Structure
“Know Your Enemy”
If you have ever taken a peek underneath the hood, you may have noticed that Unbounce works on multiple levels of nested elements – Now the key to getting this call tracking working right is understanding the structure of your target:
In most cases we are dealing with something like this:
lp-pom-text-box > p > a > span
In our landing page example, we have a text box, which is styled as a paragraph element, which has a link, upon which our actual text is styled in a span (this span applies the styles you use in the editor).
Take a look within the landing page builder preview mode or published page with the inspector tools and see if your instance is a similar pattern or wildly different and take note!
Google Call Tracking With Custom Class
“In the midst of chaos, there is also opportunity”
By which I mean find all the text box elements that contain your phone numbers (I’m presuming they are their own elements…right?!) and add a class to them, something along the lines of phoneNum or some such, whatever it is, keep it short and consistent as we will make reference to it in our code. This new Unbounce feature allows you to add multiple classes but use of a space, so don’t worry if you have other classes on them you don’t want to overwrite.
We do this step to ensure we are only listening to changes to the phone numbers, we don’t want to try to update everything whenever a change occurs and it’s a great introduction to using the new custom class feature.
Mutate & Observe
“Let your plans be dark and impenetrable as night, and when you move, fall like a thunderbolt”
Okay, so that part of the art of war is a little less applicable I’ll give you that…
But it is time for our mutation observers to be built out – these will look for the elements we’ve tagged as phone numbers and get a little smart about how to select the right link element to update. These are basically like eventListeners except they give a nice meticulous record of the changes that happen to the observed element, as they happen.
This means when our phone numbers are changed, we not only know about it, but we can delve the mutation record for our new value and to find the associated href element nested in our observed text box.
So keep in mind that we should have a text-box with a class, within which are a bunch of nested elements our a link and the final span included.
(function() {
function mutateNumber() {
//Selects all all the elements with the custom class of phoneNum we tagged up earlier:
var targets = document.querySelectorAll(".phoneNum");
//Loop through all the targets - we want them all updated!
for (var i = 0; i < targets.length; i++) {
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
//Uncomment the below to see the whole mutation record in the console, that way you can poke through if you need to change anything:
//console.log(mutation)
//This checks for the new value inputted to the span (i.e. our replacement number)
var replacementNum = mutation.target.data;
//This looks through our record and finds the parent elements container ID, in this case the text box ID:
var containerId = mutation.target.parentElement.offsetParent.id;
//We do a search for our containerId's a.href link and update it to unbounce fashion with a space stripped replacementNum:
document.querySelector("#" + containerId + " a").href = "clkn/tel/" + replacementNum.replace(/ /g, '');
});
});
// observer config:
var config = {childList: true, subtree: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(targets[i], config);
};
}
//We run our function to attach our listeners:
mutateNumber();
//Google call tracking conversion:
gtag('config', 'AW-CONVERSION_ID/CONVERSION_LABEL', {
'phone_conversion_number': '1-650-555-5555'
});
})();
Note that we implement the gtag conversion tracking AFTER the mutateNumber() is called – this ensures our observers are in place before the call conversion changes the number. Also, note that there is an observer.disconnect method that you could run once you know you have observed all you needed.
To test add #google-wcc-debug to your URL (may need to refresh this twice to see the debug popup) and click the force button – you should see all your numbers that match the call conversion tracking tag you entered change to 9999 9999 etc.
Great, now inspect those links attached to your changed numbers to ensure they have updated as well – they should look something like: “clkn/tel/99999999”. This means that the replacement number should be used if someone, for example, tries to face-time or some such via the link, and as a result, this will be tracked by Google and forwarded on to the number in the gtag.
This lack of href update seems to be an issue across a lot of landing pages, resulting in decreased call conversions for these pages and more often than not leaving landing page builders none the wiser.
As such we hope this helps you implement some best landing page design practices on your landing page templates, and provides some more accurate tracking results when it comes to Google Call Tracking conversions within Unbounce. As always, feel free to reach out to our team if you need assistance!
