javascript - 以编程方式确定用户是否通过 AdWords 链接到达

Question

如果最终用户通过 AdWords 链接到达，我想更改显示给他们的网站电子邮件地址。作为广告商，我的基本理解是 Google 检查了一个 cookie 来注册“转化”操作，所以我想知道我是否可以使用客户端 JavaScript 以编程方式检查它？

我知道，一般来说，您可以通过 AdWords 本身将一些数据附加到登录 URL，但我担心一旦他们移动到另一个内部页面，这些数据就会消失。因此，如果我显示的电子邮件地址从 info@example.com 变为 adwords@example.com，一旦用户导航到另一个页面，它就会变回来网站？

我正在跟踪 mailto: 链接上的点击事件，但我注意到许多线索出现在人们必须手动复制/粘贴或键入显示的电子邮件地址的地方，因为有这些电子邮件线索在 AdWords 中没有相应的转化。

我希望能够在页面加载时运行一些脚本，并说类似的话:

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

我知道 AdWords 本身会为 Google 转接电话号码执行此操作(它使用他们的一些 JavaScript 更改您网站上的任何电话链接)，所以我想知道我是否可以为电子邮件地址创建类似的功能。

Answer 1

诚然，我对 AdWords 一无所知。然而，从 JavaScript 编程的 Angular 来看，这应该不难。

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

通过一些研究，我找到了这篇文章 Intro to UTM Parameters and Best Practices .这让我看到了谷歌的文章 Custom campaigns .

我们可以包含五个 UTM 参数，其中三个是必需的。 设置完成后，我们可以通过两种基本方法使用它们来跟踪访问者离开目标网页后通过 AdWords 本身访问的事实。

1. 在服务器上捕获传入的 UTM 参数并设置一个 SESSION 值，让所有其他页面在请求时知道此“访问”是由通过 AdWords 访问网站的用户开始的(SESSION 值取决于您正在使用但有据可查的服务器技术)。

   此时(再次取决于服务器技术)我们可以在将页面源发送到浏览器之前修改我们所有的联系电子邮件地址(或与此相关的任何其他内容)。这意味着该 session 页面的实际源代码中永远不会出现任何其他版本的电子邮件地址(无法“查看页面源代码”并查看电子邮件地址曾经是什么)。

2. 在浏览器中捕获传入的 UTM 参数，并使用 javascript 来“记住”访问是通过 AdWords 开始的，并相应地修改电子邮件地址。由于这是您的要求，因此本回答的其余部分将重点介绍此方法。

Javascipt 答案

第 1 步:

从 URL 中获取 UTM 参数。

为此，我们将使用 URLSearchParams应用程序接口(interface)。有一个polyfill适用于 Safari、Edge 和 IE 的稳定版本。由于 utm_campaign 是必需参数，我们可以依靠它的存在(或不存在)来了解访问者是否通过 AdWords 到达这里:

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

现在你的 if 语句可以工作了:

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

但是所有其他页面呢？

第 2 步:

“记住”adwordsVistor 的状态。

为此，我们将使用 Document.cookie .我们将设置一个 cookie 来记住 adwordsVistor 的状态，如下所示:

document.cookie = 'adwordsVistor=' + adwordsVistor;

由于我们没有为 cookie 设置过期时间，因此它是一个 session cookie，将在浏览器关闭时被删除。这很重要，因为我们可能想知道用户是否通过 AdWords 返回。

第 3 步:

检索 cookie。

有很多帖子讨论在 javascript 中使用 cookie。对于此示例，我们将使用此 post 中的简单 getCookie 函数.

第 4 步:TLDR；

把它们放在一起。

现在我们已经有了所有的部分，让我们把它们放在一起。将以下代码放入每个页面中包含的 javascript 文件或脚本 block 中。 还要确保包含上面提到的 URLSearchParams polyfil(以便我们在比尔叔叔的 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');
        }
    }
});

编辑:

为不同的事件添加了使用不同的电子邮件地址