灏洋廊坊网络公司专注于香河网站建设制作、香河网站优化!

知识百科

香河灏洋专业的网站建设公司,竭诚为您服务!
当前位置:首页>知识百科>推广百科 > Google跟踪代码管理器 - 入门

Google跟踪代码管理器 - 入门

作者:灏洋网络公司   浏览:   发表时间:2018-08-30  

导读:本章概述了如何开始使用Google跟踪代码管理器,添加代码并对其进行全面分析。在完成整个过程的过程中,我们将使用博客(在上一章中创建)来演示不同的步骤。...


本章概述了如何开始使用Google跟踪代码管理器,添加代码并对其进行全面分析。

在完成整个过程的过程中,我们将使用博客(在上一章中创建)来演示不同的步骤。

工作区

步骤1 - 如上面的屏幕截图所示,单击标签Workspace Changes:0旁边右上角的容器代码(GTM-XXXXXXX)。

您将看到“安装Google跟踪代码管理器”对话框。

安装GTM

现在,我们要在此博客上安装Google跟踪代码管理器代码。

步骤2 - 要在博客上添加上图中的GTM代码,请访问https://Blogger.com并使用您的凭据登录。

您将看到如下所示的屏幕,并在列表中显示您的博客文章名称。

GTM代码

步骤3 - 从左侧面板中找到选项:主题。

您将看到以下屏幕。

选项

第4步 - 单击编辑HTML以编辑博客的HTML代码。将显示您的博客的HTML源代码,如下图所示。

单击编辑HTML

在这里,我们要安装代码Google跟踪代码管理器。根据GTM的指示,我们需要在以下位置插入代码 -

  • 在<head>标签中尽可能高
  • 在<body>标签中

第5步 - 在上面的HTML代码中找到<head>标记。返回https://tagmanager.google.com并在上面的步骤1下的“安装Google跟踪代码管理器”对话框中复制代码。将复制的代码正好粘贴在<head>标记开头下。

步骤6 - 同样,在HTML代码中找到<body>标记。

 - 您可以使用快捷键Ctrl + F查找<head>和<body>标记。浏览器搜索功能将派上用场找到标签。

找到<body>标记后,重复此过程以从Google跟踪代码管理器复制与<body>标记关联的代码。

为了便于定位标记,<body>标记通常以<body expr:class ='“loading”+ data:blog.mobileClass'>开头。

将所需代码粘贴到<body>标记下,然后单击“保存主题”。

它将显示以下错误,并且看到该错误是正常的。

保存主题

第7步 - 要解决此问题,请在<head>标记下的Google跟踪代码管理器代码中找到以下行: -

j = d.createElement(s),dl = l != 'dataLayer'?' &l = '+l:'';j.async = true;j.src =

&amp;替换上面一行中作为下划线然后单击保存主题。错误将得到解决。

以下是将Google跟踪代码管理器代码添加到您的博客的过程。

标签简介

简单地说,只需在Google跟踪代码管理器支持网站上,代码就是一段代码,可将信息发送给第三方,例如Google Analytics。

从那里开始,就特定的分析工具而言,可以有多个标签相关联。将它们全部放在一个页面中确实是一个优势,因为产品营销人员将看到与该页面关联的多个指标。

但是,这里有一个同样重要的注意事项,一个网站上的标签应该不会过分。这不仅增加了管理标签时的混淆,而且使得区分来自各种标签的数据变得麻烦。

我们在“安装Google跟踪代码管理器”对话框中看到的以下代码实际上是一个代码。

<!-- Google Tag Manager --><script>
   (function(w,d,s,l,i){
      w[l] = w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});
      var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
      dl = l != 'dataLayer'?' &l = '+l:'';
      j.async = true;
      j.src = 'https://www.googletagmanager.com/gtm.js?id='+i+dl;
      f.parentNode.insertBefore(j,f);
   })
   (window,document,'script','dataLayer','GTM-M8QLQCZ');</script><!-- End Google Tag Manager -->

标签的位置

标记的位置可以是页面源代码中的任何位置。它可以像上面那样位于顶部,也可以位于页脚中传输所需的信息。

以上是对Tag的快速介绍以及如何创建它。

触发器

触发器实际上会检测何时触发标记。这些是用于配置要触发的标记的一组规则。例如,当用户执行“Y”动作时,触发器可以决定触发特定标签“X”。更具体地,当点击特定形式的特定按钮时,触发器可以指示标签触发。

触发器是可以附加到标签以实现所需方式的条件。一个真实世界的例子是,考虑为电子商务页面上的成功交易配置标签。

标签将指示交易是否成功执行。为此,将创建一个触发器,即只有在向用户显示事务确认页面时才触发标记。

更突出的是,考虑您要跟踪博客/网站的所有页面浏览量。因此,具体而言,您可以使用Google Analytics创建标记,当用户访问您博客/网站上的任何网页时,该标记会被触发。在这种情况下,触发器将是通用的,在所有页面上触发此标记。触发器将相应地设置。

触发器有时会变得复杂。例如,如果有人单击特定页面上的按钮,则触发标记。

如下图所示,您可以通过单击屏幕左侧面板上的“触发器”来访问触发器。

单击“触发器”

由于尚未配置任何触发器,因此您将看不到触发器上的任何结果。

触发器

变量

基本上,变量是可以改变的值。

例如,让我们考虑一个简单的链接点击。单击链接时,会有一些使用此单击事件收集的内置变量。这些变量最终可用于记录链接,当用户单击特定链接按钮时,该链接将被重定向。

进入一些细节,您还可以使用变量记录单击的元素的特定div类。它们被称为变量,因为如果页面上有10个不同的链接按钮,则这些链接按钮的重定向将会发生变化,具体取决于单击哪个元素。

您可以使用左侧面板并单击“变量”来访问变量。

变量

Google跟踪代码管理器提供两种类型的变量 -

  • 内置变量
  • 用户定义的变量

如名称所示,您可以使用Google跟踪代码管理器提供的现有变量,也可以创建自己的变量。

让我们考虑一个例子,看看标签是如何运作的。我们现在将使用Google跟踪代码管理器调试代码。

调试标签

在本章的初始部分,我们花了一些时间将Google跟踪代码管理器跟踪代码添加到Blogger.com上的博客中。

这是让Google跟踪代码管理器识别我们的跟踪代码的第一步。如果您仔细观察,在<head>标记中包含的脚本中,存在GTM-XXXXXXX格式的Google跟踪代码管理器跟踪代码。

现在,在调试标签时,使用Google跟踪代码管理器界面非常简单。我们将使用基本Google Analytics标记进行演示。我们假设Google Analytics帐户已存在。

创建基本Google Analytics标记

在Google跟踪代码管理器中,要创建代码,需要执行各种步骤。要了解每个细节,让我们考虑以下屏幕。

创建标签

第1步 - 单击“添加新标签”按钮。

右侧的面板将滑动以开始创建新标签的过程。这将显示一个无标题的空白标记供您配置。

添加标签

第2步 - 为您的代码提供名称。让我们给它起名字 - First Tag。

第3步 - 完成后,单击文本/图标 - 选择标签类型以开始设置....

另一个面板将从右侧滑动,将显示以下标记类型。

面板

正如我们在定义中看到的,有不同的标签与不同的分析工具相关联。在此特定步骤中,Google跟踪代码管理器要求您指定要创建的标记的确切类型。

你会注意到一些标签类型如下 -

  • 通用分析
  • 经典Google Analytics
  • AdWords再营销
  • Google Optimize

注意 - 通用分析是Google Analytics的增强版和最受欢迎版。但是,有许多网站使用经典Google Analytics。

对于此示例,我们继续指定Universal Analytics。

第4步 - 单击“通用分析”继续。控件将切换回上一屏幕,您将需要选择要跟踪的内容。请参阅以下屏幕截图以供参考。

点击Universal Analytics

步骤5 - 选中此标记中的启用覆盖设置。

注意 - 我们正在使用此步骤以便更快地熟悉Tag Creation。您可以继续创建Google Analytics设置变量,而无需检查上述复选框。

第6步 - 打开Google Analytics界面。在Google Analytics中,找到首页上的按钮ADMIN在属性部分下,单击属性设置。您将能够看到类似于以下内容的屏幕。

Google Analytics界面

第7步 - 复制跟踪ID。跟踪ID的格式为UA-XXXXX-X。

第8步 - 复制跟踪ID后,返回Google跟踪代码管理器界面。如前所示,将跟踪ID粘贴到关联的文本框中。

现在,我们即将配置标记的重要元素 - 触发器。

我们将指示Google跟踪代码管理器,如果用户查看该页面,则应该触发该代码。为此,我们应该使用屏幕上的下一部分配置触发器。

第9步 - 单击选择触发器以使此标记触发...

对话框将从左侧滑动,要求您选择触发器。它将显示触发器,如以下屏幕截图所示。

触发显示

第10步 - 单击所有页面。

控件将返回标签配置屏幕。单击右上角的蓝色SAVE按钮。您已成功配置第一个标签!

步骤11 - 现在进入调试模式,单击灰色的PREVIEW按钮。

预览按钮

如上面的屏幕截图所示,将显示一个橙色框。这表示调试模式已打开。使用可用链接访问您的博客。

第12步 - 现在,当您访问博客时,您应该能够在博客上看到显示Google跟踪代码管理器调试部分的部分。

调试部分

此外,如果您仔细观察,在本页面上的标签下会显示第一个标签这表明我们的标记在成功的页面视图中被触发。

步骤13 - 在调试部分中,单击“变量”。然后,单击左侧面板上的Window Loaded。此操作意味着我们正在选择一个操作来分析由于该操作而加载的变量。

它将显示变量部分,如下面屏幕截图中的绿色框中所示。

变量部分

在我们进入下一章时,您可以更清楚地分析变量。



本文由廊坊网络公司编辑整理。

本网站中部分原创内容,版权由香河灏洋网络所有,如转载请标注文章链接,违者必究。


相关文章
  • 售前电话:17326913295
  • 售后电话:17326913295
  • 联系邮箱:1042551829@qq.com
  • 联系地址:廊坊香河县新华大街兴业家园

首页 | 建站百科 | 推广百科 | 营销百科 | 网站建设 | 网络优化 | 常见问题 | 联系我们 | 网站地图 | bcmul()函数

公司分站:浏阳网站建设 | 三河网站建设 | 大厂网站建设

三河网站制作 | 三河做网站 | 三河网络公司 | 大厂网站制作 | 大厂做网站 | 大厂网络公司 | 香河网站设计 | 三河网站设计 | 大厂网站设计 | 香河网站制作

香河灏洋网络公司|专注于香河做网站、香河网站建设、香河网站优化、香河网站托管等业务! 

'); })();