DOCSEARCHbyAlgolia
Submit Docs

68publishers Cookie Consent

repository·main·Indexed 41 days ago

https://github.com/68publishers/cookie-consent

An extended version of orestbida/cookieconsent (v1.4.1) providing deep integration with Google Tag Manager (GTM), standardized Google consent storage, and CMP synchronization. It features a custom GTM Tag Template, WCAG 2 compliance, support for composite consent event triggers, and the ability to manage page scripts via data attributes.

Tokens
10.3K
Snippets
24
Records
37
Agent score
52%

What's inside 68publishers Cookie Consent

  1. Overview of Cookie Consent features

    main

    The cookie-consent package is an extended integration of orestbida/cookieconsent specifically designed to work with Google Tag Manager.

    Key features include:

    • GTM Template: An easy-to-configure Google Tag Manager template.
    • Standardized Storage: Configurable storages that follow Google's standards.
    • Consent Synchronization: Ability to synchronize consent states across multiple storage mechanisms.
    • Compliance: WCAG 2 compliant and supports storing consents via the 68publishers CMP.
    • Localization: Includes default translations.

  2. Configure composite consent event triggers

    main
    You can define triggers that only fire when multiple storage types are granted. For example, to fire a fb_pixel_trigger only when both analytics_storage and ad_storage are granted, you define the trigger requirements in the configuration to link them to both storages.

  3. Integrate with the CMP application

    main

    You can connect the widget to a Consent Management Platform (CMP).

    User Identity

    Set up user information in the Integration section. Each user needs an identity (ID). You can use the default Generated UUID or a custom GTM variable. The ID is available in translations using the [[user_identity]] placeholder.

    CMP Configuration

    1. Set the URL of your CMP application.
    2. Set the Project Code (defaults to the site domain if left blank).
    3. Consent API enabled: If checked, the widget automatically sends consents to the CMP.
    4. Cookies API enabled: If checked, the widget pulls cookies from the CMP and creates cookie tables. You can define which columns the tables should contain.

  4. Use a custom or self-hosted package source

    main

    By default, the package loads files from unpkg.com. You can change this using the Package source field in your configuration.

    Using jsDelivr

    To use jsDelivr instead of unpkg, enter the following URL in the Package source field: https://cdn.jsdelivr.net/npm/@68publishers/cookie-consent@{version}/dist/ (The {version} placeholder is automatically replaced by the value in your Package version field).

    Self-hosting the package

    To host the files on your own server:

    1. Ensure the complete contents of the dist folder are accessible at your chosen URL.
    2. Set the Package source field to your URL (e.g., https://www.example.com/static/cookie-consent/). You can use the {version} placeholder.
    3. Update GTM Permissions: In your GTM template, go to the Permissions tab and add your domain (e.g., https://www.example.com/) to the Inject scripts section.

    Warning: Every time you update the GTM template, you must re-apply these permission changes as they may be overwritten.

    https://cdn.jsdelivr.net/npm/@68publishers/cookie-consent@{version}/dist/

  5. Trigger tags based on consent storage

    main

    The plugin allows you to fire GTM tags based on specific consent categories (storage types).

    1. Define your storage types in the configuration (e.g., analytics_storage).
    2. In GTM, create a Custom Trigger that listens for the specific event associated with that storage type.
    3. Associate your Tag with this custom trigger.

  6. Integrate Cookie Consent into Google Tag Manager (GTM)

    main

    To use this package within Google Tag Manager, you must import a custom Tag Template. Follow these steps:

    1. Download the Template: Obtain the gtm_template.tpl file from the root directory of the package.
    2. Import to GTM:
      • Open your GTM container.
      • Navigate to Templates in the left sidebar.
      • Click New in the Tag Templates section.
      • Import the gtm_template.tpl file.
      • Click Save.
    3. Create the Tag:
      • Navigate to Tags in the left sidebar.
      • Create a new tag and select the imported Cookie Consent template.
      • Set the trigger to Consent Initialization - All Pages.
      • Save the tag.

    Once configured, the cookie widget will appear when you preview your website.

    # No specific CLI command, follow the manual GTM UI steps above.

  7. Manage revisions and revision messages

    main

    To force users to see the consent modal again (e.g., when terms change), update the Revision field.

    To show a specific message explaining the revision:

    1. Define a custom translation with the key consent_modal_revision_message.
    2. Rewrite the consent_modal_description translation.
    3. Use the placeholder [[revision_message]] in the description. The plugin will replace this with your custom revision message.

    Note: This uses [[revision_message]] instead of {{revision_message}} to avoid conflicts with GTM variables.

  8. Migrate GTM template from v0.4 to v0.5

    main

    When upgrading the Google Tag Manager (GTM) template from version v0.4 to v0.5 or higher, storage configuration fields have been consolidated to accommodate Google Consent Mode v2 (specifically the ad_user_data and ad_personalization storages).

    Important: Values for deleted fields will not be preserved during the update. You must manually reconfigure your storages after updating the template.

    Configuration Changes

    1. Visibility and Default State: The previous individual options Enabled by default, Display in the widget, and Readonly are now merged into a single dropdown menu named Visibility and default state.
    2. Modal Re-prompting: The checkbox Show the modal again if storage is denied has been removed. It is replaced by the input If the storage is denied show the modal again after X days. To disable this feature, set the value to 0.
    3. Package Version: Ensure you update the Package version field to 0.5.0 or higher.

  9. Update an existing GTM container

    main

    To update to a newer version of the cookie-consent template in GTM:

    1. Check the releases for breaking changes.
    2. Re-import the Template into GTM (this updates the template logic while preserving existing tag configurations).
    3. Open your associated tag and update the Package version field.
    4. If self-hosting: You must re-edit the Inject scripts permissions in the template to ensure the new version/URL is allowed.

  10. Configure stylesheets

    main

    Control the visual styling of the widget:

    • Include default stylesheets: If checked, the default CSS is loaded. It is recommended to keep this checked and use custom styles.
    • External stylesheets: A list of custom CSS URLs (one per line).
    • Internal stylesheet: Custom CSS rules injected directly into the page after other styles.

  11. Configure cookie and storage options

    main

    You can manage how consent is stored and how cookies are cleared.

    Cookie Settings

    • Cookie name: The name of the consent cookie.
    • Cookie domain: The domain for the cookie (e.g., .example.com). Defaults to window.location.hostname.
    • Cookie expiration: Expiration in days.
    • Enable cookies auto-clear: If enabled, cookies are deleted based on a strategy.
    • Cookies auto-clear strategy:
      1. Clear all except defined: Deletes all cookies except those listed in Cookie names.
      2. Clear defined only: Deletes only the cookies listed in Cookie names.
      3. Use cookie tables: Uses tables from the original cookieconsent plugin (requires CMP integration).
    • Cookie names: List of cookies to be kept or deleted based on the strategy.

    Storage Types

    Available storage types include: Functionality storage, Security storage, Personalization storage, Ad storage, Ad user data, Ad personalization, and Analytics storage.

    For each storage, you can configure:

    • Visibility and default state:
      • Visible, Enabled by default
      • Visible & Readonly, Enabled by default (typically for Functionality storage)
      • Visible, Disabled by default
      • Hidden, Synchronized (syncs with another storage)
      • Hidden, Disabled always
      • Visible & Readonly, Disabled always
    • Synchronize consent with: Used when state is Hidden, Synchronized.
    • If the storage is denied show the modal again after x days: Re-opens settings after x days if consent was denied.
    • Event trigger name: The name of the event fired when consent is granted.

  12. Configure Consent and Setting modal options

    main

    Both the Consent and Settings modals share common layout and behavior settings:

    • Layout, Position, and Transition: Control the visual appearance and placement.
    • Primary button role and Secondary button role: Define what the buttons do (e.g., accept necessary cookies or open settings).
    • Buttons order: Determines the sequence of buttons.
    • Show third button: Adds a third button. If the secondary button is Open settings, the third becomes Accept necessary (and vice versa).
    • Settings modal trigger selector: A CSS selector used to automatically create a button that opens the settings modal.