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

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>

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.

For the people using Google Tag Manager, you can set the SameSite attribute for the Google Analytics tracking cookies within the GTM Configuration.

1. In Google Tag Manager, go to Variables

2. Find your GA Tracking ID variable, and click to edit

3. Under More Settings -> Fields to set

   • Add the Field Name cookieFlags
   • Set the Value to whatever SameSite value you want, e.g. samesite=none;secure
     

4. Save and publish a new version of your GTM configuration.

If done correctly this should resolve the browser warnings you are seeing.

In case you are using react-ga npm package:

ReactGA.initialize("UA-XXXXXX-1", { gaOptions: { cookieFlags: "SameSite=None;Secure" } });