Dynamically replaces phone numbers on a WordPress site based on the user's referrer or query parameters in the URL

Date: 
9. December 2024
Author: 
mbs
Category: 

If you are doing Ads on Facebook or Google or actually both, here is a script that can change the telephone number, so it's possible to track the user.

This is with Danish Country Code (+45)

It's pretty simply, and is saving in the cookie.

This is NOT created as a standalone Plugin, but this should be pretty easy if you want this.
There is also a way of implementing this to Google Tag Manager

add_action('wp_head', 'woocommerce_js');

function woocommerce_js() {
    ?>
    <script>
        var roi_phone_book = [
            { Referrer: "facebook", Query: "fbclid", Lifetime: 2592000, ReplaceNumber: "12 34 56 78" },
            { Referrer: "google", Query: "gclid", Lifetime: 2592000, ReplaceNumber: "87 65 43 21" },
            { Referrer: "google", Query: "gad_source", Lifetime: 2592000, ReplaceNumber: "87 65 43 21" }
        ];

        // Function to store the source and phone number in sessionStorage or cookie
        function storePhoneNumber(referrer, phoneNumber) {
            // Save the phone number and referrer in session storage
            sessionStorage.setItem('phoneNumber', phoneNumber);
            sessionStorage.setItem('referrer', referrer);
        }

        // Function to get the stored phone number from sessionStorage
        function getStoredPhoneNumber() {
            return sessionStorage.getItem('phoneNumber');
        }

        function init_roi_phone() {
            var phoneNumber;

            // Check if there is a phone number already stored in sessionStorage
            phoneNumber = getStoredPhoneNumber();

            // If no phone number is stored, check the referrer and query parameters
            if (!phoneNumber) {
                for (var i = 0; i < roi_phone_book.length; i++) {
                    if ((document.referrer.indexOf(roi_phone_book[i].Referrer) !== -1 || window.location.search.indexOf(roi_phone_book[i].Query) !== -1)) {
                        phoneNumber = roi_phone_book[i].ReplaceNumber;
                        storePhoneNumber(roi_phone_book[i].Referrer, phoneNumber);  // Store the phone number and referrer
                        break;
                    }
                }
            }

            // If still no phone number found, return
            if (!phoneNumber) return;

            // Replace text content
            document.querySelectorAll('a[href^="tel:"]').forEach(function(link) {
                link.textContent = "+45 " + phoneNumber;
            });

            // Replace tel links
            document.querySelectorAll('a[href^="tel:"]').forEach(function(link) {
                var telNumber = phoneNumber.replace(/\s/g, ''); // Remove spaces from the phone number
                link.href = "tel:+45" + telNumber;
            });
        }

        // Function to detect URL changes without reloading the page
        function onURLChange() {
            init_roi_phone();
        }

        // Run the function when the page is loaded
        if (/complete|interactive|loaded/.test(document.readyState)) {
            init_roi_phone();
        } else {
            document.addEventListener('DOMContentLoaded', init_roi_phone);
        }

        // Listen to changes in the URL (for single-page navigation)
        window.addEventListener('popstate', onURLChange);
        window.addEventListener('pushState', onURLChange);
        window.addEventListener('replaceState', onURLChange);
    </script>
    <?php
}

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2007-2024 mbsTECH.dk 
by Michael Bay Sørensen
WebGPT.ninja
Build with
and 
Oxygenbuilder
I'm using 
Ahoy