In this article you’ll learn how to setup Pay Per Call Campaigns using Ringba.
We are showing you how to setup Ringba campaigns using Serverside script.
We used the clientside version but we found there was a latency when using a number pool. You can see the phone number change in realtime. This ‘flashy’ experience could affect conversions so we chose to implement the serverside version. Thankfully this is just as easy when using LeadsHook! 🙂
We are only sharing the Ringba setup required inside LeadsHook. Please contact Ringba support for further details on setting up Ringba.
Step 1: Setting Up API Node to Get Phone Number from the Number Pool
Please watch this video to understand the setup inside LeadsHook. And then see images, notes and scripts under the video.
POST Request URL
Copy and paste this URL:
https://display.ringba.com/v2/nis/gn/
Please ensure your HEADERS are as follows:
Copy and paste these headers into their own individual lines:
Content-Type:application/json
Authorization: YOUR API TOKEN
X-Forwarded-For:{ip_address}
Copy and paste your JSON payload. Please note the required parameters highlighted with yellow. The tags should be used to give you further and better insights.
You can add more variables like answers, more geo or location data and device data. These are all available inside LeadsHook.
How to Find Your JSTagID
{
"JsTagId": "JSadb7e7b6a1bf4605a54daf0267590000",
"CurrentEpoch":{_c_eventtime},
"Tags": [
{
"type": "User",
"utm_campaign": "{utm_campaign}"
},
{
"type": "User",
"utm_adset": "{utm_adset}"
},
{
"type": "User",
"utm_ad": "{utm_ad}"
},
{
"type": "User",
"utm_source": "{utm_source}"
},
{
"type": "User",
"utm_medium": "{utm_medium}"
},
{
"type": "User",
"fbclid": "{fbclid}"
},
{
"type": "User",
"ttclid": "{_tracking_ttclid}"
},
{
"type": "User",
"gclid": "{_tracking_gclid}"
},
{
"type": "User",
"User Ip": "{ip_address}"
},
{
"type": "User",
"Zip": "{_geoip_zip}"
},
{
"type": "User",
"City": "{_geoip_city}"
},
{
"type": "User",
"State": "{_geoip_regionCode}"
},
{
"type": "User",
"Ringba State": "{_geoip_regionCode}"
},
{
"type": "User",
"Ringba Zip": "{_geoip_zip}"
}
]
}
Step 2: Understanding the Serverside Setup Including Button Script
You can add a button on any node. Click the “Source” button to add button copy:
This is an example script to create buttons. Feel free to edit as required. Please watch the video above to understand specifics about this script.
<p style="text-align: center;"><span style="color:#000000;">You pre-qualify to get immediate payment of $1,000,000,000 . Tap the button below right now to secure your allocation!</span></p>
<p style="text-align: center;"><a href="tel:{phone_number_pool|e164}" id="phonecall" target="_parent">Call {phone_number_pool|national}</a>
<style type="text/css">#phonecall {
border: 1px solid #1f8bea;
border-radius: 3px;
background-color: #1f8bea;
color: white;
padding: 20px;
font-size: 20px;
text-decoration: none;
display: inline-block;
width: 90%; /* button will take full width of its container */
box-sizing: border-box; /* so padding doesn't affect final width */
}
#phonecall:hover {
border: 1px solid black;
background-color: #2195fc;
color: white;
text-decoration: none;
}
/* Adjusts style for screens smaller than 600px */
@media (max-width: 600px) {
#phonecall {
font-size: 16px; /* adjust font size for small screens */
padding: 10px; /* adjust padding for small screens */
}
}
</style>
</p>
3) How to Setup Tracking for Pay Per Call Button
Add your tracking scripts to as a node level script. Please note you will need to upgrade to Version 2 to take advantage of the easy-to-use function that passes data automatically into the data layer for tracking.
Please see this “How to Setup & Use Custom Events” section in the article linked below:
Feel free to amend this script script for your needs. Watch the video to understand what the script below.
sendCustomGTMEvent(‘customEvent’,eventData) function works only with version 2 decision trees. Please contact LeadsHook team to upgrade your account.
<script>
// Get the button element with id "phonecall"
var phonecall = document.getElementById('phonecall');
// Add a click event listener to the button
phonecall.addEventListener('click', function() {
// Your lead generation and online conversion logic here
// ...
// Log a message to the console
console.log('Phone call button clicked. Script fired.');
// Push a dataLayer event within the iframe
var eventData = {
event: 'phoneCallButtonClicked',
// Add any additional data properties as needed
};
// Send the event data to the parent page
sendCustomGTMEvent('customEvent',eventData);
});
</script>
Step 4: Do a full round of testing including seeing your conversion events inside your ad network.
Common Errors & Issues
- Please ensure your JSTagID is correct. It starts with “JS”