vue gtm区分不同页面的访问 后台展示不同名字

Vue.js 和 Google Tag Manager (GTM) 结合可以让你跟踪和分析网站的不同页面访问，并根据页面内容为后台提供不同的数据标识。要在 Vue 中实现这个功能，你可以按照以下步骤操作：

1. **设置 GTM**:
- 在 GTM 管理界面创建一个新的变量，比如 "Page Title" 变量，用于提取页面标题。
- 配置该变量，让它从 Vue 页面的 `<title>` 元素或自定义组件的 `data` 中获取值。

2. **Vue 中的数据传递**:
- 在 Vue 组件里，给每个需要识别的页面分配一个唯一的数据属性（例如 `metaTitle`），在模板中显示这个属性，如 `<h1>{{ metaTitle }}</h1>`。

3. **触发事件**:
- 使用 Vue 的 `$emit` 或者 Vuex 规模更大的应用状态管理，当路由变化或页面加载完成后，触发一个自定义事件，比如 `onPageChange` 并传入相应的页面信息。

// 示例：在 Vue 组件中触发事件
this.$emit('onPageChange', { name: this.metaTitle });

// 在父组件监听事件并处理数据
methods: {
  handlePageChange(data) {
    window.dataLayer.push({
      event: 'customEvent',
      pageName: data.name,
    });
  }
}

4. **GTM 代码片段**:
- 在 GTM 的 HTML 注入代码中添加一个数据层事件，监听你的自定义事件（如 `customEvent`），并在事件触发时读取“pageName”变量。

5. **后台接收**:
- 在服务器端或者数据库查询脚本中，根据 GTM 发送过来的 `pageName` 参数，展示相应的页面名称或者其他你需要的定制信息。