触发器

“触发器”是指在运行时求值结果为“true”或“false”的条件。附加到代码的触发器用于控制该代码在何时触发或不触发。

概览

代码必须至少有一个触发器才能触发。系统会在运行时对触发器进行求值,并在满足触发器条件时触发(或不触发)关联的代码。例如,某代码关联的触发器基于网页浏览事件和以下过滤条件,该代码将在 example.com 首页上被触发:

url equals example.com/index.html

触发器由一个事件以及一个或多个过滤条件构成(自定义事件除外,它无需过滤条件)。每个过滤条件都采用以下格式:[变量] [运算符] [值]

变量 运算符
可以选择 urlreferrer 等。 可以选择 equalscontains 等。 您提供一个值,Google 跟踪代码管理器会将您提供的值与变量中的运行时值进行比较。

在以上示例中,系统在运行时对变量“url”进行评估。变量“url”已定义为包含当前网页的网址。因此,在运行时,系统会将当前网页的网址与您提供的值“example.com/index.html”进行比较,以确定是否满足触发器条件。

在网站容器中,您可以启用“page url”、“page hostname”或“referrer”等内置变量。此外,在设置基于点击的触发器时,Google 跟踪代码管理器使用内置变量来自动填充与所点击的元素 ID、类等对应的变量。利用这些变量,您可以构建最常用的触发器。当然,您也可以定义自己的变量,并在触发器过滤条件中使用这些变量的值。有关详情,请参阅变量

跟踪代码管理器包含许多用于常见需求(如收集网址、点击 ID 等)的内置变量。您必须先在跟踪代码管理器中启用内置变量,然后才能在下拉菜单中使用这些变量。了解详情

您可以在一个触发器中提供多个过滤条件([变量] [运算符] [值])。如果一个触发器中的所有条件都得到满足,即表示该触发器得到满足。

触发/屏蔽代码的触发器

无论何时,只要满足代码的任何一个触发器,即可触发该代码。例如,如果一个代码有两个触发器,一个针对“所有网页”,另一个针对“仅限网页 ABC”,系统就会在所有网页上触发该代码。

屏蔽代码触发的触发器始终会覆盖触发代码的触发器。例如,如果代码有一个针对“所有网页”的触发器,还有一个针对“URL equals thankyou.html”的屏蔽触发器,则系统永远不会在“thankyou.html”网页上触发该代码。

触发器类型

所有在跟踪代码管理器中触发的代码均由事件驱动。只要跟踪代码管理器记录了事件,系统就将对容器中的触发器进行评估,并相应地触发代码。如果不发生事件,系统不会触发任何代码。

事件可以是网页浏览、按钮点击、表单提交或者是您定义的任何自定义事件。跟踪代码管理器包含 6 个内置事件类型以及一个自定义事件选项。设置触发器的第一步是选择与触发器相关联的事件类型。内置事件包括:

网页浏览(网站)

此事件与用户网络浏览器中的页面呈现相对应。您可以通过触发器类型下拉菜单进一步配置此事件,以通知跟踪代码管理器在以下三种情况下是否应立即触发代码:浏览器开始解析页面时(网页浏览);浏览器完成完整页面 DOM 的构建后(DOM 已准备就绪);页面(包括图片和脚本等嵌入资源)完全加载后(窗口已加载)。如果您的代码使用 DOM 或 JavaScript 变量采集动态值,调整基于网页浏览的触发器的计时会很有帮助。所有基于网页浏览且与 DOM 互动以填充变量的代码都应该使用“DOM 已准备就绪”作为触发器类型,以确保变量的设置始终一致。

点击(网站)

要在用户点击某个链接或网页的某个元素时触发代码,请选择“点击”事件类型。

我们建议您在触发器过滤条件中指定您希望用户点击的网页的网址(或网址格式),以便优化跟踪代码管理器的性能。

当用户点击与过滤条件匹配的网页上的任何元素时,跟踪代码管理器将自动填充以下变量(前提是您已经启用这些内置变量):

  • Click Element:用户点击的 HTML 元素。
  • Click Classes:元素类属性中的一系列值。
  • Click ID:用户点击的元素的 ID 属性。
  • Click Target:用户点击的元素的目标属性。
  • Click URL:用户点击的元素的 HREF 属性(如有)。
  • Click Text:用户点击的元素内部的可见文本。

然后,您可以将这些变量加入点击触发器的过滤条件中。例如,如果在 www.example.com/cart.html 页面上有一个包含以下标记的按钮:

<button type="submit" id="cart-add" class="addToCart" >添加到购物车</button>

当用户点击该按钮时,以下触发器配置将会触发代码:

触发器配置

触发器类型:点击 - 所有元素
此触发器的触发条件:某些点击
点击 ID 等于 cart-add
网页网址包含 example.com/cart.html

您可以进一步配置基于点击的触发器,指定您是希望该触发器仅监听用户对常规链接的点击(“仅链接”选项),还是监听用户对页面上所有 HTML 元素的点击(“所有元素”选项)。

由于点击链接通常会导致浏览器加载新页面,并中断所有待处理的 HTTP 请求,因此您可以选择添加一个短暂的延迟,以使跟踪代码管理器触发的代码能够在重定向到下一页面之前得到正确执行。选中“等待代码触发完毕”选项将会等待所有代码均已触发或指定的超时已过(二者取其先)后,再打开链接。

“检查验证结果”选项允许您仅在打开链接被视为有效操作的情况下触发代码。如果不选中该选项,那么只要用户尝试点击链接,就会触发代码。有关详情,请参阅下面的“关于检查验证结果选项”。

元素可见性(网站)

当特定元素(一个或多个)变得可见时,您可以使用“元素可见性”触发器来触发代码。当所选元素在视口中显示或根据样式设置显示(即没有隐藏)时,该触发器即会触发。可能导致元素变得可见的操作包括加载页面、滚动页面、切换到浏览器窗口中的后台标签,或启动对元素位置或样式的基于代码的更改等。

“元素可见性”触发器可以基于一个或多个元素的可见性触发。您可以使用选择方法菜单来选择是使用 ID 属性还是 CSS 选择器选择元素:

  • ID:根据元素的 ID 属性值选择单个元素。
  • CSS 选择器:根据指定的 CSS 选择器模式选择一个或多个元素。

接下来,选择何时触发该触发器:

  • 每次网页加载触发一次:每次加载网页时,该触发器仅触发一次。如果给定页面上有多个元素可被 ID 或 CSS 选择器匹配,该触发器将仅在其中某一元素在该页面上首次显示时触发。

    如果用户重新加载页面或导航到新页面,触发器将重置,并可能根据所选元素的可见性再次触发。

  • 每次元素显示触发一次:每次所选元素显示时,该触发器仅在网页加载时触发一次。如果给定页面上有多个元素可被 CSS 选择器匹配,该触发器将在所有这些元素均在该页面上首次显示时触发。

    使用 ID 作为选择方法时,此选项的功能通常与每次网页加载触发一次选项相同。如果页面上的多个元素的 ID 相同,则只有第一个被匹配的元素将触发此触发器。但是,如果您在高级设置中启用了观察 DOM 更改选项,并且页面上有多个具有相同 ID 的元素,那么如果某项观察到的 DOM 更改移除了第一个被匹配的元素,则此选项可能会导致触发器再次触发。

    如果用户重新加载页面或导航到新页面,触发器将重置,并可能根据所选元素的可见性再次触发。

  • 每次元素在屏幕上显示时:每次被匹配的元素变得可见时,该触发器都将触发。例如,如果触发器设置为基于 ID foo 元素的可见性触发,并且用户向下滚动页面,使元素 foo 变得可见,则触发器将会触发。如果用户接下来向上滚动页面,导致 foo 再次处于非首屏位置,然后又向下滚动,那么触发器将再次触发。

高级选项

  • 最低可见百分比:指定在触发器触发之前有多少所选元素(以百分比表示)必须在屏幕上可见。默认情况下,要使触发器触发,必须有 50% 的元素在屏幕上显示。例如,如果用户向下滚动页面,将某个所选元素部分地放入视口中,则在该元素有 50% 可见时,触发器将会触发一次。如果将此字段更改为 100,将导致触发器等待,直到该元素在视口中完全可见 (100%) 时才会触发。

  • 设置在屏显示时长下限:选中此复选框可指定在触发器触发之前,所选元素必须在屏幕上显示多长时间(采用指定的最低可见百分比)。此选项在默认情况下不启用,一旦所选元素变得可见,触发器将立即触发。

    注意:所选元素的在屏显示时长在特定页面基础上累积。换句话说,如果某个元素先显示 5,000 毫秒,然后消失,接着再次返回显示 5,000 毫秒,则该元素的在屏显示时长总计为 10,000 毫秒。如果用户重新加载页面或导航到新页面,触发器(以及在屏显示时长)将重置。

  • 观察 DOM 更改:选中此复选框可启用触发器来跟踪显示为 DOM 更改的匹配元素。

注意:要设置在屏显示时长下限或配置触发器来观察 DOM 更改,需要通过 Google 跟踪代码管理器监测所选元素的状态。当给定页面上有多个元素相匹配时,网站性能(在网页加载后)可能会受到影响。为获得最佳性能,请确保您的 CSS 选择器不会与大量元素相匹配,或者改为使用 ID 作为选择方法。

当“元素可见性”触发器触发时,系统将会自动填充以下内置变量:

  • Percent Visible:是一个数值 (0-100),用于表明当触发器触发时,有多少百分比的所选元素可见。

  • On-Screen Duration:是一个数值,用于表明当触发器触发时,所选元素在多少毫秒内保持可见。

注意:确保您已通过变量屏幕启用了这些内置变量。

另外,您还可以配置用户定义的自动事件变量,以在触发器触发时捕获有关所选元素的信息。

表单提交(网站)

要在用户提交表单时触发代码,请选择“表单”作为触发器事件。

我们建议您在触发器过滤条件中指定您希望用户执行表单提交操作所在的网页的网址(或网址格式),以便优化跟踪代码管理器的性能。

当执行表单提交触发器时,系统将会自动填充以下变量:

  • Form Element:用户点击的表单元素。
  • Form Classes:表单类属性中的一系列值。
  • Form ID:表单元素的 ID 属性。
  • Form Target:表单元素的目标属性。
  • Form URL:表单元素的 HREF 属性(如有)。
  • Form Text:表单内部的可见文本。

若选中“等待代码触发完毕”选项,则会等到所有基于此触发器的代码均已触发,或指定的超时已过(二者取其先)后,再提交表单。如果不选中该选项,响应较慢的代码可能会来不及在表单提交引发下一网页加载之前触发。

若选中“检查验证结果”选项,则只有在表单成功提交的情况下,才会触发代码。如果不选中该选项,那么只要用户尝试提交表单,就会触发代码。

历史记录更改(网站)

如果网址片段(哈希)发生更改或网站使用 HTML5 pushstate API,基于历史记录更改事件的触发器将会触发代码。例如,此触发器可以用来触发对 Ajax 应用中的虚拟网页浏览进行跟踪的代码。

当发生历史记录更改事件时,跟踪代码管理器会填充以下变量:

  • History old url fragment:更改前的网址片段。
  • History new url fragment:现在的网址片段。
  • History old state:旧的历史记录状态对象,由网站对 pushState 的调用控制。
  • History new state:新的历史记录状态对象,由网站对 pushState 的调用控制。

JavaScript 错误(网站)

此类型的触发器用来在发生未捕获的 JavaScript 异常(使用 window.onError)时触发代码。当触发器触发时,系统将会填充以下变量:

  • Error message:字符串,包含 JavaScript 错误消息的文字。
  • Error url:出现错误的位置所在的网址。
  • Error line number:出现错误的位置在代码中的行号。

请注意,JavaScript 错误触发器不会报告在 Google 跟踪代码管理器加载前发生的错误,只会报告未捕获的异常。

滚动深度(网站)

您可以使用“滚动深度”触发器根据用户在页面上滚动的距离来触发代码。相关选项包括:

  • 垂直滚动深度:根据用户向下滚动页面的距离触发。

  • 水平滚动深度:根据用户向右滚动页面的距离触发。

您可以使用同一触发器根据垂直滚动深度和水平滚动深度这两个值触发代码。将应触发触发器的滚动深度设置为百分比(指占页面高度和宽度的百分比)或像素。输入一个或多个用逗号分隔的正整数,用于表示百分比值或像素值。

例如,如果选择垂直滚动深度的百分比选项,您可以输入 10, 50, 90 将页面高度的 10%、50% 和 90% 设置为触发点。如果将此触发器应用到某个代码,并且用户从页面顶部滚动到 90% 标记处,该代码将触发三次;针对每个阈值各触发一次。每次加载网页时,触发器仅针对每个阈值触发一次。如果用户随后又向上和向下滚动页面,则触发器在页面重新加载或用户导航到新页面之前将不会再次触发。

对于可以无限滚动的页面或尺寸显著不同的页面,“元素可见性”触发器可能更适合您使用。

注意:如果页面加载时指定的滚动深度在视口中可见,触发器将在没有滚动操作的情况下触发。每次加载网页时,每个触发器仅针对每个阈值触发一次。

当“滚动深度”触发器触发时,系统将会自动填充以下变量:

  • Scroll Depth Threshold(滚动深度阈值):是一个数值,用以表明导致触发器触发的滚动深度。对于百分比阈值,将是一个范围为 (0-100) 的数值。对于像素,将是一个表示被指定为阈值的像素数的数值。

  • Scroll Depth Units(滚动深度单位):指“像素”或“百分比”,用于表明为导致触发器触发的阈值指定的单位。

  • Scroll Direction(滚动方向):指“垂直”或“水平”,用于表明导致触发器触发的阈值的方向。

定时器(网站)

使用基于此事件的触发器,您可以按照自定义的间隔向跟踪代码管理器发送事件,从而以所需的频率生成跟踪代码管理器事件。使用此触发器时,跟踪代码管理器会启动一个倒计时器,该倒计时器将按照您指定的间隔(以毫秒计)触发事件。如果间隔为 5000,则每五秒钟就会触发一个事件。事件的名称是您在“事件名称”中指定的名称。然后您可以使用此事件名称来创建一个自定义事件触发器。例如,如果您在基于定时器的触发器中指定“timer5”作为事件名称,那么您应该创建一个基于自定义事件的触发器,事件条件是“event equals timer5”。请参阅 Google Analytics(分析)事件中的具体示例。限值为触发该事件的最大次数。如果将“限制”留空,将一直触发该事件,直至用户离开页面。

自定义事件(网站和移动应用)

自定义事件用于跟踪您的网站或移动应用上发生的不是由标准方法处理的互动。最常见的用例是,您希望跟踪表单提交,但该表单的默认行为已重新路由(例如,提交浏览器事件已被覆盖)。

以下是一个用于网站的示例配置,当一个称为“button1-click”的自定义事件被推送到数据层时,将触发代码:

  1. 添加将在用户点击按钮时将该事件推送到数据层中的代码。
    示例:<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>
  2. 创建跟踪代码。在新代码设置的触发器配置部分中,使用以下设置创建一个新事件:
    触发器类型:自定义事件
    事件名称:button1-click
    此触发器的触发条件:所有自定义事件

按照这样的设置,即使默认的提交事件被覆盖,代码也会被触发:当用户点击按钮时,一个值为“button1-click”的自定义事件将被推送到数据层。然后,跟踪代码管理器检测到“button1-click”(作为自定义事件的值),从而触发代码。

提示:标准事件和自定义事件均以同样的方式被推送到数据层队列中。要查看推送到指定页面上的数据层的事件序列,请打开您的网络浏览器上的 JavaScript 控制台并输入“dataLayer”。

data layer screenshot from Google Chrome
提示:您可以使用 dataLayer.push() 来随同事件一起发送多个变量,例如在用户点击按钮时推送转化价值(示例:dataLayer.push({'event':'button1-click','conversionValue':25});)。然后,您可以在跟踪代码管理器中创建数据层变量,并在 AdWords 转化跟踪代码的转化价值字段中使用此变量。

YouTube 视频(网站)

要根据用户与嵌入您网站中的 YouTube 视频进行的各种互动来触发代码,可使用“YouTube 视频”触发器。

每次发生互动时,关于视频和播放状态的数据将被推送到数据层。使用内置的视频变量可捕获这些视频数据。

基本捕获选项

  • 开始:在视频开始播放时触发。
  • 结束:在视频播放完毕时触发。
  • 暂停、搜寻和缓冲:如果视频暂停,将拖动进度条以搜寻或调整视频内的计时;如果视频缓冲,触发器将触发。
  • 进度:按特定视频进度触发,按百分比或时间戳配置,以秒为单位:
    • 百分比:以包含一个或多个整数的逗号分隔列表的形式输入百分比,表示已播放的视频所占百分比。示例:5, 20, 50, 80(分别表示 5%、20%、50% 和 80%)。
    • 时间阈值:以包含一个或多个整数的逗号分隔列表的形式输入时间阈值,表示已播放了多少秒的视频。示例:5, 15, 60, 120(分别表示 5 秒、15 秒、60 秒和 120 秒)。
注意:仅在第一次达到百分比和时间阈值时,触发器才会触发。如果用户在视频中跳转到特定百分比或时间阈值之后,触发器不会触发。

高级选项

  • 向所有视频添加 JavaScript API 支持:选中此复选框可启用 YouTube iFrame Player API。这样可以确保将 enablejsapi 参数附加到 YouTube 视频播放器网址中,并赋值为 1,从而实现通过 iFrame 或 JavaScript 控制播放器。注意:如果在加载 Google 跟踪代码管理器时播放视频,则会导致视频重新加载。

注意:“YouTube 视频”触发器适用于在页面加载期间或之后加载的视频,前提是当 Google 跟踪代码管理器加载时,至少存在以下一项:

  • 嵌入式 YouTube 视频
  • YouTube iFrame API <script>
  • 用于创建 YouTube iFrame API <script> 的代码,如此例所示

使用正则表达式和 CSS 选择器运算符

您在设置触发器时,可以将正则表达式和 CSS 选择器用作运算符。在将正则表达式或 CSS 选择器设置为触发器的运算符时,您可以指定触发器是要匹配还是不匹配您所应用的规则。例如,应用于网址或网址路径变量的正则表达式:

/pro/

将匹配所有在网址路径中带有“pro”字符串的网页,包括“products”、“promotions”、“professionals”和“processes”。

CSS 选择器可用于定位具体的 HTML 元素。例如,应用于“Click Element”变量的选择器:

#promo .purchase

将匹配对任何带有“purchase”类属性值的元素的点击,且该元素是某个带有“promo”ID 属性值的父级元素的后代元素。

给触发器添加过滤条件

选择触发器依据的事件后,您可以进一步指定相应条件,以便这些条件发生时,触发器根据跟踪代码管理器变量的值触发代码。每个内置事件都带有一个或多个变量,由跟踪代码管理器自动填充,如针对网页浏览的网页网址,或针对点击事件的已点击元素 ID。您可以使用与所选事件类型相关的变量或任何其他您创建的自定义变量来为触发器构建过滤条件。

除了基于自定义事件的触发器之外,您必须在创建触发器时指定至少一个过滤条件。

最后,您可以为触发器指定一个名称,并设置其他配置选项(所选触发器的类型不同,这些选项也会有所不同)。

触发器和变量

如果您的代码使用变量,则传递到代码的值就是事件触发了代码时这些变量所具有的值。

请参考以下数据层连续更新的示例:

Screenshot of chrome devtools showing objects in data layer

如果代码的触发器是基于事件 productView 触发,该代码将会触发两次。如果此代码使用与数据层变量 productId 对应的变量,则首次触发代码时该变量的值为“ABCD”,第二次触发代码时为“EFGH”。如果此代码使用与 loggedInUser 对应的数据层变量,则两次触发代码时该变量的值均为“no”,原因是该值最初设置为“no”,并且在第二次触发代码时未被覆盖。

如果代码的触发器是基于“addToCart”事件触发,则系统将针对 productId 使用“XYZ”值,针对 loggedInUser 使用“yes”值,原因是 loggedInUser 变量是在早于 addToCart 事件的数据层更新期间更改了它先前的“no”值。请注意,将 loggedInUser 变量设置为“yes”的数据层更新不能用来触发代码,因为没有与此更新相关联的事件。

代码暂停

利用代码暂停,您可以通过屏蔽代码关联的触发器来暂时停止触发相关代码。在问题排查、定时投放广告系列或其他您希望无需删除代码或在容器配置中调整代码触发器即可暂停触发相关代码的情况下,该功能会非常有用。

请注意,为使更改生效,您必须保存并发布已暂停或取消暂停的代码。

要暂停代码,请执行以下操作:

  1. 点击代码,找到您希望暂停的代码,然后在列表中点击其名称将该代码打开。
  2. 点击“更多操作”菜单 (更多),然后选择暂停
  3. 保存并发布您所做的更改。

代码暂停时,系统将会为其标以暂停图标:yellow circular pause icon

要取消暂停代码,请执行以下操作:

  1. 点击代码,找到您希望暂停的代码,然后在列表中点击其名称将该代码打开。
  2. 点击位于保存下方的取消暂停。或者选择“更多操作”菜单 (更多),然后选择取消暂停
  3. 保存并发布您所做的更改。