如何使用Google跟踪代码管理器跟踪AddThis社交共享

在我以前的博客文章中， 如何使用Google跟踪代码管理器跟踪社交互动，我解释了如何监视Facebook，Twitter，Pinterest和Linkedin创建的默认社交共享按钮的各种细微差别。但是，这些跟踪方法不支持Sumo或AddThis之类的第三方社交共享解决方案。但这并不意味着’不可能。在这篇博客中，我’ll演示如何使用Google跟踪代码管理器跟踪AddThis社交共享。

 

什么是AddThis？

添加此是一个内容共享平台。它们提供的工具使在社交网络上共享内容变得更加容易。除此之外，他们还提供 相关文章 小部件 清单建筑 解决方案等。今天’的博客文章仅关注社交共享。

为了将其安装在您的网站上，请将AddThis Javascript代码段放置到所有页面上。请记住 通过GTM实施时，某些功能将无法使用.

 

Google跟踪代码管理器食谱

为方便起见，我创建了一个现成的Google跟踪代码管理器容器模板（也称为GTM食谱）。只需下载它，将其导入您的Google跟踪代码管理器容器，即可立即开始跟踪社交分享。

如果您想更好地了解什么’发生在幕后，继续阅读并学习如何跟踪AddThis社交互动。

 

自定义自动事件监听器

首先，我们’需要使用以下代码创建自定义HTML标签：

<script>
 function addThisEventHandler(evt) {
   switch (evt.type) {
     case "addthis.menu.share":
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         'event': 'socialInteraction',
         'socialNetwork': evt.data.service,
         'socialAction': 'Share',
         'socialTarget': evt.data.url
       });
    break;
   }
}
addthis.addEventListener('addthis.menu.share', addThisEventHandler);
</script>

It’一个使用以下命令构建的自定义自动事件监听器 添加此 JavaScript API。启动后，它将监听通过AddThis社交共享小部件完成的所有共享。发现互动后，它会触发一个名为“数据层”的事件 社交联系 包含以下数据：

• 社交网络 （AddThis支持其中的许多功能）。
• 社会行动 （它的价值永远是 分享).
• 社会目标 （共享的URL）

将此HTML标记设置为在DOM Ready触发器上触发。

如果你’我以前从未使用过DOM Ready Trigger’看起来像：

 

测试＃1

在你之后’创建了自定义HTML标记，将其保存并启用 预览和调试模式。橙色通知栏应出现在您的帐户中。

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

首先，在控制台中单击“ DOM准备就绪”事件，并确保与此事件完全触发了listener标签。

现在，单击AddThis社交共享小部件中的任何按钮（在您的网站上），并仔细查看“预览和调试控制台”’的事件流。做了 社交联系 事件出现了吗？单击它，然后切换到“数据层”选项卡。这是由AddThis自定义自动事件侦听器推送到数据层的确切数据（我们可以将其进一步推送到Google Analytics（分析））：

重要：AddThis侦听器仅捕获共享的意图，而不捕获实际完成的意图。这就是我们可以从AddThis JavaScript API获得的一切。相同的规则适用于默认 Twitter，Linkedin和Pinterest按钮.

触发器和变量

步骤3之1已完成。让’转到实施的第二阶段，如何跟踪Addthis点击。

默认情况下，Google跟踪代码管理器无法识别由自定义自动事件监听器添加的自定义数据和事件，因此您需要做一些额外的工作才能“teach” GTM.

首先，创建一个自定义触发器：

它将在每次 社交联系发生数据层事件。

下一步：变量。让’s返回到AddThis自定义自动事件侦听器。网站访问者单击“共享”按钮后，侦听器将分派具有以下数据的数据层事件：

'event': 'socialInteraction',
'socialNetwork': evt.data.service,
'socialAction': 'Share',
'socialTarget': evt.data.url

我们需要做的是创建三个数据层变量：

• 社交网络
• 社会行为
• socialTarget

不然你赢了’不能在Google跟踪代码管理器帐户中使用它们。

 

测试＃2

重复与测试1中相同的操作：

• 启用/刷新预览和调试模式。
• 导航到实施GTM容器的网站。
• 单击“ 添加此社交共享”小部件中的任何按钮。 社交联系 事件将出现在预览和调试控制台中。

点击 社交联系事件并切换到``变量''选项卡。

您’将会看到所有3个新创建的变量及其值。如果任何变量等于 未定义Â，您可能在变量设置中犯了一个错误。变量名称是区分大小写的字段，因此请确保输入  社交网络， 代替 社交网络.

 

Google Analytics（分析）标签

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

1. DOM准备就绪发生事件。
2. 自定义HTML 添加此 Listener标记将触发。
3. 访客单击AddThis社交共享小组件中的任何按钮。
4. 自定义自动事件监听器会发现点击并创建一个 社交联系ÂdataLayer事件（用作触发器）
5. 触发调度并启动Google Analytics（分析）标签。

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

前往 标签在GTM和命中 新的 按钮。选择通用Analytics（分析）标签类型，然后添加以下设置：

如您所见，所有三个变量都用作 网络，行动和行动目标Google Analytics（分析）社交代码中的值。自从我用过 社会的曲目类型，所有AddThis小部件的交互都不会出现在“事件”报告中，而是出现在 取得> 社会的 > Plugins.

如果愿意，可以随时将曲目类型更改为“事件”。在这种情况下，您将能够在GA实时报告中查看事件。

如果您想知道为什么我在“跟踪ID”字段中输入{{Constant – GA UA}}，请阅读Google撰写的有关以下内容的信息： 用户定义的常量变量以及为什么要这么做 总是 使用它们。另外，请考虑使用 Google Analytics（分析）设置变量.

 

测试＃3

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

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

恭喜你！您已成功学习如何使用Google跟踪代码管理器跟踪AddThis社交共享。任何问题？随时将它们发布在下面的评论部分。

 

结论：如何跟踪AddThis社交分享

您网站上发生的社交互动清楚地表明了很高的​​用户参与度，因此毫无疑问，我们需要跟踪社交互动。在这篇博客中，我’ve解释了如何使用Google跟踪代码管理器跟踪AddThis社交分享小部件的点击并将该数据发送到Google Analytics（分析）。

要正确执行此操作，您需要：

• 创建一个自定义HTML标记，该标记侦听所有单击AddThis小部件的单击。
• 每当用户/访问者表示有意共享内容时，就从数据层获取数据。
• 将该数据传递给Google Analytics（分析）（作为社交活动）。

对于那些珍惜时间的人，我’创建并共享了现成的Google跟踪代码管理器容器模板。