Build a Custom Cookie Consent Banner for Your Website

  • Updated

If you need to add a cookie consent notice to your website (for GDPR compliance, for example), you can use Google Tag Manager to manage all cookies and build a customized banner with Cookie Consent to allow your site visitors to consent to collect marketing data.

Together, this creates a holistic cookie management solution. Once complete, your visitors will see the Cookie Consent dialog and can choose whether or not the Act-On cookie is placed on their device with tracking enabled.

About this guide:

  • This guide uses Google Tag Manager and Cookie Consent (both free services), but may work with minor changes for other tag managers and cookie consent systems
  • These steps also work to present cookie consent only, without the ability to opt-in/opt-out of tracking
  • This approach can accommodate all tags on your website (Google Analytics, Optimizely, etc.), showing one consent message that covers cookies from all vendors you leverage

Process diagram



Set up Google Tag Manager (GTM)

  1. Go to the Google Tag Manager site
  2. Sign up and log in
  3. Create a website container in GTM and add the container snippet to your website according to the on-screen instructions

Grab the Cookie Consent banner code

  1. Visit Osano's Cookie Consent configuration wizard
  2. Click Start Coding at the bottom right
  3. Under Configure, click the Compliance Type drop-down
    Do not make any other changes to configuration settings in Osano, including Position, Layout, or Palette configurations. Act-On only supports configuring your Cookie Consent banner code as instructed here.
  4. Select Ask users to opt into cookies (Advanced)
  5. Copy the 2 pieces of code that appear on the right-hand side

Paste and edit your Cookie Consent banner code in GTM

  1. Head back to Google Tag Manager
  2. Click Tags > New > Custom HTML Tag
  3. Paste both portions of your Cookie Consent code (in the order provided by Osano's website)
  4. Delete the last few lines of code – remove everything between the last }, through the closing </script> tag:
  5. Copy the below code and paste it at the end of your Custom Cookie code snippet
    • This code monitors the state of your visitors' opt-in/out selection and reports it to GTM
    • Note: This is a slightly altered version of code in Cookie Consent's documentation to push events to the browser’s data layer for listening
    onInitialise: function (status) {
    var type = this.options.type;
    var didConsent = this.hasConsented();
    if (type == 'opt-in' && didConsent) {
      // enable cookies
    if (type == 'opt-out' && !didConsent) {
      // disable cookies
    onStatusChange: function(status, chosenBefore) {
    var type = this.options.type;
    var didConsent = this.hasConsented();
    if (type == 'opt-in' && didConsent) {
      // enable cookies
    if (type == 'opt-out' && !didConsent) {
      // disable cookies
    onRevokeChoice: function() {
    var type = this.options.type;
    if (type == 'opt-in') {
      // disable cookies
    if (type == 'opt-out') {
      // enable cookies
     "type": "opt-in"
  6. Before saving, set the Trigger to All Pages to ensure your cookie consent banner is always run on all pages

Create a new GTM variable

Next, create a new variable in GTM to report visitors' cookie consent status:

  1. Click Variables on the left of GTM, then click New in User-Defined Variables
  2. Select the type 1st Party Cookie, enter a Cookie Name of cookieconsent_status, and select URI-decode cookie
  3. Name the variable cookieconsent_status cookie and click Save

Create an opt-in trigger in GTM

Create a trigger that lets GTM listen for a visitor's first opt-in or for a change in their opt-in choice.

  1. Click Triggers on the left of GTM and create a new trigger
  2. Select the type Custom Event, event name this.hasConsented, and set the trigger to fire on Some Custom Events where Event: equals: this.hasConsented
  3. Name your trigger this.hasConsented and click Save

Create a trigger to run the Act-On tag

Create a final trigger to run the Act-On tag and other cookie-dropping scripts on your website (or to keep them from running):

  1. Click Triggers on the left of GTM and create a new trigger
  2. Select the type Custom Event, event name this.hasConsented, and set the trigger to fire on Some Custom Events where cookieconsent_status cookie: equals: allow
  3. Name your trigger Cookie Consent cookie value and click Save

Create a tag for the Act-On Beacon

Grab the Act-On Beacon code to create another GTM tag:

    1. In Act-On, go to Settings > Other Settings > Beacon Settings
    2. Ensure that Standard Mode is set – GTM will control whether the beacon code runs
    3. Copy the Beacon code
    4. Head to Google Tag Manager
    5. Click Tag > New > Custom HTML Tag and paste your Act-On Beacon code
    6. Set the trigger for Cookie Consent cookie value
    7. Name the Tag Act-On Beacon and click Save – you now have the Act-On tag set to run only when the opt-in status trigger fires

Heads up!

If you have additional website code that needs to obey users' cookie preference (e.g., an on-page chat tool), add that code in new GTM tags using the same Cookie Consent Cookie Value trigger – they will fire only after your site visitor has accepted the use of cookies.

This allows you to manage your scripts and tags on your entire website without working through a web developer and updating your website directly. It also ensures that you get a single cookie notification/consent dialog that covers all of your cookies, which is the best experience for your visitors.

Preview and submit your changes in GTM

  1. Preview your changes in GTM
    • When you open your site in preview mode, the GTM configuration will be applied to you only; you'll also see a helpful debug window below your site
    • This is great for troubleshooting and checking your work after making changes
  2. Submit your changes in GTM – they will go live immediately

Next Steps

Almost there! The last step is to add the GTM code to all your Landing Pages so that these tags will actually fire. Once you've done that, default tracking and placement of Act-On cookies will be off for these pages, and GTM will manage the use of cookies and tags.

Was this article helpful?

Have more questions? Submit a request