gtag plugin should support multiple trackingID

[slorber]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

The gtag plugin should only be used at most once per page, but we should be able to use it with multiple "Google Products" as documented here:
https://developers.google.com/tag-platform/gtagjs/install#add-products

Notably, it is important for the UA => GA4 transition (#7221) because for a smoother analytics migration, we want to collect analytics to the old UA id and to the new GA4 id
(from now on to June 2023 until collecting data for UA becomes useless, see #7221 for details).

In this case, we should call gtag("config",trackingID) multiple times.

gtag('config', 'G-XXXXX');
gtag('config', 'AW-XXXXX');
gtag('config', 'DC-XXXXX');

(ideally we should be able to provide different product configs for each config, but we can keep it simple for now and just support multiple configless ids)

Has this been requested on Canny?

No response

Motivation

Make the gtag plugin more powerful, tracking to multiple analytics accounts, tracking Google Ads...

API design

We should prevent duplicate usage by throwing an error if id !== "default"

We should allow passing trackingID: ["G-XXXXX","AW-XXXXX","DC-XXXXX"] as an array of strings instead of just one single string id.

Note: it might be worth studying if passing an array is enough.

We might as well want to use different configs for each?

See also
https://stackoverflow.com/questions/54280439/how-to-combine-ua-and-aw-tracking-tags

Have you tried building it?

No response

Self-service

• I'd be willing to contribute this feature to Docusaurus myself.

[Sarfraz-droid]

Hi, I was just looking into the plugin. Is the support something like this?

        headTags: [
          {
            tagName: 'link',
            attributes: {
              rel: 'preconnect',
              href: 'https://www.google-analytics.com',
            },
          },
          {
            tagName: 'link',
            attributes: {
              rel: 'preconnect',
              href: 'https://www.googletagmanager.com',
            },
          },
          // https://developers.google.com/analytics/devguides/collection/gtagjs/#install_the_global_site_tag
          ...trackingID.map((id) => ({
            tagName: 'script',
            attributes: {
              async: true,
              src: `https://www.googletagmanager.com/gtag/js?id=${id}`,
            },
          })),
          {
            tagName: 'script',
            innerHTML: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              ${trackingID.map(() => `gtag('config', '${trackingID}',{ ${anonymizeIP ? "'anonymize_ip': true" : ''} });`).join('')}
              `,
          },
        ],

[slorber]

@Sarfraz-droid it's not ideal. We should probably make it possible to pass different configs.

This is something users might want to do:

  gtag('config', 'G-XXXXX',config1);
  gtag('config', 'AW-YYYYYYYYY', config2);

but maybe it's a bit overkill though, I don't know who would use that and when? 🤷‍♂️

If you want to work on this, a good first step would be to read this doc: https://developers.google.com/tag-platform/gtagjs/install
And figure out it it's worth it and what are the different possible configs (docs doesn't make it easy to find this info)

---

Note from https://support.google.com/analytics/answer/2763052?hl=en

I guess the gtag plugin anonymizeIP option should be deprecated