完整指南：Google跟踪代码管理器+ Twitter

如果你’重新使用Twitter作为营销工具，您想衡量结果，对吗？但是如何跟踪诸如“Tweet”按钮点击？那么Twitter转换呢？一切都像这样工作–您向开发人员发送了一封电子邮件，其中要求应跟踪的内容，并且他需要数周的时间才能完成任务。但是现在不行了！我向您提供了完整的Google跟踪代码管理器Twitter指南。

本博客文章假定您具有Google跟踪代码管理器标签，触发器，变量和数据层的工作知识。’re a beginner –我建议检查这些 免费的Google跟踪代码管理器课程.

 

在这篇博客中，我’将涵盖三个主要主题：

1. 如何使用Google跟踪代码管理器跟踪Twitter共享。
2. 如何使用Google跟踪代码管理器实施Twitter再营销（Pixel）
3. 使用Google跟踪代码管理器进行Twitter转化跟踪。

 

1.使用Google跟踪代码管理器跟踪Twitter共享

在本章中，我’将向您展示如何跟踪网站上Twitter按钮的点击（推特，关注），以及如何将这些数据作为社交互动自动发送到Google Analytics（分析）。

 

在我们继续之前

这里有几件事要牢记：

• 此跟踪方法仅支持嵌入在您网站上的那些按钮。 ’无法追踪其他网站上发生的所有推文，转发等。您只能追踪发生的互动 在您自己网站的范围内 已安装Google跟踪代码管理器。
• 此跟踪方法仅支持 默认的Twitter按钮。将不会跟踪AddThis，Sumo或任何其他社交共享插件。如果是自定义社交按钮，则您应该尝试跟踪标准按钮/链接点击，或者检查社交按钮供应商是否提供内置的Google Analytics（分析）集成。
• When a user clicks 鸣叫 button on your website, a small window appears (where a person can add some text to his/her tweet). Unfortunately, it’无法追踪某个人是否最终发布了他的推文。请记住，我们可以跟踪您网站上嵌入的按钮。我们 不能 跟踪小窗口中的按钮（因为它’超出您的网站）。因此，在这种情况下，您可以说我们’ll track visitors’意图发布而不是实际发布。
  
• 跟踪方法我’本博客文章中所述将数据发送给Google Analytics（分析） 社交互动。您不会在Google Analytics（分析）实时报告中看到这些事件。它们将出现在您的社交报告（获取> 社会的 >24-48小时后插入。） 如果你 wish send data as events, I’我还将解释该选项。

 

 

自定义HTML标签– Twitter Listener

为了跟踪Twitter按钮的点击，我们’我需要在GTM中创建自定义HTML标签–Twitter侦听器。从标题可以猜到，它将收听Twitter按钮’网站上发生的互动。侦听器单击后，将创建一个dataLayer事件。

那 dataLayer事件 is really important – we’将其用作触发Google Analytics（分析）代码的触发器。

顺便说一句，我已经发布了现成的 适用于GTM的Twitter跟踪食谱。几分钟之内即可免费下载并导入到Google跟踪代码管理器容器中。

现在，我将详细解释Twitter跟踪的工作原理。让’在GTM中创建一个Twitter侦听器标签。

• 标签类型– Custom HTML
• 标签标题– 的HTML– Twitter Listener. 的HTML 代表 自定义HTML （我喜欢按顺序保留所有标签）。
• 在HTML字段中粘贴以下代码（它监视页面上的Twitter按钮并触发dataLayer事件 社交联系Â如果单击）：

  <script>
  if (typeof twttr !== 'undefined') {
   twttr.ready(function (twttr) {
   twttr.events.bind('tweet', tweetIntentToAnalytics);
   twttr.events.bind('retweet', retweetIntentToAnalytics);
   twttr.events.bind('favorite', favIntentToAnalytics);
   twttr.events.bind('follow', followIntentToAnalytics);
   });
  }
  function clickEventToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'click',
   'socialTarget': window.location.href
   });
  }
  function tweetIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'tweet',
   'socialTarget': window.location.href
   });
  }
  function retweetIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'retweet',
   'socialTarget': window.location.href
   });
  }
  function favIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'favorite',
   'socialTarget': window.location.href
   });
  }
  function followIntentToAnalytics() {
   dataLayer.push({
   'event': 'socialInteraction',
   'socialNetwork': 'Twitter',
   'socialAction': 'follow',
   'socialTarget': window.location.href
   });
  }
  </script>

• 在一个 触发ing 部分，单击整个块：
  
  … 和 choose 窗口已加载 trigger. 如果你 don’t have one –创造它。扳机’的配置应如下所示：
  将其分配给新创建的Twitter Listener’s custom HTML tag.

为什么没有’我是否选择常规的网页浏览触发器？我经常注意到，如果听众无法正常工作’在页面加载的早期阶段启动（Twitter按钮未完成加载时）。

我选择Window Loaded事件是有原因的。仅当页面上的所有其他脚本（包括Twitter按钮）均已加载时，它才会触发我们的Twitter侦听器。这样，我可以确信所有按钮都会被正确跟踪。

但是，那里’s one 但。 如果你 page takes 10 seconds to load all scripts 和 visitor clicks 鸣叫 在他/她访问的第8秒点击按钮，则不会跟踪该互动，因为尚未启动Twitter Listener。

但是我选择忍受这个缺点，因为我不’希望我的访客在登陆页面后立即开始疯狂共享内容。

 

让’测试我们的Twitter侦听器

现在，让’使用Google跟踪代码管理器’s的预览和调试模式，以了解Twitter监听器是否适用于我们。在您的GTM帐户的右上角，展开发布按钮’s options 和 click “Preview”.

启用预览模式后，导航到发布表单的站点，您将在浏览器底部看到一个调试控制台，其中显示有关标签的详细信息，包括其触发状态和正在处理的数据。

该控制台窗口仅在您预览站点时出现在您的计算机上，其他网站访问者看不到。它看起来应该像这样：

首先，检查Twitter侦听器是否在Window Loaded事件上触发。在左侧，单击 窗口已加载。 它看起来应该像这样：

然后点击 鸣叫 在同一页面上单击并查找 社交联系 event in 预习 和 debug console. Like in the screenshot below:

那’是的！我们在Google跟踪代码管理器中的Twitter监听器非常完美！继续进行下一步。

 

Custom 触发

现在，我们应该创建一个可以识别dataLayer事件的GTM触发器 社交联系. It’对于我们的Google Analytics（分析）标签而言至关重要。

在 Google Tag Manager, go to 触发s 和 hit 新。使用以下设置创建触发器：

 

三个变量

如您所知，单击Twitter按钮时，Twitter侦听器将创建dataLayer事件。您可能不知道的是，它还提供了其他数据：

看到 socialNetwork，socialAction 和 socialTarget？我们可以将该数据传递给Google Analytics（分析）。但首先我们需要在GTM中创建3个变量（否则Google Tag Manager赢得了’无法识别这些数据点）。

所以去 变数 在GTM中创建并使用以下设置创建3个变量（您可以’在Google Analytics（分析）标签中将需要它们）：

万一你’想知道是什么 dlv 每个变量的标题均值– it’s 数据层变量。 我喜欢保持标签，触发器和变量的顺序。它使使用GTM更加容易。

 

Google Analytics（分析）标签

最后一步–创建Google Analytics（分析）标签。仅在完成以下顺序时才会触发：

1. 发生窗口加载事件。
2. 自定义HTML Twitter Listener标记触发。
3. Visitor clicks 鸣叫 button.
4. Twitter侦听器发现点击并创建 社交联系 dataLayer事件。
5. 触发 社交联系 触发并启动Google Analytics（分析）标签。

所有步骤都是 必填 并且必须完成 按照这个确切的顺序。

转到GTM中的标签并点击 新的 按钮。选择通用Analytics（分析）标签类型，然后添加以下设置：

如您所见，所有三个变量都用作 网络，行动和行动目标 Google Analytics（分析）标签中的值。自从我用过 社会的 跟踪类型，所有Twitter按钮’互动将不会出现在“事件”报告中，而是会出现在 取得> 社会的 > Plugins.

如果愿意，可以随时将曲目类型更改为“事件”。这样的话’ll be able to see 大事记in GA Real-time reports.

如果你’想知道为什么我进入{{–GA UA}}中的“跟踪ID”字段，请阅读Google撰写的有关 用户定义的常量变量 以及为什么你应该 总是 使用它们。

 

最后一个考试

如果你 chose 社会的 作为Google Analytics（分析）跟踪类型，数据将在24-48小时内显示在“社交插件”报告（获取> 社会的 > Plugins).

如果你 chose 事件 作为Google Analytics（分析）跟踪类型，然后使用Google Analytics（分析）实时报告查看Twitter按钮的点击是否正确传递到了GA。

 

你知道吗？

我还准备了现成的Google跟踪代码管理器模板，可让您跟踪 Facebook喜欢, Pinterest别针 和 关联股票 在您的网站上。也尝试一下！

 

 

 

 

2.使用Google跟踪代码管理器进行Twitter再营销

Google跟踪代码管理器Twitter指南的第二章专门介绍了再营销。自2016年9月起，’借助现成的Twitter通用网站代码模板，使用Google跟踪代码管理器跟踪Twitter转化变得更加容易。

此外，借助代码的事件参数，您只需单击几下即可管理高级转化跟踪（有关转化的更多信息–在下一章中）。

万一你’由于对Twitter再营销不熟悉，它的工作方式类似于Google Adwords再营销或Facebook Pixel，访问者在您的网站上登陆并获得唯一的Cookie（存储在他/她的浏览器中）。该cookie使Twitter能够自动识别该人并通过广告重新定位他/她。

使用Google跟踪代码管理器，您可以轻松添加Twitter通用网站标记，从而开始增加自定义受众。

 

获取Twitter PixelID

首先你’将需要登录到您的Twitter帐户，单击您的个人资料缩略图，然后导航到 Twitter广告.

When you reach your Twitter广告, click Tools 和 select Conversion Tracking. 如果你 haven’如果没有设置任何转换，您应该会看到以下消息：

当您将标签添加到网站上时，Twitter通用网站标签状态将得到验证 Twitter将至少接收一小部分数据Â来自您的网站。您’系统会要求您将通用网站标签添加到 每页 您网站的信息（关闭之前）</body>标签）。示例代码如下所示：

由于Google跟踪代码管理器提供了现成的Twitter标记，因此您所需的只是Twitter Pixel ID。你可以在这里找到它：

复制它.GTM中的每个Twitter标记中都需要此ID–就像每个Google Analytics（分析）标记都需要GA跟踪ID（UA-XXXXXX-XX）一样。让’为Twitter像素ID创建一个常量变量（因为我们’至少使用几次）。

在Google跟踪代码管理器中，转到变量并创建新的用户定义变量：

• 标题– 不变– Twitter Pixel ID.
• 类型– 不变。
• 值–粘贴Twitter像素ID，例如 aa1x2.

现在打开您的Google跟踪代码管理器帐户并创建一个新代码：

• 标签类型–Twitter通用网站标签。
• 粘贴Twitter像素ID。
• 选择标签事件– 页面预览.
• 在 触发ing section choose – 所有页面.

点击保存并对其进行测试。检查标签的最佳方法是使用Chrome扩展程序– Twitter像素助手。您可以在中了解更多 官方Twitter知识库。一种 附言 在Twitter Ads帐户中，标签状态最多可能需要24小时才能更改为已验证。

做完了！您已经安装了Twitter’的再营销标签。从现在开始，您网站的所有访问者都将从Twitter收到一个第三方Cookie，因此您的再营销受众群体（也就是量身定制的受众群体）将会增加。当那些使用Cookie的访问者浏览Twitter时，他们’ll see your ads.

实际上，您可以通过实施转化跟踪来进一步推动Twitter营销。在下一章中进一步了解它。

 

3.使用Google跟踪代码管理器进行Twitter转化跟踪

The 3rd 和 final chapter of the Google Tag Manager Twitter guide will cover conversion tracking. 如果你’re familiar with Adwords tracking setup process via Google Tag Manager, is particularly the same. All you need to do is to:

1. 在中创建标签 Twitter广告 帐户（做完了！ – It’上一章中所述）。
2. 查找并复制您的像素ID（做完了！ –我已经在上一章中对此进行了描述。
3. 将其粘贴到标签的适当字段中（做完了！ – It’上一章中所述）。
4. 在您要跟踪为转化的某些互动之后，触发代码（或多个代码）触发。

 

Twitter转化跟踪的工作方式与之前介绍的再营销技术类似。您’将在Google跟踪代码管理器中使用相同的Twitter跟踪代码模板，但事件会有所不同。在上一章中，我创建了一个Twitter 页面预览标签，在这一章中，我们’跟踪更精确的互动，例如注册或购买。

对于您想与Twitter进行的每次互动，您都可以’我将需要创建一个单独的GTM Twitter标签。它将使用通用网站代码中的相同跟踪ID像素，但使用不同的代码事件：

此外，每个事件在Google跟踪代码管理器中的触发器也会有所不同。现在，我将向您简要说明如何利用每种事件类型。

 

Twitter事件– View 内容

如果你’重新跟踪博客上的访问者，然后 ViewContent Twitter tag should fire when visitor navigates to a blog post page. 如果你’重新成为电子商务企业的所有者，那么您的 内容 是产品页面。示例代码可能如下所示：

让 me explain:

• 我添加了其他参数– 内容_name。默认情况下，该数据在GTM中不可用，因此您’需要创建一个用户定义的Javascript变量–页面标题（变量类型： Javascript变量，全局变量名： 文件名）。添加其他参数是可选的！如果愿意，可以跳过它们。
• 触发’s（我用于此Twitter标记）的设置为：
  • 标题– 页面预览– Viewed 博客 Post.
  • 类型– 页面预览。
  • 这会触发– 一些页面浏览量
  • 规则– Page Path starts with /帖子/，因为我博客中的所有帖子都包含“/post/” in URL., e.g. //www.toddblog.net/post/konami-code-with-google-tag-manager/.

 

推特活动– 搜索

访客在我的博客上使用搜索时，页面’s URL changes to analyticsmania.com/？s = search_query。所以对于Twitter 搜索 标签I ’将使用具有以下设置的触发器：

• 标题– 页面预览– Used 搜索.
• 类型– 页面预览。
• 这会触发– 一些页面浏览量
• 规则– 页面路径以/？s =开头

 

推特活动– Add To Cart

如果你 own an online store, then this event is pretty important in 要么 der to measure sales funnel. Every e-commerce platform is really different, so it’无法描述一种标准方法来跟踪 已加入购物车Â事件。

最可靠的解决方案是要求开发人员将此交互作为dataLayer事件发送。然后，您可以使用Google跟踪代码管理器捕获该事件，并将其用作启动的触发器 添加到购物车 Twitter标签。

阅读此博客文章找出解决方法 use Data Layer 事件s as 触发s.

 

推特活动– Add to WishList

这个问题与 添加到购物车 大事记– it’不可能写出适合所有在线商店的解决方案。最可靠的解决方案是要求开发人员将此交互作为 dataLayer事件。当然啦’将某项添加到心愿单时，某些在线商店可能会将用户重定向到特定页面。

然后，您可以将Pageview触发器与特定的Page Path模式结合使用。但是在这种情况下，您还有另一个问题–糟糕的用户体验。每次之后将用户重定向到特定页面 已添加到愿望清单 事件可能会由于令人讨厌的行为流而导致销售不佳。

 

推特活动– Initiate Checkout

如果你r checkout process consists of more than one step, then usually step 1 has some unique string in the URL, e.g. sampleshop.com/checkout/step1/some_other_stuff。在这种情况下，您可以将网页浏览触发器与以下规则结合使用（请记住– it’仅是一个例子。在您的情况下，页面路径可能有所不同）：

• 标题– 页面预览– 在itiated Checkout.
• 类型– 页面预览。
• 这会触发– 一些页面视图。
• 规则– Page Pats包含/ checkout / step1 /

 

推特活动– Added Payment 在fo

在两种最常见的情况下，我们可以识别访问者输入的付款信息：

• 他/她访问了具有唯一URL的特定页面。然后，您应该使用Pageview触发器（如我所述 发起结帐 标签）。
• 或者输入付款信息后，URL不会更改。在这种情况下–要求开发人员发送 dataLayer事件，成功保存了付款信息。其实我’d要求添加事件：1.用户开始输入付款信息。 2.用户成功输入信息。这样，我可以看到有多少人在此步骤中退出了我的结帐流程。

相同的原理（Pageview或Data Layer事件）也可以应用于以下Twitter事件：

• 采购。
• 注册。
• 下载。
• 完成注册。

非常有用的信息：  我强烈建议您阅读本指南 使用Google跟踪代码管理器的5种表单跟踪方法。如果您’re want to track 注册 要么 完成注册 Twitter事件。你有机会赢了’t need developer’跟踪表单提交时的输入。

 

设置所有Twitter标签时，请不要忘记对其进行测试：

• 利用GTM’s 预习 和 Debug mode to see if tags fire 当他们想的时候。
• 也使用Chrome插件– Twitter像素助手.

 

Twitter转换跟踪：注意事项

• 数据最多可能需要24小时才能显示在Twitter Ads帐户中（但通常情况下，’的处理速度更快）。
• 输入标签之前“rampage mode”，准备测量计划–真正需要跟踪的列表。它将带来更大的透明度，帮助您提前计划并避免出现不一致的问题。
• 在发布之前进行测试，测试，测试-详细信息。一个微小的错误会导致巨大的问题。

我不会详细介绍如何在Twitter中设置实际的广告系列。您可以观看此视频。

其他有用的资源：

• Twitter网站标签概述.
• Twitter中的高级转换跟踪.

 

Google跟踪代码管理器Twitter指南– Conclusion

您可以使用Twitter和Google跟踪代码管理器来做很多很棒的事情。毫无疑问！

在此Google跟踪代码管理器Twitter指南中，我解释了如何将Twitter营销推向新的高度：

• 追踪Twitter的点击’s 鸣叫 button 和 send these 大事记to Google Analytics. This way you’将会看到您效果最好的内容。
• 如何使用Google跟踪代码管理器创建Twitter再营销受众（也称为量身定制的受众）。
• 如何使用Google跟踪代码管理器中的Twitter通用网站跟踪代码跟踪各种事件/转化。您以后可以根据访问者显示添加内容’您网站上的操作–就像在Google Adwords或Facebook Ads中一样。

我错过了这篇博客文章吗？如果是，请在评论中告诉我！