当前位置:首页 > 内容营销 > 正文

如何在 Accelerated Mobile Pages 上使用 Google 的标签管理器

如何在 Accelerated Mobile Pages 上使用 Google 的标签管理器

终极力量组合:GTM 和 Accelerated Mobile Pages。 以下是如何以尽可能简单的方式将它们组合在一起。...

当事情走到一起不是很好吗?

Google 的Tag Manager (又名 GTM)于 2012 年推出。它允许营销人员和企业主为其网站和应用程序收集衡量和营销数据,而无需通过网络开发人员。

您使用 GTM 而不是直接在网站上调整代码。 无需任何特殊的脚本知识,即可快速进行更改、调整和添加。

Accelerated Mobile Pages (aka AMP) 项目是今年刚刚发布的一个开源程序。 它是 HTML 的精简版,与非 AMP 页面相比,加载速度最多可提高 4 倍,消耗的数据量最多可减少 10 倍。

因为它在一组有限的允许技术功能上运行,谷歌声称 AMP 是  比传统网页快 15-85% 这一切都是为了提供极快的移动体验。

谷歌几周前公布了在 AMP 中使用 GTM 的能力,随着两者的日益流行,这绝对是一个受欢迎的公告。

GTM。 安培。 终极力量夫妇。 以下是如何以尽可能简单的方式将它们组合在一起。

谷歌标签管理器

GTM——顾名思义——管理从应用程序或网站向第三方发送信息的标签、 JavaScript片段。 有了它,几乎任何人都可以快速轻松地添加 Google Analytics、Adwords 转化跟踪或 Doubleclick Floodlight。

要开始使用 GTM,您必须首先添加自定义跟踪代码(与您在网站上设置 Analytics 时所做的非常相似)。 此容器标记可让您从一个方便的位置创建、管理和调试站点上的所有标记。

转到Google 标签管理器管理页面。 您可以通过两个简单的步骤创建您的帐户:

  1. 给它一个帐户名称(通常是您的公司或网站名称)
  2. 为其指定一个容器名称(通常是您的域或 URL 地址),然后为网站选择 Web,为应用选择 iOS 或 Android,或选择 AMP 以在加速的移动页面上使用它(稍后会详细介绍)。
  3. 单击创建。 最后一点。

在阅读并接受服务条款协议(您确实阅读了这些,对吗?)后,您将收到必须复制并粘贴在 <head> 中的代码,并紧跟在每个页面的 <body> 开头标记之后。

前期可能有点劳动密集型,但是一旦每个页面上都有这个可爱的小片段,您就可以从一个位置向整个网站添加和删除标签。 创建、调整和管理。

或者, Google Tag Manager for WordPress插件会为您在您的页面上插入容器代码。

一个好的分步指南可以引导您完成基础知识。 您会惊讶于如此强大的工具的简单性。 任何人都可以做到,无论他们对编码和网站的熟悉程度如何。

在主仪表板中,您将看到以下选项卡:

  • 标签– 添加到页面的 <head> 或 <body> 元素的代码片段(最常见的是 JavaScript)
  • 触发器– 指定标签何时何地完成或“触发”
  • 变量– 接收和存储标签和触发器的信息(例如,您可以创建一个常量变量并为其指定 Google Analytics 跟踪代码的值,这样您就不必再次找到该详细信息)
  • 文件夹

可能需要一段时间才能完全适应它,但 GTM 是 Google 提供的另一个免费但动态的工具,它可以将您的整个在线帝国置于您的手中。 它带有一套塞满标签的标签,可以直接从(虚拟)盒子中取出,并且能够根据需要创建和调整自己的标签。 除了其他 Google 工具外,该平台还可以与各种第三方应用程序配合使用。

如果您还没有尝试过,请不要再等了。 加入的原因很多,包括事件和表单跟踪,甚至滚动深度跟踪,仅举几例。 几乎可以跟踪任何内容(并且跟踪数据对您的在线成功至关重要)。

GTM? 太棒了。

加速移动页面

Accelerated Mobile Pages提供用于构建网页的 HTML 的精简但加强版。 凭借有限的标签、精简的 CSS、标准化的 JS 元素并设计为可缓存,它提供了比以往任何时候都更快的移动体验。

移动友好性是一个排名因素。 速度是排名因素。 AMP 对这两者都有发言权。

由三个主要组件组成 - AMP HTML、AMP JS 库和 Google AMP 缓存 - 乍一看可能很吓人,但您今天可以创建、预览和发布您的第一个 AMP 页面(实际上是现在)。

尝试教程并亲自查看。

一旦激活, WordPress AMP 插件将自动生成与 AMP 兼容的帖子版本。 还有一个等效的Drupal 模块可用。 但是,如果您有大量移动流量(并且您可能确实......检查您的分析人口统计数据以确认),您可能需要为未来的帖子创建一个专用的 AMP 版本。

被发现

使用 <head> 中的 <link> 标记使您的 AMP 页面可被发现非常简单:

  • 将 <link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”> 添加到非 AMP 版本
  • 将 <link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”> 添加到 AMP 页面

某些平台需要额外的元数据(最好通过架构标记)才能显示您的结果。

AMP 和分析

一段时间以来,我们已经能够将 Google Analytics 与 AMP 属性结合使用。 就像“常规”网站一样,您只需将适当的代码添加到每个页面。

AMP 分析由两部分组成:

  1. amp-analytics JavaScript 库
  2. JSON 配置对象

要将 Analytics 添加到任何 AMP 页面,您必须首先在结束 <head> 标记之前添加以下内容:

 <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

此脚本设置阶段以在页面的 <body> 中进一步查找特定的“amp-analytics”元素。 目前,您在 AMP 中有三个 Google Analytics 配置选项:

  1. 用于页面跟踪的“pageview”(特定页面的查看次数)
图片来源:谷歌 AMP 页面
  • 用于事件跟踪的“事件”(与页面加载无关的用户交互)
  • 用于社交追踪的“social”(社交网络相关操作)
  • 进行一些调整和调整,您就可以在这三个领域获得大量 Analytics 数据。

    带有 Accelerated Mobile Pages 的标签管理器

    但最好的部分是:有了新的兼容性,您无需执行任何操作。 GTM 具有内置的 AMP 功能,设置它是小菜一碟。

    转到GTM 管理页面,输入帐户(您的企业)和容器(网址)名称,选择 AMP,然后单击创建。

    在下一页上,您会找到必须添加到 AMP 网站每个页面的 <head> 和 <body> 代码。 复制和粘贴。

    您可以通过单击主仪表板右上角的“发布”旁边的箭头来验证容器安装并解决使用预览功能发现的任何问题。

    如果一切顺利,您要做的第一件事就是为您的新 AMP 容器创建一个 Google Analytics 标签。

    在主仪表板上,选择左侧的标签选项卡,单击红色的“新建”按钮,然后选择标签配置。 从从右侧滑入的列表中,选择 Universal Analytics(这是第一个)。

    输入您的 Analytics 跟踪 ID(Google 建议为 AMP 创建一个单独的 Analytics 属性;您的 ID 位于管理 > 属性 > 跟踪信息 > 跟踪代码下,看起来像 UA-XXXXX-X),命名标签(Analytics 或类似名称),并选择触发下的所有页面。 点击右上角的保存。 普雷斯托。 你的第一个标签。

    目前有 25 个受 AMP 支持的标签可供使用,包括 Analytics、Adwords 和 DoubleClick,一旦您更好地了解自己的方法,您就可以随时创建自己的标签。

    AMP 触发器

    触发器指定将在何处和何时触发代码(在本例中为您的 Google Analytics 跟踪)。 每个标签必须至少有一个。

    转至触发器 > 新建 > 触发器配置。 有五种类型的可用 AMP 触发器:

    1. 单击– 只需一个设置: CSS 选择器,例如 a:not([href*=”mymobilesite.com”])、a:not([href*=”mymobilesite.com”]) * 以跟踪出站点击次数,或[href^=”mailto:”], a[href^=”mailto:”] * 跟踪电子邮件点击次数。
    2. 页面视图- 可以是所有页面视图或部分页面视图(然后您需要输入要触发的页面)
    3. 滚动- 当水平或垂直滚动​​达到特定百分比阈值时触发。 您可以包含以逗号分隔的多个阈值(例如 33、66、99 或仅 66)
    4. 计时器- 当有人停留在页面上超过指定的时间间隔(以秒为单位)时触发。 限制字段​​表示触发循环的最大数量……只需将其留空即可。 如果你想限制它——这有点令人困惑——输入你设置的间隔的倍数(例如 30 秒间隔,你希望它最多触发 5 次,然后输入 150 的限制值)。
    5. 可见性- 当元素(例如广告)在浏览器中可见一段时间时触发。 您需要元素 ID、最小可见百分比(至少输入 1,否则即使元素不可见也会触发触发器)、最大可见百分比、最短连续时间(以毫秒为单位)和最短总时间(也以毫秒为单位) .

    设置一切并不难。 掌握所有微妙的细微差别需要一些时间。 到目前为止,AMP 集成有些有限,但比完全不包含它时要好,因此我们正朝着正确的方向前进。

    给自己时间来处理一切。 立即设置您的基本 Analytics 代码,明天开始试验。 这都是关于婴儿的步骤。

    您是否已将 Google Tag Manager 与 AMP 一起使用? 到目前为止你的想法是什么? 在下面留下您的评论:

    注意:本文所表达的观点是作者的观点,并不一定代表卡菲昂及其员工或合作伙伴的观点。

    ,

    最新文章