WordPress安装Google Tag Manager(GTM)代码

Google Tag Manager(GTM)是什么?

Google Tag Manager是谷歌旗下的免费工具,用来管理网站上的跟踪代码,比如GA、广告跟踪等等!

官网:

https://tagmanager.google.com/

WordPress网站怎么安装Google Tag Manager(GTM)?

【使用插件】

插件名称:(谷歌官方推出的免费工具)

Site Kit by Google – Analytics, Search Console, AdSense, Speed

https://wordpress.org/plugins/google-site-kit/

【手动添加】

方法1

Appearance外观 > Theme File Editor主题编辑器

header.php

head></head>

<body></body>

靠上的位置(为什么要靠前的位置?页面如果加载采取的部分加载的话,当访客进入并没有下拉加载到追踪代码位置那么就会出现统计不上的情况)

方法2

Appearance外观 > Theme File Editor主题编辑器

子主题 function.php

添加

function add_google_tag_manager() {
if (!is_admin()) {
// 替换 ‘GTM-XXXXXX’ 为你的实际GTM容器ID
?>
<!– 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-XXXXXX’);</script>
<!– End Google Tag Manager –>
<?php
// 插入GTM noscript标签
?>
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
<?php
}
}
add_action(‘wp_head’, ‘add_google_tag_manager’, 10);

方法3

前提网站使用Elementor专业版编辑器

可以使用Elementor Pro的Custom Code添加2段代码(一个位置是<head>,一个是<body> Start,选择应用到整个网站)

怎么查看GTM是否成功配置?

安装Google Tag Assistant浏览器插件

https://chromewebstore.google.com/detail/tag-assistant/kejbdjndbnbjgmefkgdddjlbokphdefk

点击右上角的【阅览】按钮搭配浏览器插件验证代码状态。

GTM介绍

GTM核心:代码(Tags)+触发器(Triggers)+变量(Variables)

层级是变量-触发器-代码

变量可以帮你定位到数据源,比如网站上的一个页面,页面上的一个按钮,一个单词,页面的引荐来源等等,都是可以通过变量来获取。

触发器通过变量来出发一个条件,比如当点击某一个按钮的时候,就触发跟踪代码,记录下这条数据。通过变量来获取目标按钮,比如,变量设为Click text(这是一个内置变量,尽可能使用内置变量),设置触发条件当Click text等于或者包含某些文字时候,就触发代码,记录数据。

代码是通过设置好触发的代码类型(如果你是GA4数据就选择GA4配置,如果是要设置广告转化就选择Google Ads转化跟踪),再配合触发器,对数据进行跟踪和记录。

GTM代码优化了加载性能,异步加载,并不会影响网站速度。通过GTM管理器进行管理各种跟踪代码,无需修改网站代码。

GTM怎么设置设置GA4?

Google Analytics (GA4) 是谷歌旗下免费的网站数据分析工具,这个是GTM中的必备设置。

注册账户:

https://tagmanager.google.com/

GTM设置GA(3个位置)

点击新建

填写名称-选择代码配置

 

 

输入衡量ID(GA4的开头是G-)

网页加载过程中的先后顺序是:

Initialization – All Pages → Consent Initialization – All Pages → All Pages

Initialization – All Pages:假定我们实施Advanced模式,谷歌官方tag(如GA4部署、谷歌广告追踪代码等)应该使用这个,在页面加载时立即触发。

Consent Initialization – All Pages:这是专门为Content Manager Platform(CMP,同意管理平台,经认证的CMP名单)服务商的部署代码准备的。当页面加载时,打开用户同意选项的banner。

All Pages:Consent Mode下比较少用到了【大部分第三方tag(如hotjar、Clarity等)现在都应该选择CMP服务商提供的触发器】;当你不采用Consent Mode时(不在欧洲地区投放谷歌广告),所有的tag都可以用这个触发器。

最后提交发布

 

0
分享到: