Programmatically determine if user arrived via an AdWords link

Question

I'd like to change my site's email address displayed to an end-user if they arrived via an AdWords link. My basic understanding as an advertiser is that there is a cookie Google checks to register a "conversion" action, so I'm wondering if I can check for that programmatically using client-side JavaScript?

I know that, generally speaking, you can append some data to a landing URL via AdWords itself, but I'm worried that would disappear the second they moved to another internal page. So, if my displayed email address went from info@example.com to adwords@example.com, it would change back as soon as the user navigated to another page on the site?

I am tracking click events on mailto: links, but I've noticed a number of leads come in where people must have manually copy/pasted or keyed in the email address displayed, because there is no corresponding conversion in AdWords for these email leads.

I'd like to be able to have some script run on page load and say something like:

if (adwordsVistor) {
  $('.email-link').html('adwords@example.com');
}

I know AdWords itself does this with for Google Forwarding Numbers (which change any phone links on your site using some of their JavaScript), so I'm kind of wondering if I can create a similar functionality for email addresses.

Answer 1

Admittedly I don't really know anything about AdWords. From a javascript programming perspective this should not be difficult however.

I know that, generally speaking, you can append some data to a landing URL via AdWords itself

Doing some research I found this article Intro to UTM Parameters and Best Practices. This lead me to Google's article Custom campaigns.

There are five UTM parameters that we can include, three of them are required. Once we set them up there are two basic ways we can use them to keep track of the fact that the visitor came via AdWords itself after they leave the landing page.

1. Capture the incoming UTM parameters on the server and set a SESSION value that lets all other pages know at request time that this "visit" was started by the user coming to the site via AdWords (SESSION values depend on the server technology you are using but are well documented).

   At this point (again depending on server technology) we can modify all our contact email addresses (or anything else for that matter) before sending the source for the page to the browser. This means that there would never appear any other version of the email address in the actual source of the page for that session (no way to "view page source" and see what the email address used to be).

2. Capture the incoming UTM parameters in the browser and use javascript to "remember" that the visit started via AdWords and modify the email addresses accordingly. Since this is what you requested, the rest of this answer will focus on this method.

Javscipt Answer

Step 1:

Get the UTM parameters from the URL.

For this we are going to use the URLSearchParams API. There is a polyfill for the stable versions of Safari, Edge, and IE. Since utm_campaign is a required parameter, we can rely on it's existence (or lack there of) to know if the visitor got here via AdWords like so:

var params = new URLSearchParams(location.search),
    adwordsVistor = !!params.get('utm_campaign'); // adwordsVistor is now a boolean

Now your if statement works:

if (adwordsVistor) {
    $('.email-link').html('adwords@example.com');
}

But what about all the other pages?

Step 2:

"Remember" the state of adwordsVistor.

For this we are going to use Document.cookie. We will set a cookie to remember the state of adwordsVistor like so:

document.cookie = 'adwordsVistor=' + adwordsVistor;

Since we did not set an expiration on the cookie it is a session cookie and will be removed when the browser closes. This is important since we might want to know if the user comes back not via AdWords.

Step 3:

Retrieving the cookie.

There are many posts discussing using cookies with javascript. For this example we will use the simple getCookie function found in this post.

Step 4: TLDR;

Putting it all together.

Now that we have all the pieces let's put them all together. Put the following code into a javascript file or a script block that is included in every page. Also make sure to include the URLSearchParams polyfil mentioned above (so that we work in Uncle Bill's IE).

function getCookie(name) {
    var start = document.cookie.indexOf(name + "="),
        len = start + name.length + 1;

    if ((!start) && (name != document.cookie.substring(0, name.length))) {
        return null;
    }

    if (start == -1) return null;

    var end = document.cookie.indexOf(';', len);

    if (end == -1) end = document.cookie.length;

    return unescape(document.cookie.substring(len, end));
}

$(function() {
    var params = new URLSearchParams(location.search),
        avCookie = getCookie('adwordsVistor'),
        adwordsVistor = !!params.get('utm_campaign') || !!avCookie; // adwordsVistor is now a boolean

    document.cookie = 'adwordsVistor=' + adwordsVistor;
    if (adwordsVistor) {
        switch(avCookie) {
            case 'campaign_1':
                $('.email-link').html('campaign_1@example.com');
                break;
            case 'campaign_2':
                $('.email-link').html('campaign_2@example.com');
                break;
            default:
                $('.email-link').html('adwords@example.com');
        }
    }
});

EDIT:

Added using different emails for diffent campaigns