Start free
Documentation

Install the script

Cookiemark runs from one script tag. This page tells you where that tag goes, why the position matters, and how to add it on the platforms our customers use most.

Add your site and copy the line

  1. Sign in and open Sites, then Add site. Enter the address your visitors use, such as shop.example.com.
  2. Open the site. The Install tab shows the line for that site, with its own site key in the address.
  3. Paste the line into your site, as described below for your platform.
  4. Choose your design and texts, then press Publish. The banner appears on the next page view.

The line looks like this, with your own key in place of YOUR-SITE-KEY:

<script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>

You can add the line before you publish anything. Until the first publish the script loads, finds nothing published and shows nothing. So it is safe to put it on a live site today and finish the design tomorrow.

Why the line goes first in the head

The script does two things that have to happen before any other script runs. It tells Google that nothing is allowed yet, and it starts watching the page for trackers it has to hold back. A script that runs earlier has already done its work by the time Cookiemark arrives.

So paste the line as the first script in the <head> of every page. Put it above Google Tag Manager, analytics, pixels and chat widgets.

<head>
  <meta charset="utf-8">
  <script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>
  <!-- Google Tag Manager, analytics and every other script come after this line -->
  ...
</head>

Leave the tag as it is. Do not add async or defer, because both let other scripts run first. The script is small: about 19 KB after compression, plus your own settings.

Keep optimisation tools away from it

Tools that delay, defer or combine scripts change the order you set. Exclude the Cookiemark script from them. Look for a setting called "exclude from delay", "exclude from combine" or similar. Common ones are WP Rocket, LiteSpeed Cache, Autoptimize and Cloudflare Rocket Loader.

When you publish a change

Saving in the dashboard keeps your change as a draft. Visitors see it after you press Publish. Every publish becomes a new version, and we empty the CDN cache for your script at the same moment. Visitors pick up the new version within about a minute, because browsers keep the script for 60 seconds.

Plain HTML

Paste the line directly after the opening <head> tag, on every page. If your pages share a header file or template, paste it there once. Check a few pages afterwards, because hand-built sites often have pages that use a different template.

WordPress

Use our plugin. It puts the script at the very top of the head, keeps WP Rocket, LiteSpeed, Autoptimize and Cloudflare Rocket Loader away from it, clears the page cache when you save, and tells plugins that use the WP Consent API what the visitor chose.

  1. Download the plugin from the Install tab of your site in Cookiemark.
  2. In WordPress, open Plugins, Add new, Upload plugin, and pick the file.
  3. Open Settings, Cookiemark and press Connect with Cookiemark.
  4. Sign in to Cookiemark if you are asked to, pick the site or add it as a new one, and you come back to WordPress.
  5. Publish the site in Cookiemark. The banner then shows on every page.

Connecting also adds the WordPress address to the site's domains, and fills in the path where the plugin sets the consent cookie from your own server, so Safari keeps the choice for its full term. If you cannot use the button, paste the line from the Install tab into the plugin's Site key field instead.

Prefer not to add a plugin? Then add the line by hand:

  • In your theme. Open header.php of a child theme and paste the line directly after <head>, above wp_head(). Edit a child theme, because a theme update overwrites changes to the parent theme.
  • With a plugin. A plugin that inserts code into the head works too. Give the snippet the highest priority it offers, so it lands above the scripts other plugins add through wp_head().

Then clear the page cache of your caching plugin, your host and your CDN. Visitors otherwise keep getting pages from before the change. Exclude the script from optimisation plugins, as described above.

Shopify

  1. In your Shopify admin, open Online Store, then Themes.
  2. Next to your current theme, open the menu and choose Edit code.
  3. Open layout/theme.liquid and paste the line directly after <head>.
  4. Save, and open your shop in a private window to check that the banner shows.

Two limits apply. Shopify's checkout does not use your theme, so the script does not run there. And Cookiemark does not yet pass the visitor's choice to Shopify's own Customer Privacy API.

Webflow

  1. Open your project and go to Site settings, then Custom code.
  2. Paste the line at the top of Head code, above anything else in that field.
  3. Save, and publish the site from Webflow.

Webflow only adds custom code to a published site on a paid site plan. If you also add head code to single pages, check in the page source that the Cookiemark line still comes first.

Wix

  1. In your site's dashboard, open Settings, then Custom code.
  2. Choose Add custom code and paste the line.
  3. Apply it to all pages, place it in the Head, and set it to load on each new page.

Wix needs a premium plan with a connected domain for custom code. Wix also loads its own scripts before yours, and you cannot change that order. Cookiemark can show the banner and hold back the scripts you add, but not what Wix itself loads first. Switch off the cookie banner of Wix itself, so visitors see one banner.

Squarespace

  1. Open Settings, then Advanced or Developer tools, then Code injection.
  2. Paste the line at the top of the Header field and save.

Code injection is not part of every Squarespace plan, so check yours first. Switch off the cookie banner that Squarespace offers itself, so visitors do not see two.

Google Tag Manager

Do not load Cookiemark through Tag Manager. A tag in your container runs after the container has started, which is too late to set Google's consent defaults or to hold anything back. Paste the line in the head instead, and choose one of these two ways for the container itself.

  • Let Cookiemark load the container. Enter your container ID on the Google and GTM tab and remove your own Tag Manager snippet. Cookiemark then loads the container straight after the consent defaults, so the order cannot go wrong.
  • Keep your own snippet. Leave the container ID empty and keep your snippet below the Cookiemark line.

Never do both. A container that loads twice fires every tag twice. Google Tag Manager covers the triggers and events in your container.

Check that it works

  1. Open your site in a private window, so you start without a stored choice. The banner should show.
  2. View the page source and search for cdn.cookiemark.com. It should be the first script in the head.
  3. Run a scan from the Scan tab. It reports pages without the script and a cache that still serves an old copy of your pages.

When a scan finds your script on the site, the domain gets the label Verified. Scheduled scans only run for sites with a verified domain.

More than one domain

The consent log only accepts choices from the domains of your site and their subdomains. If the same banner runs on another domain, add it under Settings, Domains. To remember one choice across all subdomains, enter your main domain under Share the choice across subdomains on the same tab.