humanmade/hm-gtm

WordPress 的 Google Tag Manager 工具

安装量: 139,876

依赖: 2

建议者: 0

安全: 0

星标: 32

关注者: 21

分支: 6

开放问题: 1

类型:wordpress-plugin

3.1.2 2024-09-11 10:41 UTC

README

Google Tag Manager 模板标签和设置工具。现在支持 服务器端 GTM

v3 破坏性更改

3.0.0 版本中存在一些破坏性更改

  • data layer 默认不再传递 post.author_id
  • data layer 中的 post.ID 已重命名为 post.id
  • data layer 中的 term.ID 已重命名为 term.id
  • data layer 中的 author.ID 已重命名为 author.id
  • data layer 中的 user.role 不再是数组,而是以逗号分隔的权限列表
  • data layer 中的 post.<taxonomy> 不再是数组,而是以逗号分隔的术语名称列表
  • data layer 中的 post.author_slug 默认不可用,请使用 post.author_name 代替

使用方法

插件安装并激活后,您可以在两个地方进行配置

  1. 在管理员的常规设置页面中添加容器 ID,例如 GTM-123ABC
  2. 对于多站安装,您可以在网络设置屏幕上设置网络范围内的容器 ID

服务器端 GTM

您可以选择指定以下内容

  1. 服务器容器 URL - 这应该是服务器容器的绝对路径,即使您正在使用反向代理。
  2. 自定义代码片段 - 这是一个将被添加到页面 <head> 中的代码块。一些服务器端容器提供商对标准 GTM 片段进行了细微或广泛的更改,因此您可以在需要时完全覆盖它。
  3. Cookie 保留 - 您可以设置一个特殊的 UUID cookie,它持续时间很长,一些服务器端提供商允许以这种方式恢复第三方或客户端代码设置的 cookie。

No script 回退

注意:对于块主题,此操作不是必需的。

如果您的主题是经典主题,并且您希望支持无 JavaScript 设备的回退 iframe,请将以下代码添加到您的主题中 <body> 标签的打开处

<?php wp_body_open(); ?>

数据层

GTM 提供了一个 dataLayer,它允许您传递任意数据,这些数据可以用于修改添加到您网站上的标签。

此插件添加了一些默认信息,例如页面作者、标签和分类,并提供了一个简单的过滤器,用于添加您自己的自定义键/值对。

<?php

add_filter( 'hm_gtm_data_layer', function( $data ) {
    $data['my_var'] = 'hello';
    return $data;
} );

?>

有关 在此处使用 dataLayer 变量的更多信息

您可以通过预览容器并使用网站上的覆盖来探索和查看 dataLayer 变量。

自定义事件跟踪

在块编辑器中,您可以通过块侧边栏中的设置面板将事件跟踪添加到任何块。这将调用 dataLayer.push() 并传递指定的事件数据。

默认情况下,所有块都启用了对这一功能的支持,但您可以在块注册期间通过以下方式将块支持设置为 false,或者通过 block.json。例如

register_block_type( 'my-plugin/my-block', [
  'supports' => [
    'gtm' => false,
  ],
) );

默认情况下,插件将查找具有特殊数据属性的元素,并监听指定的事件以将事件推送到数据层。

数据属性如下

  • data-gtm-on: 枚举 [click|submit|keyup|focusin|focusout|mouseenter|mouseleave] 要监听的 JS 事件,默认为 'click'。
  • data-gtm-event: 字符串 事件名称或操作,例如 "play"。
  • data-gtm-category字符串 可选,将事件分组。
  • data-gtm-label字符串 可选,用于事件的文本标签。
  • data-gtm-value数字 可选,与事件相关联的数值,例如产品价格。
  • data-gtm-fields字符串 可选,以编码的 JSON 格式提供的额外数据。
  • data-gtm-var字符串 可选,覆盖此事件的数据层变量名称。

示例

<button
  data-gtm-on="click"
  data-gtm-event="play"
  data-gtm-category="videos"
  data-gtm-label="Featured Promotional Video"
>
  Play video
</button>

还有一个名为 get_gtm_data_attributes() 的辅助函数来返回这些数据属性。

要禁用自定义事件跟踪,请使用以下代码

add_filter( 'hm_gtm_enable_event_tracking', '__return_false' );