使用Google跟踪代码管理器跟踪社交互动

您网站上发生的社交互动清楚地表明了很高的​​用户参与度，因此毫无疑问，我们需要跟踪社交互动。幸运的是’追踪它们非常容易。在这篇博客中，我’ll向您展示如何跟踪与Google跟踪代码管理器的社交互动并将该数据发送到Google Analytics（分析），包括 Facebook喜欢, Twitter推文, LinkedIn 分享s和 销terest的别针.

更新：由于隐私问题，Facebook决定弃用一种特定的解决方案，该解决方案使我们能够跟踪原生Facebook Like Button的点击。因此，不再可能对其进行跟踪。

＃1 Facebook喜欢

让’从最受欢迎的Facebook开始。

在我们潜入之前，需要牢记以下几点：

• 此跟踪方法仅支持嵌入在您网站上的那些按钮。它’s impossible to track all likes 和 shares that happen on other websites.
• 此跟踪方法仅支持 默认的Facebook按钮. 相扑 或任何其他社交共享插件将不会被跟踪。如果使用自定义社交按钮，则应尝试使用默认的GTM单击触发器，或检查该社交共享供应商是否提供内置的Google Analytics（分析）集成。
• 我在本博文中描述的跟踪方法将数据发送给Google Analytics（分析） 社交互动。您不会在Google Analytics（分析）实时报告中看到这些事件。它们将出现在您的社交报告（获取> 社会的 >插件）在24-48小时后。  如果你 wish to send data as events, that’很好。我也将说明该选项。 

 

 

自定义HTML标签– Facebook Listener

为了跟踪Facebook按钮的点击，我们’我需要在GTM，Facebook中创建自定义HTML标签 听众。从标题可以猜到，它将收听网站上发生的Facebook 喜欢按钮交互。侦听器发现点击之后，它将调度dataLayer事件。

那件事真的很重要：我们’将其用作启动Universal Analytics代码的触发器。

顺便说一句，我已经发布了现成的 GTM的Facebook跟踪食谱。随时下载并导入到您的Google跟踪代码管理器容器中。

现在，我将详细说明如何使用Google跟踪代码管理器跟踪Facebook社交互动。首先，让’在GTM中创建一个Facebook Listener标记。

• 标签类型– 自定义HTML
• 标签标题– 的HTML– Facebook Listener. 的HTML stands for 自定义HTML （我希望所有标签保持整洁）。
• 在HTML字段中，粘贴以下代码（它监视页面上的所有Facebook 喜欢按钮并调度dataLayer事件 社交联系 点击发生时）：

  <script>
   FB.Event.subscribe('edge.create', function(targetUrl) {
   dataLayer.push({
   'event': 'socialInteraction', 
   'socialNetwork': 'Facebook', 
   'socialAction': 'Like', 
   'socialTarget': targetUrl
   });
  });
  </script>

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

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

我选择Window Loaded事件是有原因的。仅在以下情况时触发我们的Facebook监听器 所有其他脚本 (including Facebook’s）已加载。这样，我可以确定所有按钮都会被正确跟踪。

但是，那里’s one 但。 如果您的页面需要10秒钟来加载所有脚本，并且访问者单击 喜欢 在他/她访问的第8秒点击按钮，由于Facebook Listener尚未准备好，因此不会跟踪互动。

但是我选择忍受这种缺点，因为我不’希望我的访客开始 喜欢 登陆页面后，​​我的内容立即疯狂起来。

 

让’测试我们的Facebook监听器

现在，让’使用Google跟踪代码管理器’■预览和调试模式，以查找Facebook侦听器是否正常工作。在您的GTM帐户的右上角，点击 预习 纽扣.

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

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

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

然后点击 喜欢 在同一页面上单击并查找 社交联系 预览和调试控制台中的事件，如下面的屏幕截图所示：

那’是的！我们在Google跟踪代码管理器中的Facebook监听器有效！现在继续下一步。

 

自定义触发器

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

在Google跟踪代码管理器中，转到“触发器”并点击  新。使用以下设置创建触发器：

 

三个变量

如您所知，当访问者单击LIKE按钮时，FB Listener会创建一个dataLayer事件。您可能不知道的是，它还提供了其他数据：

看到 社交网络，socialAction 和 socialTarget？我们可以将该数据传递给Google Analytics（分析）。但是首先，我们需要在GTM中创建3个变量（否则将赢得Google跟踪代码管理器’无法识别这些数据点）。

去 变数 在GTM帐户中，并使用以下设置创建3个变量：

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

另外，请记住，数据层变量名称区分大小写，因此请确保您’ve entered 社会行为 代替 社会行动。

 

Google Analytics（分析）标签

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

1. 视窗已载入 事件发生。
2. 自定义HTML Facebook侦听器标签触发。
3. 访客单击“喜欢”按钮。
4. Facebook Listener会发现点击并创建一个 社交联系 dataLayer事件（用作触发器）
5. 触发并启动Google Analytics（分析）标签。

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

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

如您所见，所有三个变量都用作 网络，行动和行动目标 Google Analytics（分析）社交代码中的值。自从我用过 社会的 曲目类型，全部为“喜欢”按钮’s interactions will appear not in 事件s reports, but rather in 取得> 社会的 > Plugins.

Feel free to change track type to 事件, if you wish. 在 that case, you’能够查看GA实时报告中的事件。

如果你’想知道为什么我进入{{–GA UA}}中的“跟踪ID”字段，请阅读Google撰写的有关 用户定义的常量变量 and why you should 总是 使用它们。另外，考虑使用 Google Analytics（分析）设置变量.

 

测试

如果你 chose 社会的 作为Google Analytics（分析）跟踪类型，数据将在24-48小时内显示在Google Analytics（分析）中 社交插件报告 （收购> 社会的 > Plugins). They won’在GA实时报告中不可见。

如果你 chose 事件 作为Google Analytics（分析）跟踪类型，然后查看Google Analytics（分析）实时报告，以查看是否将Facebook 喜欢按钮点击正确地传递给了GA。

 

＃2。 Twitter推文

使用Google跟踪代码管理器跟踪Twitter社交互动的原理与Facebook相同：

1. Twitter自动事件侦听器正在监视页面是否 鸣叫/转发 纽扣 clicks.
2. 访客点击社交按钮后，听众会分派 社交联系 dataLayer事件以及相应的数据。
3. 那 event is used as a trigger for Universal Analytics social tag to fire.

如果你 have already implemented Facebook Tracking (described in the #1 chapter of this guide), then catching Twitter social interactions will be easy peasy.

您会看到，唯一需要添加的是Twitter自动事件侦听器。其他一切都是可重用的。看一下下面的方案：

当访客单击Twitter按钮时，自动事件侦听器将触发使用相同结构（例如Facebook）的数据层事件：

• 事件’s title is 社交联系
• 对于每个事件，我们都会获得以下数据点：
  • 社交网络
  • 社会行为
  • socialTarget

为什么这有帮助？有两个原因：

1. 我们在本指南第一章中创建的触发器正在倾听 所有 社会互动 事件。因此，我们无需创建另一个触发器，因为我们可以轻松地重用该触发器。
2. Universal Analytics社交标签（在本指南的第1章中创建）正在使用三个数据层变量：{{socialNetwork}}，{{socialAction}}，{{socialTarget}}。 真是巧合！ -Twitter自动事件也提供了这些相同的数据点，因此我们不需要为Twitter创建其他Google Analytics（分析）标记。

这种情况是我在Google跟踪代码管理器中喜欢的事情之一。如果配置正确，它将使您减少不必要的标签，触发器或变量的数量。在这种情况下，我们要做的就是为每个社交网络创建一个单独的数据输入–听众。其余的 机制 对于两个社交网络都是统一的。

 

在我们继续之前

这里有几件事要牢记：

• 此跟踪方法仅支持嵌入在您网站上的那些按钮。它’无法追踪其他网站上发生的所有推文，转发等。
• 此跟踪方法仅支持 默认的Twitter按钮。将不会跟踪AddThis，Sumo或任何其他社交共享插件。如果使用自定义社交按钮，则应尝试使用默认的GTM单击触发器，或检查社交共享供应商是否提供内置的Google Analytics / GTM集成。
• 当用户单击您网站上的“推文”按钮时，会出现一个小窗口（一个人可以在其中向其推文添加一些文本）。不幸的是’无法追踪某个人是否最终发布了他的推文。请记住，我们可以跟踪您网站上嵌入的按钮。我们 不能 跟踪小窗口中的按钮（因为它’超出您的网站）。因此，在这种情况下，您可以说我们’ll track visitors’ 发推文的意图 而不是实际的推文。
  
• 跟踪方法我’本博客文章中所述将数据发送给Google Analytics（分析） 社交互动，因此您不会在Google Analytics（分析）实时报告中看到这些事件。它们将出现在您的社交报告（获取> 社会的 >插件）在24-48小时后。如果您希望将这些互动作为Google Analytics（分析）事件发送，只需选择  事件 作为Universal Analytics代码中的“跟踪类型”，然后输入以下选项：
  • 事件 Category: 社会的
  • 事件 Action: {{dlv– 社交网络}}: {{dlv– 社会行为}}
  • 事件 Label: {{dlv– socialTarget}}

 

自定义HTML标签– Twitter 听众

为了跟踪Twitter与Google跟踪代码管理器的社交互动，我们’将需要创建一个自定义HTML标记，即Twitter侦听器，该标记将监视网站上发生的Twitter按钮交互。听众发现点击后，它将创建一个 社交联系 dataLayer事件。

顺便说一句，我已经发布了现成的 适用于GTM的Twitter跟踪食谱。它’与本指南中提到的其他社交网络实现完全兼容。

几分钟之内即可免费下载并导入到Google跟踪代码管理器容器中。

好吧，让’在GTM中创建一个Twitter侦听器标签。

• 标签类型– 自定义HTML
• 标签标题– 的HTML– Twitter Listener. 的HTML stands for 自定义HTML （我喜欢按顺序保留所有标签）。
• 在HTML字段中粘贴以下代码：

  <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>

• 在  触发方式 部分，单击整个块：
  
  … 和 choose 视窗已载入 触发（我们’已经在Facebook中使用过’s example)
  将其分配给新创建的Twitter Listener’s custom HTML tag.

 

测试

如果你 chose 社会的 作为Google Analytics（分析）跟踪类型，数据将在24-48小时内显示在“社交插件”报告（获取> 社会的 >插件）。它们在GA实时报告中不可见。

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

您是否厌倦了阅读此博客文章，了解如何与Google跟踪代码管理器跟踪社交互动？如果是，请不要’别忘了在此帖子上加上书签，以后再回来。

 

 

 

#3. Linkedin 分享s

与Twitter和Facebook按钮不同，可以使用默认GTM单击触发器来跟踪Linkedin共享按钮。因此，我们不’这里不需要自定义自动事件监听器。

 

调查中

首先，让’检查我们如何准确识别Linkedin按钮点击。为了这“investigation” you’ll need to:

• 启用所有内置的与点击相关的变量：例如单击类，单击ID等。
• 创建一个通用的Click触发器，以监听所有元素的所有点击：
  

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

Click 领英 分享 纽扣 你呢’ll notice a gtm.click GTM预览和调试控制台中的事件。点击并打开 变数 标签。仔细查看所有与点击相关的变量及其值。哪一个最独特？

显然，它’s单击ID。其他人要么太笼统（例如“Share”），或者根本没有价值。那么接下来我们该怎么做？创建带有条件的点击触发器 点击ID等于li_ui_li_gen_1500498784048_0-标题文字， 对？

错误。

Turns out 领英 分享 纽扣 consists of several inner elements with different IDs:

• 如果你 clicked the 领英 logo of that 分享 纽扣, Click ID value would be li_ui_li_gen_1500498784048_0-徽标 （这些随机数在您的情况下会有所不同）
• 如果你 clicked the word “Share”，其点击ID为 li_ui_li_gen_1500498784048_0-标题文字
• 分享 count bubble’s Click ID is li_ui_li_gen_1500498784056_1-内容.

因此，创建条件 等于 在这里不是一个选择。我们需要在这些点击ID中找到一些共同点，我会毫不犹豫地’m choosing li_ui_li_gen_ 。它’s是一个非常独特的字符串，可以使我们将Linkedin按钮的点击与网站上发生的任何其他点击区别开来。

总结一下，触发’的条件应该是 点击ID包含li_ui_li_gen_ .

 

社交互动标签

接下来，您有两个选择，用于跟踪与Google Tag Manager的Linkedin社交互动。

第一个是创建另一个Universal Analytics 社会的标签，该标签将在先前创建的click触发器调度数据层事件时触发。标签’s settings would be:

• 曲目类型： 社会的
• 社交网络： 领英
• 社会行为： 分享
• 社会目标： {{Page URL}}（或{{Page Path}}

但是我不’t个人推荐此选项，因为’是我口袋里更好的一个。

由于我们已经创建了一个 社交联系 触发和 社交联系 通用Analytics（分析）标签，为什么不’我们重用那个吗？还记得我们对Facebook和Twitter按钮点击所做的事情吗？

为什么不’我们在这里添加Linkedin互动吗？我们需要做的就是在访问者单击Linkedin 分享按钮时触发另一个dataLayer事件。我们’ve已经创建了一个点击触发器，现在它’是时候使用JavaScript。使用以下代码创建自定义HTML标记：

<script>
window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'socialInteraction', 
 'socialNetwork': 'Linkedin', 
 'socialAction': 'Share', 
 'socialTarget': window.location.href
 }); 
</script>

它使用其他数据触发数据层事件：

• 事件 name: 社交联系（就像使用Facebook和Twitter按钮一样）
• 社交网络： 领英
• 社会行为： 分享
• 社会目标： 访客所在页面的URL。

事件’的结构与Twitter或Facebook自动事件侦听器触发的结构相同，因此，当访问者单击Linkedin按钮时，其数据层事件将被自定义触发器（socialInteraction）捕获，然后将其数据传输到Universal Analytics社交标签。

如果您的网站包含上述所有3个社交网络（Facebook，Twitter和Linkedin）的社交共享按钮，则跟踪工作流应如下所示：

Here are the complete settings of the 自定义HTML标签which fires when a visitor clicks 领英 分享 纽扣:

顺便说一句，我已经发布了现成的 适用于GTM的Linkedin跟踪食谱。它’与本指南中提到的其他社交网络跟踪方法完全兼容。

几分钟之内即可免费下载并导入到Google跟踪代码管理器容器中。

测试

如果你 chose 社会的 作为Google Analytics（分析）跟踪类型，数据将在24-48小时内显示在“社交插件”报告（获取> 社会的 >插件）。它们在GA实时报告中不可见。

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

根据经验，不仅要测试Linkedin共享按钮的点击次数，还要仔细检查以前创建的Facebook和Twitter标签。 S＃it发生了，有时新的实现可能会破坏当前的实现。

如果你’厌倦了阅读本指南，了解如何使用Google跟踪代码管理器跟踪社交互动，请不要’别忘了为该链接添加书签，以后再回来。

 

＃4。 销terest的别针

最后但并非最不重要的是，Pinterest固定。也可以使用默认的GTM点击触发器来跟踪它们。

 

One more 调查

首先，让’检查我们如何准确识别Pinterest按钮的点击。

• 如果你 skipped the 3rd chapter of this blog post (Linkedin), enable all built-in click-related variables: e.g. Click Classes, Click ID, etc.
• 还有，如果你没有’已经创建一个通用的Click触发器来监听 所有元素的所有点击：
  

现在，启用“预览和调试”模式，并导航到嵌入“ 销terest的 销”按钮的站点。您将在浏览器底部看到一个调试控制台，其中显示有关标签的详细信息，包括其触发状态和正在处理的数据。

单击固定按钮，您’ll notice a gtm.click GTM预览和调试控制台中的事件。点击并打开 变数 标签。仔细查看所有与点击相关的变量及其值。哪一个最独特？

这回’s Click Classes:

就我而言，“点击类别”值是 PIN_1500579699716_button_pin PIN_1500579699716_保存PIN_1500579699716_tall 。请记住，这些随机数在每一页上都不同，因此您不应该’在您的情况下不要依赖它们。实际上，您应该避免使用它们。

代替 包含 条件，让’使用正则表达式。这里’s我们的Pinterest单击触发器应如何显示。

这个正则表达式是什么意思？ I’请将此触发条件设置为仅在点击类别时对这些点击触发 包含 PIN_ *任何* _button_ 。在正则表达式中 。* (点星号）的意思 任何东西. 从字面上看。它 may be one symbol, it may also be a hundred letters, you name it.

我为什么用 PIN_ *任何* _button_ 代替 PIN_ *任何* _button_pin? 销terest的提供了各种按钮，例如“关注”或“固定”，并且它们使用不同的点击类别。 跟随 纽扣’s class is PIN_ *任何* _button_follow 而 销 纽扣’s class is PIN_ *任何* _button_pin。我的情况’触发器中使用的ve涵盖了所有Pinterest按钮。但是，如果您愿意，可以为每个按钮创建单独的触发器，并触发单独的数据层事件。 下载Pinterest跟踪GTM食谱 你呢’ll see what I mean.

 

社交互动标签

Next, you have two options how to track 销terest的 social interactions with Google Tag Manager (just like with 领英 分享 纽扣).

第一个是创建一个Universal Analytics 社会的代码，该代码在先前创建的点击触发器分派时触发。标签’s settings would be:

• 曲目类型： Social
• 社交网络： Pinterest
• 社会行为： Pin
• 社会目标： {{Page URL}}（或{{Page Path}}

但是您已经在这里了解了我的观点。我全心全意，所以我们’ll reuse the 社交联系 trigger 和 社交联系 Universal Analytics tag. 如果你 carefully followed all steps of this guide, your social interaction tracking workflow looks like this:

让’s将Pinterest添加到聚会中！现在我们’当访问者单击Pinterest 销按钮时，将触发另一个dataLayer事件。我们’ve已经创建了一个点击触发器，现在它’是时候使用JavaScript。使用以下代码创建自定义HTML标记：

<script>
window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'socialInteraction', 
 'socialNetwork': 'Pinterest', 
 'socialAction': 'Pin', 
 'socialTarget': window.location.href
 }); 
</script>

它使用以下数据触发数据层事件：

• 事件 name: socialInteraction（就像Facebook，Twitter和Linkedin按钮一样）
• 社交网络： Pinterest
• 社会行为： Pin
• 社会目标： 访客所在页面的URL。

事件’的结构与Twitter，Facebook和Linkedin示例相同。

如果你 have all 4 social 纽扣s embedded on your site, the entire tracking workflow will look like this:

以下是自定义HTML标记的完整设置，当访问者单击Pinterest 销按钮时，该标记就会触发：

请记住，我们’仅在此处跟踪意图。我们无法确定用户是否成功固定了您的内容。

顺便说一句，我已经发布了现成的 GTM的Pinterest跟踪食谱。它’与本指南中提到的其他社交网络实现完全兼容。

几分钟之内即可免费下载并导入到Google跟踪代码管理器容器中。

让’s test

如果你 chose 社会的 作为Google Analytics（分析）跟踪类型，数据将在24-48小时内显示在“社交插件”报告（获取> 社会的 >插件）。它们在GA实时报告中不可见。

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

现在，进行最终检查并测试所有4个社交按钮。可能其中一些可能已被破坏。你知道，发生了-

 

 

跟踪与Google跟踪代码管理器的社交互动：结论

在这份长篇指南中，我’ve解释了如何跟踪4个不同的社交网络按钮：Facebook，Twitter，Linkedin和Pinterest。创建自定义自动事件监听器所需的前两个监听器将监视访问者的活动并在有人单击“赞”或“推特”按钮时调度事件。然后，该数据通过Universal Analytics社交标签传递到Google Analytics（分析）。

可以使用默认的GTM点击触发器来跟踪Linkedin和Pinterest按钮。

关于使用Google跟踪代码管理器跟踪社交互动的另一点很棒的事情是可重用性。我们’ve创建了4种不同的方法来分别跟踪每个社交按钮，但是它们的数据是通过一个Universal Analytics社交标签进行传输的。

每个社交网络具有4个不同的UA标签也可以正常工作。但就我们而言，我们设法优化了整个过程。然后’s awesome!