With the enforcement of SameSite settings in the latest versions of Google Chrome, it’s become a mad scramble to get cookies working across first-party and third-party contexts. I’ve covered this phenomenon before in my SameSite article, as well as in my guide for setting up cookieless tracking for iframes.

Recently, Google Analytics updated its libraries (App+Web, gtag.js, and analytics.js) with a new setting: cookieFlags (analytics.js) or cookie_flags (App+Web and gtag.js).

NOTE 25 March 2020: The feature isn’t yet officially released, and there might be additional features added to the functionality before it is officially documented. I will update this article with any updates, if necessary.

In this short article, I’ll show you how to use it to customize the cookies Google Analytics uses.

When you create a cookie, you give it a name and a value. Google Analytics, for example, creates a cookie named _ga with a pseudo-random Client ID generated for the current browser instance.

If you create a cookie with nothing but the name and value, it have the following features by default:

  • It will be a session cookie, meaning it has no expiration. When the browser closes, all session cookies are cleared (though not always).
  • It will be written on the current domain the browser is on.
  • It will be written on the current path the browser is on.

On top of these, in the latest version of the Google Chrome browser, the cookie will also be treated as having the SameSite=Lax flag. This means the cookie will not work when accessed in a third-party context.

When setting a cookie, you can configure these fields to your liking. The directives available for configuring are:

Directive Description Example value Google Analytics field
Expires Maximum lifetime of the cookie, specified with a date string. Expires=Tue, 24 Mar 2020 13:37:28 GMT cookieExpires and cookie_expires
Max-Age Maximum lifetime of the cookie, specified in seconds. Max-Age=7200 -
Domain The domain on which the cookie is written. Domain=simoahava.com cookieDomain and cookie_domain
Path The path on which the cookie is written. Path=/ -
Secure The cookie is only sent to the server if the request is made over HTTPS. Secure -
HttpOnly Prevents the cookie from being accessed with JavaScript. HttpOnly -
SameSite Specifies the context in which the cookie can be accessed. SameSite=Strict -

As you can see, there are some fields that you can already set with pre-existing Google Analytics settings, but you’re still missing the option of configuring all aspects of the cookie.

The new cookieFlags field

The new cookieFlags field allows you to set any cookie directive when the Google Analytics cookie is created.

Naturally, this excludes HttpOnly as that is only available for cookies set in the HTTP response.

The value of this setting is a semi-colon separated list of lowercase cookie directives and their respective values. For example, this is a possible value of cookieFlags:

max-age=7200;domain=simoahava.com;path=/;secure;samesite=none

If set as the value of cookieFlags, it would create the Google Analytics cookie with an expiration of two hours (7200 seconds), set it on the simoahava.com domain and on the root path, and make sure it’s only sent with HTTPS requests and make it available as a third-party cookie.

Importantly, cookieFlags takes precedence if some of the flags have already been set with e.g. cookieExpires and cookieDomain. If there’s a conflict, cookieFlags wins.

Set the field in analytics.js

To set the field with Universal Analytics where you’re using inline script to collect data (i.e. not Google Tag Manager), you’d set it like this:

ga('create', 'UA-XXXXX-Y', {
  cookieFlags: 'max-age=7200;secure;samesite=none'
});

The correct place for the cookieFlags parameter is in the tracker creation method, embedded in an object you pass as a parameter to the ga() method.

Set the field in gtag.js

You can set the field with an inline gtag.js implementation as well. The name of the field is cookie_flags rather than cookieFlags.

gtag('config', 'G-N2A3FMNDT5', {
  cookie_flags: 'max-age=7200;secure;samesite=none'
});

Set the field in Google Tag Manager

In Google Tag Manager, the main places where you’d modify this field are the Universal Analytics tags and the App+Web Configuration tags.

Universal Analytics tag

This includes the Google Analytics Settings variable.

The name of the field is cookieFlags and the value is the string of directives you want to set.

App+Web Configuration tag

The name of the field is cookie_flags.

Summary

This is an important update to Google Analytics’ data collection libraries. There are so many scenarios where the first-party cookies used by Google Analytics need to be accessed in third-party context.

These scenarios include, for example, embedded booking flows, embedded forms, and login portals.

Without setting the samesite=none;secure flags in Google Analytics’ settings, the cookies created by GA would not be available in third-party context, thus messing with your ability to track the same user on the parent site and in the embedded resource.

The other fields are useful as well - Max-Age is so much easier to use than Expires, and setting the cookie Secure by default is just a good practice.

Let me know in the comments if you have questions about this new setting!