gtag plugin should support multiple trackingID

[slorber]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Description

https://developers.google.com/tag-platform/gtagjs/install

The gtag plugin should only be used at most once per page.

It makes sense for some use-cases to use gtag with multiple ids, in which case we should call gtag("config",trackingID) multiple times.

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

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