GTM -将DataLayer变量截断为自定义Javascript变量

基础概念

GTM (Google Tag Manager) 是一个用于管理和部署网页标签（如追踪代码、分析工具、广告标签等）的平台。它允许开发者在不修改网页代码的情况下，通过一个集中的界面来管理和更新标签。

DataLayer 是一个全局JavaScript对象，用于在网页上存储和传递数据。它通常用于GTM中，以便在不同的标签之间共享数据。

类型与应用场景

类型：

事件数据：如点击、滚动、表单提交等。
页面数据：如页面标题、URL、用户信息等。
自定义数据：根据业务需求定义的数据。

应用场景：

网站分析：收集用户行为数据，用于分析和优化网站。
广告追踪：跟踪广告效果，评估ROI。
用户行为分析：了解用户在网站上的行为模式。

示例代码

假设我们有一个DataLayer变量如下：

dataLayer = [{
  'event': 'pageview',
  'pageTitle': 'Home Page',
  'userType': 'registered'
}];

我们希望将pageTitle和userType截断为自定义JavaScript变量。

步骤：

在GTM中创建自定义变量：
- 进入GTM管理界面，创建一个新的自定义变量。
- 设置变量类型为Data Layer Variable。
- 选择pageTitle和userType作为变量名。

在网页中引用这些变量：
- 在GTM中发布更改后，可以在网页中通过以下方式引用这些变量：

// 获取pageTitle变量
var pageTitle = {{pageTitle}};

// 获取userType变量
var userType = {{userType}};

console.log('Page Title:', pageTitle);
console.log('User Type:', userType);

遇到问题及解决方法

问题：DataLayer变量未正确传递或显示。

原因：

DataLayer对象未正确定义或初始化。
GTM中的变量配置错误。
网页加载顺序问题，导致GTM脚本在DataLayer定义之前执行。

解决方法：

检查DataLayer定义：
- 确保DataLayer对象在网页加载时已正确定义和初始化。

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  'event': 'pageview',
  'pageTitle': 'Home Page',
  'userType': 'registered'
});

验证GTM变量配置：
- 在GTM管理界面中，检查自定义变量的配置是否正确。
- 确保选择了正确的DataLayer变量名。

调整脚本加载顺序：
- 确保GTM脚本在DataLayer定义之后加载。可以在HTML文件的底部（</body>标签前）引入GTM脚本。

<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'event': 'pageview',
    'pageTitle': 'Home Page',
    'userType': 'registered'
  });
</script>

<!-- 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 -->

通过以上步骤，可以确保DataLayer变量正确传递并在自定义JavaScript变量中使用。