运维笔记:用GTM替换MonsterInsights

站点上的GA4原先是通过一个叫MonsterInsights的第三方插件来部署的,我一直觉得这个插件,只不过是在网站后台提供了一个可视化面板,充其量就是个从GA取数的中介,加载很慢,代码臃肿,但一直没有动力去替换掉它。也就是在一两周以前,站点发生了大规模referrer spam事件,我在尝试解决问题的过程中,了解到谷歌自家的Google Tag Manager这个代码整合平台,便决定用GTM替代掉旧的插件。

因为我之前算是“半直接”地安装GA4的,其中并没有经过GTM。于是,我在卸载掉MonsterInsights后,就直奔GTM,获取安装代码。新建GTM账号,设置好容器,并获取“GTM-”开头的个人识别码后,我就开始考虑用何种方式安装GTM:

一是直接通过网站后台,“外观”——“主题文件编辑器”,直接修改functions.php,和header.php、footer.php等源文件。但如此一来主题升级后,这些文件都会被覆写。

二是通过代码注入插件,如Head, Footer and Post Injections之类,来插入代码。但是我一来看到不少插件已经久未维护,担心出现版本兼容问题,二来很多插件并不算轻量级。

三是自制插件。因为我已经有了开发WP插件的心得而且自得其乐,我决定继续写个小插件来部署GTM。

<?php

// 因为GTM代码输出要紧贴head标签,第三个参数代表优先级,越小优先级越高,出现位置越上
add_action( 'wp_head', 'add_gtm_at_head', 1);

function add_gtm_at_head() {
    echo "<!-- 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编号');</script>
    <!-- End Google Tag Manager -->";
}

add_action( 'wp_body_open', 'add_gtm_at_body');

function add_gtm_at_body() {
    echo '<!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM编号"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->';

上文的echo方法也可以换成,?> GTM安装代码 <?php。(因为GTM的代码不是PHP,因此要在PHP标签之外;最后遵循良好实践,文件结尾不要写上PHP闭合标签)

启用插件过几个小时后,可以提交网址,检测GTM是否安装成功。

安装好GTM后,我打开GTM面板上的新建代码,选择Google 代码,并把GA4里的数据流衡量ID粘贴上,触发条件选择Initialization-All page,就算初步配置好了。在GTM里设置好GA4之后,不用额外在网站上安装GA4代码,我立即检查network tab,可以看到响应头的Cookie里有_ga字段,GA4的实时流量也有数据了。(这里犯了个大错误,我的GA4里有两个数据流,一个是之前一直在用的MonsterInsights的,一个是旧版GA迁移过来的但是一直没用过,我把MonsterInsights的数据流删了,才发现通过这个数据流收集到的数据也一并被删除了,而且不可恢复,痛失了差不多一年的数据)。

发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注