Main/Dynamic Replacement of Email and Phone Number on a Website Using Google Tag Manager

Thu, June 14, 2018

Dynamic Replacement of Email and Phone Number on a Website Using Google Tag Manager

The original article was written on June 14, 2018, and it focused on sending data to Google Analytics Universal. However, during the migration of the blog to a new CMS, I decided to update the content to reflect the current version — Google Analytics 4.

Google Tag Manager is a very useful tool, and it can be used for more than just setting up data collection in Google Analytics 4. For example, dynamically replacing content on a website is also a matter of just a few dozen clicks in GTM.

There are many reasons why you might want to replace content dynamically on a page. Below are two of the main ones:

Replacing data to track the traffic source from which the user arrived. This is similar to how call-tracking services work.
Replacing content as a way to provide personalized information to different user segments.

In my own work, I recently encountered the first case. The task was to track which traffic source brought users who sent emails to the address displayed on the landing page. But beyond that, we’ll also explore other ways to replace content.

Replacing the Email Address Based on Traffic Source on a Single-page Website/Landing Page
Replacing the Email Address Using the Sourcebuster.js Library
Replacing the Phone Number on a Website/Landing Page

To set up the replacement, we’ll need:

Variables to store information about which traffic source the user came from
A Custom HTML tag that performs the magic — replacing the contentДля налаштування заміни нам знадобиться:

Replacing the Email Address Based on Traffic Source on a Single-page Website/Landing Page

Let’s assume we have two main traffic sources: Facebook Ads and Google Ads (as Google Ads was still called at the time of writing), along with some other less significant sources. Currently, the website displays a generic email for all traffic sources. For example:

33.1 Example of displaying a general email on the website for all traffic sources eng

To track the effectiveness of Facebook and Google Ads, we’ll create two additional email addresses, e.g.: facebook@domain.com and adwords@domain.com.

Next, create two variables — {{URL - utm_source}} and {{URL - utm_medium}}, which will store information about the ad source and channel.

33.2 Setting up a variable to store information about the advertising campaign source

33.3 Setting up a variable to store information about the advertising channel

IMPORTANT! Your ad campaigns must be tagged with UTM parameters.

For the final step, create a tag called HTML - Replace E-mail of the Custom HTML type, like this:

33.4 Custom HTML tag for dynamic email replacement

Below is the code to paste on your site, adapting it to your needs:

YOUR_EMAIL_SELECTOR — replace with the CSS selector of the element you want to change on your page.

If multiple elements match the selector, make sure you’re targeting the right ones. You can use my PROANALYTICS extension, which highlights all elements on the page matching the selector.

your_email_class — specify a class for styling the new element (optional).
Replace adwords@domain.com and facebook@domain.com with your actual emails.

javascript

<script>
  var utmSource = {{URL - utm_source}};
  var utmMedium = {{URL - utm_medium}};

  var selector = 'YOUR_EMAIL_SELECTOR';
  var newElement;

  if (utmSource === "google" && utmMedium === "cpc") {
    newElement = '<a class="your_email_class" href="mailto:adwords@domain.com">adwords@domain.com</a>';
  } else if (utmSource === "facebook" && utmMedium === "cpc") {
    newElement = '<a class="your_email_class" href="mailto:facebook@domain.com">facebook@domain.com</a>';
  }

  if (newElement) {
    var currentNode = document.querySelector(selector);
    if (currentNode) {
      currentNode.outerHTML = newElement;
    }
  }
</script>

Step-by-step breakdown of the code:

javascript

var utmSource = {{URL - utm_source}};
var utmMedium = {{URL - utm_medium}};

These lines store the values of the utm_source and utm_medium parameters we previously retrieved using GTM variables.

javascript

if (utmSource === "google" && utmMedium === "cpc") {
  newElement = '<a class="your_email_class" href="mailto:adwords@domain.com">adwords@domain.com</a>';
}

This block checks whether the user came from Google paid traffic. If so, it creates a new HTML element with the correct email address.

The second part of the code does the same for Facebook traffic.

javascript

var currentNode = document.querySelector(selector);
if (currentNode) {
  currentNode.outerHTML = newElement;
}

This block finds the first element on the page that matches the CSS selector and replaces it entirely with the new HTML element we generated.

Now all users who land on your site will see different email addresses based on the source they came from.

Replacing the Email Address Using Sourcebuster.js and Google Tag Manager

If you have a multi-page site, things get a bit more complex. At the current stage, this email replacement only works for users who land directly on the page where the replacement is configured — for example, the “Contact” page.

But if a user comes from an ad to a product page, and then browses to the “Contact” page, the replacement won’t work, because the utm_source and utm_medium URL parameters are no longer present.

To retain the source and medium information, you can use cookies or localStorage.

The script below demonstrates that approach. As before, don’t forget to replace:

YOUR_EMAIL_SELECTOR
your_email_class
Email addresses adwords@domain.com and facebook@domain.com

javascript

<script>
  function getQueryParam(name) {
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.search);
    return results ? decodeURIComponent(results[1]) : null;
  }

  function getUTMParams() {
    var utm_source = getQueryParam("utm_source");
    var utm_medium = getQueryParam("utm_medium");

    if (utm_source && utm_medium) {
      localStorage.setItem("utm_source", utm_source);
      localStorage.setItem("utm_medium", utm_medium);
    }
  }

  function getStoredUTM() {
    return {
      source: localStorage.getItem("utm_source"),
      medium: localStorage.getItem("utm_medium")
    };
  }

  function replaceEmailBasedOnUTM() {
    var utm = getStoredUTM();

    var selector = 'YOUR_EMAIL_SELECTOR';
    var newElement;

    if (utm.source === "google" && utm.medium === "cpc") {
      newElement = '<a class="your_email_class" href="mailto:adwords@domain.com">adwords@domain.com</a>';
    } else if (utm.source === "facebook" && utm.medium === "cpc") {
      newElement = '<a class="your_email_class" href="mailto:facebook@domain.com">facebook@domain.com</a>';
    }

    if (newElement) {
      var currentNode = document.querySelector(selector);
      if (currentNode) {
        currentNode.outerHTML = newElement;
      }
    }
  }

  getUTMParams();
  replaceEmailBasedOnUTM();
</script>

Step-by-step explanation:

javascript

function getQueryParam(name) { ... }

A function that extracts a parameter from the URL.

javascript

function getUTMParams() { ... }

Reads utm_source and utm_medium from the URL (if present) and stores them in localStorage. This allows their use later on pages where these parameters are no longer present.

javascript

function getStoredUTM() { ... }

Retrieves utm_source and utm_medium values from localStorage.

Note: This approach is more complex and doesn't require additional GTM custom variables like in the previous example.

javascript

function replaceEmailBasedOnUTM() { ... }

This function replaces the email element on the page based on the traffic source. If the user came from Google Ads (google / cpc), one email is shown; if from Facebook Ads, another.

javascript

getUTMParams();
replaceEmailBasedOnUTM();

Finally, every time the page loads, we first store the UTM data (if present), and then immediately replace the email address.

This method ensures the replacement works regardless of which pages the user visits during their session.

The solution above is for demonstration purposes. It only covers traffic with UTM parameters. In real-life scenarios, a significant portion of traffic may be unlabeled, e.g., organic traffic from search engines or social media. The source for such traffic is determined using document.referrer.

If your site receives such traffic, be sure to add handling for document.referrer in your script. Otherwise, a user who originally came from Google Ads but later clicked a link in your Facebook group may still see the email address intended for Google Ads.

Replacing the Phone Number on a Website/Landing Page

Typically, phone number replacement is done using call-tracking services, but if you can't use one for any reason, you can do it manually.

All we need to do is replace the replaceEmailBasedOnUTM function from the previous code with a new function called replacePhoneBasedOnUTM, shown below:

javascript

function replacePhoneBasedOnUTM() {
  var utm = getStoredUTM();

  var selector = 'YOUR_PHONE_SELECTOR';
  var newElement;

  if (utm.source === "google" && utm.medium === "cpc") {
    newElement = '<a class="your_phone_class" href="tel:+1234567890">+1 234 567 890</a>';
  } else if (utm.source === "facebook" && utm.medium === "cpc") {
    newElement = '<a class="your_phone_class" href="tel:+0987654321">+0 987 654 321</a>';
  }

  if (newElement) {
    var currentNode = document.querySelector(selector);
    if (currentNode) {
      currentNode.outerHTML = newElement;
    }
  }
}

As you can see — not many changes needed)

Just don’t forget to replace the test phone numbers with your actual ones.

Now all that's left is to count the number of emails/calls for each number — and you can finally calculate ROI for every traffic source. If you have questions or found this article helpful — let me know in the comments.

If you enjoyed this content, subscribe to my LinkedIn page.

I also run a LinkedIn newsletter with fresh analytics updates every two weeks — here’s the link to join.

AdvancedGoogle Tag ManagerJava Script

Author

Maks Hapchuk

Web Analyst, Marketer