How to set “secure” attribute of the cookies used by Google Analytics Global Site Tag (gtag.js)?

问题

I'm using Google Analytics Global Site Tag (gtag.js) tracking code on my Github Pages. The following tracking code is copy-and-pasted as the first item into the <HEAD> of every webpage I want to track (I replaced my own tracking ID with GA_MEASUREMENT_ID):

<!-- 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>

Recently, when I open my Github Pages site with Firefox browser, the console logs the following warning messages:

Cookie “_ga” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Cookie “_gid” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

How can I fix this issue?

回答1:

The gtag.js cookie settings can be customized. Specifically, we can set cookie_flags field to solve the issue.

In the tracking code, the line

gtag('config', 'GA_MEASUREMENT_ID');

should be changed to

gtag('config', 'GA_MEASUREMENT_ID', { cookie_flags: 'SameSite=None;Secure' });

to fix the issue.

So the whole tracking code should be the following (Don't forget to replace the two occurrences of GA_MEASUREMENT_ID with your own tracking ID):

<!-- 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', { cookie_flags: 'SameSite=None;Secure' });
</script>

UPDATE (Thanks to @RichDeBourke for the comment):

The console can still log a warning message like the following:

Cookie “_ga” has been rejected for invalid domain.

To fix the issue, cookie domain of gtag.js needs to be configured. So the line mentioned in the original answer

gtag('config', 'GA_MEASUREMENT_ID', { cookie_flags: 'SameSite=None;Secure' });

should be further edited to

gtag('config', 'GA_MEASUREMENT_ID', {
  cookie_domain: 'YOUR_GITHUB_PAGES_DOMAIN',
  cookie_flags: 'SameSite=None;Secure',
});

Then, the whole tracking code is the following (Don't forget to replace YOUR_GITHUB_PAGES_DOMAIN with your own GitHub pages domain (which is, typically, <username>.github.io where <username> is your actual GitHub user name) and the two occurrences of GA_MEASUREMENT_ID with your own tracking ID):

<!-- 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', {
    cookie_domain: 'YOUR_GITHUB_PAGES_DOMAIN',
    cookie_flags: 'SameSite=None;Secure',
  });
</script>

回答2:

I just set up a Google Analytics 4 property, and was getting the same warning in Firefox console as in the original question:

Cookie “_ga” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. ...

But adding the cookie_flags as an option to the gtag('config', ...) invoke was not working for me.

Browser cookie storage revealed that the GA cookies were indeed not being stored with as secure.

I was able to fix the problem by adding an additional gtag('set', ...), like so:

<!-- 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('set', {cookie_flags: 'SameSite=None;Secure'});
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Perhaps something has changed with Google Analytics API?

The Google Documentation seems to indicate that set is how you should be passing cookie_flags.

来源：https://stackoverflow.com/questions/62569419/how-to-set-secure-attribute-of-the-cookies-used-by-google-analytics-global-sit

标签

google-analytics

gtag.js