How to Track Light/Dark Mode in Google Analytics through Google Tag Manager

Have you ever been on your phone late at night and you visit a web page and you’re suddenly blinded? Light and dark mode could ease that pain for your users, to give them a more pleasant experience. Thankfully, there is a CSS Media query which you can use to control it.

Tracking visits at a session-level, whether they have light mode or dark mode enabled, could help give you some insight to see if visitors are even using that.

This tutorial will walk you through how to track dark and light mode at a session-level within Google Analytics (GA), implemented through Google Tag Manager (GTM).

Step 1

First, click into the container for your Google Tag Manager account.


Step 2

Create a new Dimension in your Google Analytics Property (not View, not Account).

Google Analytics Dimension  - Color Scheme Pref


Step 3

Create a new Variable and set to be Custom Javascript.

function () {
  return window.colorSchemePref;
}

This Variable will be used to pass the data being processed in the browser, back to the Google Analytics tag.


Step 4

Create a new Tag, or edit an existing one if you already have one firing before the GA Tag.

If you’re creating a new Tag, you want to create a Custom HTML tag, and after editing it and saving it, do not add any Triggers to it. We will be adding the Trigger shortly within the GA tag itself.

<script>
(function () {
  window.colorSchemePref = 'No Preference';
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    window.colorSchemePref = 'Dark';
  }
  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
    window.colorSchemePref = 'Light';
  }
})();
</script>

Step 5

You need to add a Tag to fire before the Google Analytics tag fires, which you can set in Advanced Settings.

RELATED  How to Track Ad Block Usage in Google Analytics through Google Tag Manager

I have another tag already firing, so I combined the two into a single Tag since you cannot have multiple tags fire before the Google Analytics tag.

GTM - GA Tag - Color Scheme Preference

You can see I also have my ad blocking tracker tag in there as well.

You will want to set the Tag Firing Priority to be 99990.

Enable the Tag Sequencing to fire this new tag for color scheme detection to fire before the Google Analytics tag.


Step 6

Double-check your primary Google Analytics firing tag to ensure that you have your Custom Dimension firing. You can see below in mine that I have it as Index 2 because I already had another Custom Dimension firing.


Step 7

Publish the changes to production so they become active.

Then start to watch the data flow in. You can see the data by adding a Secondary Dimension to your data view.

Add Secondary Dimension - Google Analytics

Which will in something along these lines. Allowing you track how visitors are viewing your site and give you greater insight to how you should be serving up your site to visitors.

Google Analytics - Color Scheme

H/T to David

9 thoughts on “How to Track Light/Dark Mode in Google Analytics through Google Tag Manager”

  1. This configuration -/method is actually quite nifty and can come in pretty handy. Interesting to see where “media queries” are going to be in the future, in aspects such as this.

    Reply
    • Can you clarify your question a bit more?

      In Step 4, you specifically do not want to setup a trigger, because it will be triggered from the primary GA tag. You will not want it firing separately.

      Reply
  2. Thanks for the hints.
    As this is a step-by-step article, you might want to add that the Analytics tag needs to include the custom dimension when firing – between steps 5 and 6. I overlooked this, and was wondering why nothing was captured.

    Reply
    • Hi Kautilya, feel free to reply with what you’ve done and any particular hurdles you’re running into, and I’ll be happy to help however I can.

      Reply

Leave a Reply