javascriptgoogle-analyticsgoogle-analytics-4universal-analytics

How to define Content Group in GA4 with Javascript (ie: using gtag instead of Tag Manager)


I'm migrating from Universal Analytics to Google Analytics 4. We don't use Google Tag Manager, we directly inject scripts on our web pages.

As suggested in migration guides, I integrated the GA4 script next to the UA script. Both tracking should work in parallel.

Here is the Javascript code. It includes some variables computed server-side (content_group and dimensions.

In UA, content group and custom dimensions are correctly defined. In GA4, custom dimensions are correctly passed but but content group is marked as (not set)

Here is the code I include in every web page.

<!-- Google tag (gtag.js) - GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VPPGG41SM8"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-VPPGG41SM8');
  gtag('set', 'content_group', '<%= content_group %>'); // Defined server-side with some business logic

  gtag('set', 'user_properties', {
    'client_type': "<%= dimensions.client_type %>", // same here
    'subscription_type': "<%= dimensions.subscription_type %>", // same here
    'mrr': "<%= dimensions.mrr %>", // same here
    'lifetime_value': "<%= dimensions.lifetime_value %>", // same here
  });
</script>

<!-- Google tag (gtag.js) - Universal Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45949596-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-45949596-1', {
    'optimize_id': 'GTM-WG8W868',
    'content_group1':  "<%= content_group %>",
    'content_group2':  "<%= content_group_2 %>",
    'custom_map': {
      'dimension1': 'client_type',
      'dimension2': 'subscription_type',
      'dimension3': 'mrr',
      'dimension4': 'lifetime_value',
    },
  });
  gtag('set', {
    'content_group1': "<%= content_group %>",
    'content_group2': "<%= content_group_2 %>",
    'dimension1': "<%= dimensions.client_type %>",
    'dimension2': "<%= dimensions.subscription_type %>",
    'dimension3': "<%= dimensions.mrr %>",
    'dimension4': "<%= dimensions.lifetime_value %>",
  });
</script>

On GA4, when I display numbers based on content group:

not set content group

What am I doing wrong?!


Solution

  • I have bad news, since GA4 you can't use more than one content_group.

    Also content_group must be set using config, you should do you something like this:

    gtag('config', 'G-KEYVALUE', {
        'content_group': 'ONLY_ONE_VALUE'
    });