Build a Custom Cookie Consent Banner for Your Website

  • Updated

Suppose you need to add a cookie consent notice to your website (for GDPR compliance, for example). In that case, you can use Osano Cookie Consent to manage all cookies and allow your site visitors to consent to collect marketing data. Your visitors will see the cookie consent banner and can choose whether or not the Act-On cookie is placed on their device with tracking enabled.

About This Guide

  • This guide uses Osano Cookie Consent's free service 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.

Instructions

  1. Browse to https://www.osano.com/cookieconsent 
  2. Click Try Osano for Free.
  3. Scroll down and under Self-Service Cookie Consent > Free, click Get Started:

Build a Custom Cookie Consent Banner for Your Website 01.png

  1. A new tab opens detailing your free plan. Click Proceed To Checkout.
  2. Enter your Contact and Address information (including your email address), select the check box to accept the terms of service, and then click Activate Account:

Build a Custom Cookie Consent Banner for Your Website 02.png

  1. Go to the email account entered in the previous step. Open the "Welcome to Osano" email containing your login credentials and click Activate Account. A new browser tab opens.
  2. Enter your email address, click Next, and then enter your password.
  3. Follow the instructions to reset your password and set up two-factor authentication.
  4. The Osano admin console appears. On the left, click Cookie Consent:

Build a Custom Cookie Consent Banner for Your Website 03.png

  1. On the right, click + Add Consent Configuration.
  2. In the configuration settings, add the following:
    • Name - Internal identifier for this configuration.
    • Root Domain - If you own example.com, but your website is hosted on www.example.com, you will want to enter only example.com. Osano automatically works with subdomains of your website with no additional configuration.
    • Policy Link URL - The URL link to the aforementioned policy.
  3. When your configuration is created, at the top right click <> Get Code:

Build a Custom Cookie Consent Banner for Your Website 04.png

  1. Copy this code:

Build a Custom Cookie Consent Banner for Your Website 05.png

  1. Paste this code into the header for each page on your website. This code must be the first script in your document. Then access the web page to run the code.
If you want to use a cookie consent banner in a Landing Page:
  1. In Act-On, open the Landing Page to edit.
  2. In the Design tab, in the Settings sidebar on the right, click Edit Javascript:

Build a Custom Cookie Consent Banner for Your Website 06.png

  1. Paste the code copied from Osano and click OK:

Build a Custom Cookie Consent Banner for Your Website 07.png

  1. Save the Landing Page and in the Properties tab, copy the Public URL:

Build a Custom Cookie Consent Banner for Your Website 08.png

  1. Access the public URL in a browser to run the code.
  1. Wait for the cookie consent script information to be discovered in Osano. This can take a few hours.
  2. When it appears in Osano, in the Scripts tab set the Classification to Marketing, and the Mode to Strict:

Build a Custom Cookie Consent Banner for Your Website 09.png

  1. At the top right, click Save Changes, then click Publish. In the dialog that appears, select the publishing mode you want and click Publish. A confirmation appears.
  2. Check your web page(s) or Landing Page to confirm the cookie consent banner appears, for example:

Build a Custom Cookie Consent Banner for Your Website 10.png

More information from Osano, including how to style your banner in Osano, is here.

Was this article helpful?

Have more questions? Submit a request