如何通过VueJS应用程序在Google Analytics 4中传递自定义用户维度？

Question

我有一个 VueJS SPA，其中包含用户特定信息，一旦用户登录，我想在 GA 中发送这些信息作为每次点击的自定义维度。

我使用了 VueGtag 插件将 GA 4 与我的 SPA 集成。

Vue.use(VueGtag, {
    config: {
        id: "G-XXXXXXXXXX" // Data stream measurement ID 
    },
}, router);

用户范围的自定义维度设置：

vue-gtag

插件提供了一种通过customMap发送自定义尺寸的方法，如下所示:

this.$gtag.customMap({ 'dimension2': 'age' })
this.$gtag.event('age_dimension', { age: 35 })

还按照 GA4 的 gtag 文档进行了尝试：

this.$gtag.query('set', { dimension2: 'age' })
this.$gtag.event('age_dimension', { age: 35 })

采用上述方法。我可以实时查看事件数据，但如果在

Engagement

选项卡以及其他一些类中查看，它会显示（未设置）。例如：

Pages and Screens

.

Answer 1

最好通过在标记中创建用户属性来标记用户特定信息。在 GA4 报告中，用户属性被报告为用户范围的自定义维度（详细了解 GA4 中的自定义维度和指标）。

这是在

Optimize Smart 的 GA4 用户属性教程

上通过 GA4 中的 gtag.js 标记 user_location 用户属性的示例。

以下是在 GA4 中通过 GA4 中的 gtag.js 标记

favorite_composer

、

favorite_instrument

和

season_ticketholder

用户属性的示例，关于从 Analytics.js 升级到 gtag.js 的提示。

vue-gtag

通过

query

方法可以完全访问gtag API（

vue-gtag关于查询的参考）。如果 favorite_composer

 是“用户登录后我想要在 GA 中发送的用户特定信息，作为每次点击的自定义维度”，您可以使用类似于以下的代码来完成此操作：

this.$gtag.query('set', 'user_properties', {
        favorite_composer: 'Mahler'
      })

这能解决您的问题吗？

Answer 2

In the vueJs file script, 

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Replace GA_MEASUREMENT_ID with your actual Google Analytics 4 Measurement ID.

Add the custom dimensions using the below code:

gtag('set', {'user_properties': {'custom_dimension_name': 'custom_dimension_value'}});