Banner templates

Manage Banner

Deploy Banner

Copy Banner

Commanders Act offers multiple banner templates for different kind of privacy workflows.

WCAG standards : offer a privacy fully functional for people with disabilities

Among the available templates, one is dedicated to accessibility. It ensures compatibility with RGAA and WCAG 2.0 level AA standards.

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

More information here : https://www.w3.org/WAI/standards-guidelines/wcag/

What is Web Accessibility ?

When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use.

Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility.

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

• perceive, understand, navigate, and interact with the Web

• contribute to the Web

With this template the main key point is to offer a privacy fully functional for people with disabilities.

Translation

The Accessibility template provides an automatic translation of different labels. This translation is based on navigator language. Currently, it supports : Italian, English, German, French and Russian.

Options :

1. Personalize translation

Banners

You can either add new translation or override aria labels by using the function tC.privacy.addTranslation() in the custom JS.

Labels available :

iframeTitle : Title attribute of the iframe

privacyLabel : Aria Label of the footer

acceptAria : Aria Label of the accept button

refuseAria : Aria Label of the refuse button

showPcAria : Aria Label of the “Show Privacy Center“ Button

Exemple :

tC.privacy.addTranslation({
  en : {
    // overriding
    iframeTitle : 'the iframe title you want',
    privacyLabel : 'the aria label you want',
    acceptAria: 'the aria label you want for accept button',
    refuseAria: 'the aria label you want for refuse button',
    showPcAria: 'the aria label you want for display the pc button'
  },
  ru: {
    // add new translation
    iframeTitle : 'the iframe title you want',
    privacyLabel : 'the aria label you want',
    acceptAria: 'the aria label you want for accept button',
    refuseAria: 'the aria label you want for refuse button',
    showPcAria: 'the aria label you want for display the pc button'
  }
})

Privacy Center

⚠️ To translate the privacy you must use another function: pc.addTranslation()

Available keys and their values :

var en = {
    "pcAria":"Cookie settings",
    "closePrivacyCenter":"Close the cookie setting dialog",
    "acceptAll":"Accept all",
    "refuseAll":"Refuse all",
    "saveLabel":"Save",
    "saveAria":"Save the current cookie settings",
    "acceptAllAria":"Accept all cookies",
    "refuseAllAria":"Refuse all cookies",
    "showVendors":"Show vendors",
    "showPurposes":"Show purposes",
    "vendors":"Vendors",
    "enableCookieLabel":"Enabled:",
    "enableCookieAria":"{label} cookies enabled",
    "disableCookieAria":"{label} disabled cookies",
    "turnOnSubCategoriesAria":"Enable {label} cookies",
    "turnOffSubCategoriesAria":"Disable {label} cookies",
    "cookieAlwaysOnSrPrefix":"",
    "cookieAlwaysOnSrSuffix":"",
    "cookieSrPrefix":"",
    "cookieSrSuffix":"",
    "showRelatedVendors":"Show related vendors",
    "privacyPolicy":"Privacy policy",
    "categories":"Categories"
}

Some of the translation accept a label as {label}. The label here is always the label of the category.

The last keys with SrPrefix/SrSuffix have empty translation by default. These keys are used for “sr-only” text which are prefixing and suffixing the category name. These text are only readable by a screen reader.

cookieSr are used when the category isn’t locked

cookieAlwaysOnSr replaces cookieSr if the category is blocked to on

Example:

pc.addTranslation({
  en : {
    // Override english Aria Label
    closePrivacyCenter: 'Close the privacy center', 

  },
  ru : {
    // you can also add a new language
    closePrivacyCenter: 'Close the privacy center',
      },
})

2. Force Translation

By default, texts provided to screen readers is translated depending on the navigator language. In some case you may want to display a privacy in english for example even if the navigator language is another one. ie : with an ISO language code in the url

You can force the privacy to take a language by using the function setLocale in the Privacy Center > Custom JS field > JS Block Before :

pc.setLocale("fr");

Value can be : fr, it, de, ru or en

Note : this function must be placed after the translation declaration.

3. Focus Trap

The focus trap is an accessibility option designed so that keyboard user have their navigation locked to the banner. Pressing the TAB key would cycle between the different navigation elements of the banner without going on your website. This is an accessibility recommendation when using modal on a webpage.

You can deactivate the focus trap by adding the following JavaScript snippet to the custom JS of the accessibility template banner:

tC.privacy.enableFocusTrap(false);

Administration > Copy management

Commanders Act copy management allows to copy privacy banner. Privacy banners can be copied within the same account or transferred to another account.

Copying a Banner

Steps to copy a banner with copy management.

Step 1

Select Privacy banner(s) in the Elements to copy dropdown.

Step 2

Use the Site containing the privacy banner(s) to copy dropdown menu to select the site where the privacy banner is located that you want to copy.

Step 3

Select one or more privacy banner that you would like to copy in the Privacy banner(s) to copy dropdown menu.

Step 4

Choose one or multiple target sites where you want to copy the selected privacy banner with the Destination site(s) dropdown menu.

Step 5

You can copy your privacy banner to a new template by selecting Yes in the Copy the privacy content to a new template option.

After this you will be able to select the new template in the Destination template dropdown menu.

This will keep the content (text, selected color, etc.) of the banner and change the template.

Step 6

Click on blue buttonCOPY at the top right corner of the interface to copy the banner with the selected options.

Manage Banner

Options to create and edit banner templates.Sources > Privacy banners

Creating Privacy Banner

Click ADD PRIVACY BANNER in the top right of the interface to add a new banner to your account. Each template has following options:

Example: Configuring options of a privacy banner.

Update Privacy Banner

You can open and edit the privacy banner settings via the gear icon on the top left of the interface.

Customize banner content

Sources > Privacy banners (tab EDIT BANNER)

Options for banner customization

All banner templates can be customized with a WYSIWYG editor. Following options are available for all banners (except IAB TCF and Popin with Categories templates).

Changes have to be saved with the SAVE button.

Options for privacy center customization

Following options are available for the privacy center and "Popin with categories" templates.

Changes have to be saved with the SAVE button.

IAB TCF banners advanced options

Customise Publisher Country Code Field

Option to manage the publisherCC field of the IAB TCF API.

​Country code of the country that determines the legislation of reference. Normally corresponds to the country code of the country in which the publisher's business entity is established.

Consent banners sets this value to "FR" by default in the IAB response. The publisher country code field can be customised with following JavaScript snippet (should be implemented in the first container on the website.).

tC.privacy.iabPublisherCC = "<country_code>";

Example to set the publisher country code field to a German country code:

tC.privacy.iabPublisherCC = "DE";

Customise Purpose One Treatment Field

Option to manage the purposeOneTreatment field of the IAB TCF API.

IAB TCF offers this field to specify how purpose one should be treated in specific scenarios.

true: Purpose 1 not disclosed at all. CMPs use publisherCC to indicate the publisher's country of establishment to help Vendors determine whether the vendor requires Purpose 1 consent.

false: There is no special Purpose 1 treatment status. Purpose 1 was disclosed normally (consent) as expected by TCF Policy

Consent banner sets this value to false by default in the IAB response. The purpose one treatment field can be customised with following JavaScript snippet (should be implemented in the first container on the website.).

tC.privacy.iabPublisherCC = (true|false);

Neutral vendor buttons

You can change the vendor button type to neutral if you choose the neutral position as the default status.f

Synchronization mode between vendors and categories

You can choose to synchronize vendors status with categories, choosing to do it only for neutral buttons or always. If you use an IAB TCF template, this option will not have any effects on TCF vendors, as the TCF framework doesn't allow this.

IAB TCF Stacks Beta

Commanders Act Consent offers IAB TCF Stacks to reduce the size of the purpose list in the privacy center. IAB TCF Stacks group purposes and special features in a foldable panel and allows visitors to configure consent for all purposes and special feature in a Stack at once. More information on IAB TCF Stacks can be found in the IAB TCF Policy.

Right now IAB TCF Stacks are in beta in Commanders Act Consent. They are activated with a JavaScript command that needs to be added to the privacy center CUSTOM JS field JS BLOCK BEFORE.Example: Activating Auto Stacks

Commanders Act Consent offers two options to activate Stacks:

pc.iab.useAutoStack();

pc.iab.useStackIds(1,2); // activates Stacks with ID 1 and 2

Move native Categories above IAB Purposes

Per default IAB Purpose controls are placed above native category controls. It is possible to display native categories above IAB TCF Purpose controls by adding following JavaScript snippet to the CUSTOM JS field JS BLOCK BEFORE of the privacy center.

pc.tc.categoriesSectionTop(true);

The "Other" headline of the native category controls can be translated by adding following configuration snippet to the CUSTOM JS field JS BLOCK BEFORE of the privacy center.

pc.addTranslation({en: { others: 'My Headline' }});pc.setLocale('en');

Sources > Privacy banners ( tab GENERATE & DEPLOY)

Generate Banner Versions

To deploy a new or updated banner it is first necessary to generate a new version of the banner. Click GENERATE to open the modal dialogue.

You will have following option when generating a new container version.

Preview New Banner Versions

You can preview and test new banner versions by clicking the TEST option on the right site of the banner version in the banner version list. This will preview the banner on a demo website.

Banner Deployment Options

The deployment process of a new banner version varies depending on the selected hosting method of the privacy banner. You can select the hosting method of a banner in the privacy banner settings that can be accessed with the gear icon on the top left of the interface (beside the privacy banner name).

Commanders Act CDN

Commanders Act CDN ensures a reliable and performant hosting of your banner. It allows to deploy banners automatically and in real-time.

Click DEPLOY to deploy a banner to the Commanders Act CDN.

On premise (self-hosted)

This option allows to self-host privacy banner. It therefore requires manual effort on each update. For on premise hosting it is necessary to provide the URL of the folder where the on premise banner is hosted. Example:

http(s)://www.mydomain.com/myfolder/

Click DOWNLOAD to download on the right side of the new banner files and manually update them on your server.

Container vs. Banner Deployment

In case both TMS and Consent Commanders Act are used to manage tags it is important to understand what needs to be generated and deployed for different update scenarios. Following table lists the elements that needs a generation and deployment for common scenarios.