Easy Cookie Consent with Google Tag Manager

zac 2 Comments

Google Tag Manager (GTM) should have a built-in method to manage firing tags based on user consent, but it doesn’t. While looking for a good way to set this up, I was bewildered by the insanely complex methods people were coming up with.. Thankfully, there’s an easier way that doesn’t involve editing site code!

Note: The below may help make your site more GDPR or CCPA compliant, but it’s not everything you need to do. Go talk to a lawyer and get some proper advice!

Google Tag Manager basics

First, set up Google Tag Manager on your website and use it to fire something like a Google Analytics tag. Doing so is fairly straight forward, and there are heaps of guides online to show you how it’s done. For WordPress sites, I can recommend the Google Tag Manager for WordPress plugin. You’ll need to have GTM firing at least one tag so you can see the difference between having and not having user consent.

Osano Cookie Consent basics

Next – go to Cookie Consent by Osano. Osano offer two versions of their consent tool: a paid version and an open source free version. Unless you feel like paying (and it’s not a bad service from all reports), you want the open source version.

The download page has a table comparing the two versions – at the bottom, click the Start Coding button. In the Configure section, go through steps 1-6 to set up how you want your consent prompt to appear.

Here’s where we start ignoring most of their instructions 😉

All Consent Types

Irrespective of which consent compliance option you selected, you need to load the Osano code as a tag. In Google Tag Manager, create a new Custom HTML tag:

  1. Give it a name: “Cookie Consent by Osano”
  2. Copy both blocks of code from the Osano site (Copy HTML followed by Copy Code) into the HTML box in GTM
  3. Configure a firing trigger so this tag loads on All Pages as a Page View

Save and publish in GTM. What you do next depends on what type of consent you need..

  1. Just let the user know we’re using cookies
  2. Give the user the ability to opt out of cookies
  3. Require the user to opt in to cookies before using them

Consent Type 1: Inform User

If you selected the compliance option “Just tell users that we use cookies” – there’s nothing more you need to do! The consent prompt should now load on each page until the user dismisses it. 🙂

Consent Type 2: Opt Out

If you selected the compliance option “Let users opt out of cookies (Advanced)” – there’s a little more to do, but it’s easy. Ignore the warning about needing to modify your site. 😉

The Cookie Consent script stores the user choice in a cookie, so we need to tell GTM to read it and use it:

Read Cookie

In GTM, create a new Variable:

  1. Call it “Cookie Consent Status” or similar
  2. Select ‘1st-Party Cookie’ as the variable type
  3. For Cookie Name, enter cookieconsent_status

Use Consent Status

Still in GTM, create a new Trigger:

  1. Call it “Cookie Consent equals deny”
  2. Select ‘Page View’ as the trigger type
  3. Choose ‘Some Page Views’
  4. Select ‘Cookie Consent Status’ (or whatever you called the variable) in the first drop down
  5. Choose ‘equals’ in the second drop down
  6. Enter deny as the text

The line should now read “Cookie Consent Status equals deny”.

To make use of this trigger, go into each of the tags that are configured to fire using a trigger (except the Cookie Consent tag, obviously). Add an “exception” trigger, then choose the ‘Cookie Consent equals deny’ trigger you created above.

Finally, save and publish in GTM – tags should now be suppressed if your users choose to deny cookies. It’s important to note that tags will fire even if the consent prompt is ignored, so if you need to stop serving up delicious cookies until someone allows them..

Consent Type 3: Opt In

Aka – the GDPR option. This one sucks because you won’t get analytics data unless someone clicks ‘Allow cookies’, but if it’s what you need to do..

First, read through Consent Type 2 above. You need to create the same Variable in the Read Cookie section, but then things are a bit different:

Are Cookies Definitely Allowed?

In Google Tag Manager, create a new Trigger:

  1. Call it “Cookie Consent does not equal allow”
  2. Select ‘Page View’ as the trigger type
  3. Choose ‘Some Page Views’
  4. Select ‘Cookie Consent Status’ (or whatever you called the variable) in the first drop down
  5. Choose ‘does not equal’ in the second drop down
  6. Enter allow as the text

The line should now read “Cookie Consent Status does not equal allow”. This is a little confusing, but this is different to the previous trigger in that it will also block tags if the user hasn’t made a choice. Logic is fun!

As with Consent Type 2, go into each of the tags that are configured to fire using a trigger (except the Cookie Consent tag). Add an “exception” trigger, then choose the ‘Cookie Consent does not equal allow’ trigger you just created.

One last thing – and this is optional – but when someone accepts cookies, you probably want to reload the page to fire all the tags that were being suppressed until now. To do so, you need to create another trigger and a tag:

Listen for the Allow Cookies click

We need to make sure GTM is paying attention to CSS classes on elements users click:

  1. In GTM, go to ‘Variables’
  2. Click ‘Configure’ in the ‘Built-In Variables’ section
  3. Scroll through the list and ensure the ‘Click Classes’ option is checked.

Now, create a trigger:

  1. Call it something like “Allow cookies button click”
  2. Choose ‘Click – All Elements’ as the trigger type
  3. Select ‘Some Clicks’
  4. Choose ‘Click Classes’ in the first drop down
  5. Select ‘contains’ in the second drop down
  6. Enter cc-allow as the text

The line should now read “Click Classes contains cc-allow”.

Reload page when the user accepts

When the user clicks on the Allow cookies button, we need to do something with it..

Still in GTM, create another Custom HTML tag:

  1. Call it “Reload Page”
  2. In the HTML box, enter the following:
    <script>window.location.reload();</script>
  3. Select ‘Allow cookies button click’ as the trigger

At long last – save and publish in GTM. This configuration prevents tags from firing unless they’re allowed and reloads the page when the user allows them so you don’t lose the pageview.

Configure Homebridge as a Service on Debian

zac

Homebridge is a fantastic mechanism for getting non-HomeKit-certified smart home tech talking to Apple. It’s nerd tech written for nerds, so it’s not the easiest thing in the world to get running. Here are some instructions to make things work on Debian and friends (including Raspberry Pi and Ubuntu):

Note that these instructions are going off old memory, so they may be slightly wrong – I’ll retest and fix anything that needs fixing soon!

First thing’s first – make sure everything is up to date:

sudo apt-get update
sudo apt-get upgrade

Install Node.js

Next, install Node.js from the NodeSource GitHub (don’t use the repositories of your distro, as they’re probably outdated). After installation, update to the latest release and install build tools:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

sudo apt-get install -y build-essential

I like to reboot at this point, but that’s in no way essential.

Install Homebridge

The following installs Homebridge (note the --unsafe-perm flag) and the Homebridge Dummy Switches plugin. The plugin isn’t critical, but I seem to remember having difficulties getting things working without at least one plugin. Besides, the Dummy Switches plugin can be fairly handy for certain types of automation..:

sudo apt-get install libavahi-compat-libdnssd-dev
sudo npm install -g --unsafe-perm homebridge
sudo npm install -g homebridge-dummy

Next, create a very basic config at ~/.homebridge/config.json:

{
  "bridge": {
    "name": "Homebridge",
    "username": "CC:22:3D:E3:CE:30",
    "port": 51826,
    "pin": "031-45-154"
  },
  "description": "Homebridge Server",
  "platforms": [
    {}
  ],
  "accessories": [
    {
      "accessory": "DummySwitch",
      "name": "My First Switch"
    }
  ]
}

Run Homebridge directly at the command line to test:

homebridge

An ascii-art QR code will appear; you can use this code to add Homebridge to HomeKit using the Home app. Ignore warnings about the accessory not being certified.

Create systemd service for Homebridge

The instructions below assume you used the instructions above to install Node.js and Homebridge – paths may be different if you didn’t.

Pre-requisites

The following commands create the service user and directories, then moves the existing configuration into the appropriate locations for starting Homebridge as a service. Finally, set the relevant permissions..:

sudo useradd -M --system homebridge
sudo mkdir /var/lib/homebridge

sudo cp ~/.homebridge/config.json /var/lib/homebridge/
sudo cp -r ~/.homebridge/persist /var/lib/homebridge

sudo chmod -R 0777 /var/lib/homebridge

Systemd config files

Create /etc/default/homebridge:

# Defaults / Configuration options for homebridge
# The following settings tells homebridge where to find
# the config.json file and where to persist the data
# (i.e. pairing and others)
HOMEBRIDGE_OPTS=-U /var/lib/homebridge

# If you uncomment the following line, homebridge will log more
# You can display this via systemd's journalctl:
# journalctl -f -u homebridge
#DEBUG=*

Create /etc/systemd/system/homebridge.service:

[Unit]
Description=Node.js HomeKit Server
After=syslog.target network-online.target

[Service]
Type=simple
User=homebridge
EnvironmentFile=/etc/default/homebridge
ExecStart=/usr/local/bin/homebridge $HOMEBRIDGE_OPTS
Restart=on-failure
RestartSec=10
KillMode=process

[Install]
WantedBy=multi-user.target

Finally, enable and start the service:

sudo systemctl daemon-reload
sudo systemctl enable homebridge
sudo systemctl start homebridge

Links and Howtos

Here’s what I used to get myself up and running:
https://github.com/nfarina/homebridge
https://github.com/nfarina/homebridge/blob/master/config-sample.json
https://gist.github.com/johannrichard/0ad0de1feb6adb9eb61a/
https://timleland.com/setup-homebridge-to-start-on-bootup/

Connect a Sensibo Sky to HomeKit via Homebridge

zac

Very few smart thermostat / smart air conditioner controls are available in Australia, and exactly none of them work with HomeKit out of the box. I have a Sensibo Sky in my lounge room, and with the help of some Homebridge tomfoolery – it works brilliantly with HomeKit!

Here’s how it works:

Configure controller

You need to be able to control your air conditioner via the Sensibo app before anything is going to work with Homebridge. Use the included instructions to download the app, connect the Sensibo Sky to your WiFi network and set things up.

Next, log into https://home.sensibo.com/, click the hamburger menu and select Create API Key. The API is how the Homebridge plugin communicates with the Sensibo servers and ultimately controls your air conditioner.

Homebridge plugin and config

First, you should definitely check out my guide for getting Homebridge up and running – come back here once you’re done:

Configure Homebridge as a Service on Debian

There are a number of Homebridge plugins for controlling Sensibo devices – the one I’ve had the most success with is Homebridge Sensibo Sky 7 modes Plugin:

sudo npm install -g homebridge-sensibo-sky-7modes
Once the plugin is installed, use the configuration below – all you should need to do is add your own API key, but you can adjust settings to taste:

"platforms": [
    {
        "platform": "SensiboSky",
        "name": "Sensibo",
        "apiKey": "YOURAPIKEYGOESHERE",
        "timeLapse": 5,
        "ai": false,
        "hideFan": false,
        "hideHumidity": true,
        "fixedState": "auto"
    }
]

Keep in mind this is just a snippet and needs to be added to your Homebridge config.json file. If you’re not 100% sure you have the right syntax, check it at JSONLint.

Time to restart Homebridge:

sudo systemctl restart homebridge

After a few moments you should have two new icons in the Home app:

  1. A thermostat icon with the temperature
  2. A fan icon that allows you to set the fan speed

I’ve set it up this way because I’ve had very little luck with letting Homebridge control the fan speed automatically. It’s possible that it’s just my air conditioner; you may have better luck in using the automatic fan settings with yours.

Automation

Once the Sensibo Sky is working with Homebridge, you can set up some pretty cool automation! I’ve got “Auto Cool” and “Auto Heat” scenes that automagically turn the air conditioner on and off to maintain a consistent temperature in the room.

To set this up yourself, you need to use a 3rd party HomeKit app – I use Home. At A$22.99 it’s quite an expensive app, but it’s definitely been one of my better buys.

The magic trick is using “Any Change” in temperature as detected by the Sensibo Sky as the trigger event. I’ve tried (and failed) to make this work using other triggers, but this one actually works!

The remaining steps are fairly straight forward: use current temperature and power state of the air conditioner as conditions, then finally set the power state to on or off as the action.

Notes

Placement of the Sensibo Sky is critical! If you still use the regular remote control, the Sensibo Sky has to be somewhere where it can “see” the infrared commands that the remote sends. Even when it can, it will occasionally get out of sync with the actual state of the air conditioner – the only time I actually use the Sensibo app is to get it back in sync again.