如何通过 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 用户属性教程user_location中通过 GA4 中的 gtag.js标记用户属性的示例。

以下是关于从 Analytics.js 升级到 gtag.js 的提示favorite_composer中通过 GA4 中的 gtag.js 标记、favorite_instrument和season_ticketholder用户属性的示例。

通过该方法vue-gtag可以完全访问 gtag API query（vue-gtag 的查询参考）。如果favorite_composer是“用户登录后我想在 GA 中发送的用户特定信息作为每次点击的自定义维度”，您可以使用类似于以下的代码来完成此操作：

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

这能解决您的问题吗？