how-to-install-google-tag-management-code-in-astra-theme

如何在 Astra 主题安装 Google Tag Management 代码

网站搭建好之后,下一步就是安装网站指标相关的跟踪代码,你可以直接在网站上安装Google Analytcs代码,但是我习惯使用Google Tag Management安装Google Analytcs代码,我也建议你这么做,好处自不必多说。

先去Google Tag Management创建一个容器,创建完成后会生成相应的跟踪代码,需要我们安装在网站的标签中与标签中各自安装。

how-to-install-google-tag-management-code-in-astra-theme
GTM代码段

由于Astra主题代码的结构化做的很好,直接在源代码中添加相关代码片段难度较大,就有必要使用Astra主题为我们提供的Custom Layouts(自定义布局)来完成我们的需要。

在Astra主题设置处启用Custom Layouts功能后,点击“Custom Layouts”并创建一个自定义布局。

how-to-install-google-tag-management-code-in-astra-theme
自定义布局

选择“Enable Code Editor”进入代码编辑器。

how-to-install-google-tag-management-code-in-astra-theme
Code Editor

先给我们的自定义布局命名,这个随意(也不要太随意),然后将GTM容器代码粘贴到代码区域。在下方的Layout部分选择“Hooks”;Action处选择“head_top”(按照GTM的要求);Display On处选择“Entire Website”,相关信息填写完成后,发布这个自定义布局就可以了。

how-to-install-google-tag-management-code-in-astra-theme
hooks

同理,创建另一个自定义布局,同样的设置,只是不同的代码,填写好相关信息后发布自定义布局即可。

how-to-install-google-tag-management-code-in-astra-theme
hooks

两个自定义布局发布之后,操作无误的话,GTM代码就应该安装成功了,你可以使用Google Tag Assistant插件查看代码是否安装成功。

how-to-install-google-tag-management-code-in-astra-theme
验证安装结果

OK,GTM安装成功了。

About The Author

发表评论

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

Scroll to Top