Support for Google Analytics 4 IDs

[mpaluchowski]

Can we have the support for Google Analytics 4 properties? The older versions will not be supported from mid-2023, and Google is asking everyone to migrate.

1. The configuration form will need to accept an ID that starts with G-.... Here's the format description from Google.
2. There's a new snippet required, using gtag.js. Here's the migration guide showing the new code.

[fisharebest]

Do we need to change the validation on the input form to accept either prefix - or is there more to this?

Sorry - google have locked my google account, and I cannot access or test any google services.

[mpaluchowski]

That was my understanding, as Google's documentation isn't very clear on that, and I thought you could use the old analytics.js code with the new tags. Alas, no. There's a new snippet required for V4 properties. I'll update the ticket description.

[fisharebest]

Can you provide the snippet?

I presume that we can use

if (starts with UA) {
  use old snippet
} else {
  use new snippet
}

[mpaluchowski]

Actually, you could replace the whole snippet with the new gtag.js code, which supports both Universal Analytics (as long as it's working, until mid-2023), and the new v4 properties. Below GA_MEASUREMENT_ID should be the actual property ID (UA-... or G-...).

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<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>

[fisharebest]

The existing snippet has code to support additional "dimensions". In our case, we send the current tree.

https://github.com/fisharebest/webtrees/blob/2.1.2/resources/views/modules/google-analytics/snippet.phtml#L15

Do you know how to add this in the new snippet?

[mpaluchowski]

I think the snippet below would be the closest. pageview is now getting sent automatically with config. You can add custom parameters to config, which then apply to all pages, but in order for them to become dimensions, we need to have the extra custom_map settings. (I made a few shortcuts below to demonstrate the mapping, while you'll probably want to use the $dimensions variable.)

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<?=  e($GOOGLE_ANALYTICS_ID ?? '') ?>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '<?=  e($GOOGLE_ANALYTICS_ID ?? '') ?>', {
      'custom_map': {'dimension1': 'tree_name', 'dimension2': 'access_level'},
      'tree_name': '<?= $tree->name() ?>',
      'access_level': '<?= Auth::accessLevel($tree, $user) ?>',
  });
</script>