GithubHelp home page GithubHelp logo

segmentio / consent-manager Goto Github PK

View Code? Open in Web Editor NEW
340.0 18.0 141.0 6.45 MB

Drop-in consent management plugin for analytics.js

Home Page: https://segmentio.github.io/consent-manager/

License: MIT License

JavaScript 8.60% HTML 5.34% TypeScript 86.06%

consent-manager's Introduction

consent-manager build status

⚠️ Community ⚠️

This library is community supported. Segment does not manage or update this library. We suggest forking the repo if changes are needed for your project.

We highly recommend using OneTrust and Segment's Consent Manager Wrapper to benefit from feature enhancements and ongoing support.

Drop-in consent management plugin for analytics.js

StoryBook

Segment Consent Manager

The Segment Consent Manager is an analytics.js add-on with support to consent management.

At its core, the Consent Manager empowers your visitors to control and customize their tracking preferences on a website. They can opt out entirely of being tracked, or selectively opt out of tools in which they don’t want their information stored.

It works by taking control of the analytics.js load process to only load destinations that the user has consented to and not loading analytics.js at all if the user has opted out of everything. The user's tracking preferences are saved to a cookie and sent as an identify trait (if they haven't opted out of everything) so that you can also access them on the server-side and from destinations (warehouse).

Segment works to ensure the Consent Manager Tech Demo works with most of our product pipeline. We cannot ensure it works in your specific implementation or website. Please contact our Professional Services team for implementation support. Please see the License.txt included.

Please note, Consent Manager is not currently compatible with Personas. Personas may send user data to destinations the user has explicitly opted out of for data collection.

Features

  • Give users the ability to opt-in or opt-out to tracking.
  • Fine grained control of tools or categories used for tracking.
  • 30s setup with a drop in script tag.
  • Or fully customizable UI/UX through React components.
  • EU traffic detection through @segment/in-eu.
  • Ability for visitors to reconsent and change preferences.
  • Automatically updates to reflect the destinations you have enabled in Segment.
  • 5.0.0: Consent Manager will add consent metadata to the context of all track calls:

Track call message payloads will be extended to include Consent metadata in the context object:

{
  "context": {
    "campaign": {},
    "consent": {
      "categoryPreferences": {
        "Amplitude": true,
        "Customer.io": true,
        "Google Analytics": true,
        "Webhooks": true
      },
      "defaultDestinationBehavior": "disable",
      "destinationPreferences": {
        "Amplitude": true,
        "Customer.io": true,
        "Google Analytics": true,
        "Webhooks": true
      }
    }
  },
  "event": "Send Track Event Clicked",
  "integrations": {
    "All": false,
    "Amplitude": true,
    "HubSpot": false,
    "Salesforce": false,
    "Segment.io": true
  }
}

Breaking Changes: Version 5.0.0 and above require that your analytics.js snippet include the method addSourceMiddleware in the analytics.methods array:

analytics.methods = [
  'trackSubmit',
  'trackClick',
  'trackLink',
  'trackForm',
  'pageview',
  'identify',
  'reset',
  'group',
  'track',
  'ready',
  'alias',
  'debug',
  'page',
  'once',
  'off',
  'on',
  'addSourceMiddleware' // This method is necessary for Consent Manager to forward consent metadata.
]

Usage

The Segment Consent Manager can be used in several ways, depending on how custom you want your visitor's experience to be.

To get started, make sure you're using the latest version of the analytics.js snippet (4.1.0 or above) and remove the analytics.load("YOUR_WRITE_KEY"); call (so the consent manager can manage the loading process). Then continue onto one of the implementation methods below.

Standalone Script

The standalone script is a prebuilt bundle that uses the ConsentManager React component with Preact (a lightweight React alternative). It's best for if you want to get up and running quickly or you don't have a preexisting React setup.

Include the consent manager script tag after your analytic.js snippet and add your own custom copy. The standalone script can be configured in one of two ways, via data attributes for simple usage or via a global callback function for advanced usage. Both methods allow the consent manager script to be loaded async.

Options

All of the ConsentManager options are supported with the addition of these options:

container

Type: string

CSS selector to the DOM element that will host the consent banner. It should be an empty DOM element (usually a <div>) because the consent manager will replace any existing DOM elements inside it. The element must also exist on the page before the script is executed.

You can also control the positioning of the consent banner by applying styles to the container element (optional). E.g:

#target-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
<div id="target-container"></div>

Globals

The following global variables are also exposed:

  • consentManager.version - Version of the consent manager.
  • consentManager.openConsentManager() - Opens the consent manager preferences dialog.
  • consentManager.doNotTrack() - Utility function that returns the user's Do Not Track preference (normalises the cross browser API differences). Returns true, false or null (no preference specified).
  • consentManager.inEU() - The @segment/in-eu inEU() function.
  • consentManager.preferences - Returns an instance of PreferencesManager with the following helper functions:
    • loadPreferences - returns the cookie value for consent preferences
    • savePreferences - allows for managing the consent cookie programatically (useful if you want to re-hydrate consent from your own database or prefill consent options)
    • onPreferencesSaved(callback) - allows for subscribing to changes in preferences.

Callback Function

All the options are supported. The callback function also receives these exports:

  • React - Reference to the Preact library (the API is React compatible). Useful for if you need to use virtual DOM in your content.
  • version - Version of the consent manager.
  • openConsentManager() - Opens the consent manager preferences dialog.
  • doNotTrack() - Utility function that returns the user's Do Not Track preference (normalises the cross browser API differences). Returns true, false or null (no preference specified).
  • inEU() - The @segment/in-eu inEU() function.
  • consentManager.preferences - Returns an instance of PreferencesManager with the following helper functions:
    • loadPreferences - returns the cookie value for consent preferences
    • savePreferences - allows for managing the consent cookie programatically (useful if you want to re-hydrate consent from your own database or prefill consent options)
    • onPreferencesSaved(callback) - allows for subscribing to changes in preferences.
<script>
  window.consentManagerConfig = function(exports) {
    var React = exports.React
    var inEU = exports.inEU

    var bannerContent = React.createElement(
      'span',
      null,
      'We use cookies (and other similar technologies) to collect data to improve your experience on our site. By using our website, you՚re agreeing to the collection of data as described in our',
      ' ',
      React.createElement(
        'a',
        { href: '/docs/legal/website-data-collection-policy/', target: '_blank' },
        'Website Data Collection Policy'
      ),
      '.'
    )
    var bannerSubContent = 'You can change your preferences at any time.'
    var preferencesDialogTitle = 'Website Data Collection Preferences'
    var preferencesDialogContent =
      'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
    var cancelDialogTitle = 'Are you sure you want to cancel?'
    var cancelDialogContent =
      'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'

    return {
      container: '#target-container',
      writeKey: '<your-segment-write-key>',
      shouldRequireConsent: inEU,
      bannerContent: bannerContent,
      bannerSubContent: bannerSubContent,
      preferencesDialogTitle: preferencesDialogTitle,
      preferencesDialogContent: preferencesDialogContent,
      cancelDialogTitle: cancelDialogTitle,
      cancelDialogContent: cancelDialogContent
    }
  }
</script>

<script
  src="https://unpkg.com/@segment/[email protected]/standalone/consent-manager.js"
  defer
></script>

ConsentManager

The ConsentManager React component is a prebuilt consent manager UI (it's the one we use on https://segment.com) that uses the ConsentManagerBuilder component under the hood. To use it, just mount the component where you want the consent banner to appear and pass in your own custom copy.

Note: Consent Manager is React-based so is not currently compatible with other frameworks such as Vue.js or Angular. In case you want to use it in another framework that is not React, you should use the Standalone implementation.

Install

Using npm:

npm install @segment/consent-manager

Using yarn:

yarn add @segment/consent-manager

Example

import React from 'react'
import { ConsentManager, openConsentManager } from '@segment/consent-manager'
import inEU from '@segment/in-eu'

export default function() {
  const bannerContent = (
    <span>
      We use cookies (and other similar technologies) to collect data to improve your experience on
      our site. By using our website, you’re agreeing to the collection of data as described in our{' '}
      <a href="/docs/legal/website-data-collection-policy/" target="_blank">
        Website Data Collection Policy
      </a>
      .
    </span>
  )
  const bannerSubContent = 'You can change your preferences at any time.'
  const preferencesDialogTitle = 'Website Data Collection Preferences'
  const preferencesDialogContent =
    'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
  const cancelDialogTitle = 'Are you sure you want to cancel?'
  const cancelDialogContent =
    'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'

  return (
    <div>
      <ConsentManager
        writeKey="<your-segment-write-key>"
        shouldRequireConsent={inEU}
        bannerContent={bannerContent}
        bannerSubContent={bannerSubContent}
        preferencesDialogTitle={preferencesDialogTitle}
        preferencesDialogContent={preferencesDialogContent}
        cancelDialogTitle={cancelDialogTitle}
        cancelDialogContent={cancelDialogContent}
      />

      <button type="button" onClick={openConsentManager}>
        Website Data Collection Preferences
      </button>
    </div>
  )
}

Example in Next.js

In Next.js we do not have an html file where to inject the script. Here we will use the Script component to inject the snippet provided by Segment.

import React from 'react'
import Script from 'next/script'
import { ConsentManager, openConsentManager } from '@segment/consent-manager'

export default function Home() {
  const bannerContent = (
    <span>
      We use cookies (and other similar technologies) to collect data to improve your experience on
      our site. By using our website, you’re agreeing to the collection of data as described in our{' '}
      <a href="/docs/legal/website-data-collection-policy/" target="_blank">
        Website Data Collection Policy
      </a>
      .
    </span>
  )
  const bannerSubContent = 'You can change your preferences at any time.'
  const preferencesDialogTitle = 'Website Data Collection Preferences'
  const preferencesDialogContent =
    'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
  const cancelDialogTitle = 'Are you sure you want to cancel?'
  const cancelDialogContent =
    'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'

  return (
    <div>
      <Script
        id="show-banner"
        dangerouslySetInnerHTML={{
          __html: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};;analytics.SNIPPET_VERSION="4.13.2";
          analytics.page();
          }}();`
        }}
      />

      <main>
        <ConsentManager
          writeKey="5V8KznnIFIDh1ejQLbmX7ikfSRa6r8bF"
          bannerContent={bannerContent}
          bannerSubContent={bannerSubContent}
          preferencesDialogTitle={preferencesDialogTitle}
          preferencesDialogContent={preferencesDialogContent}
          cancelDialogTitle={cancelDialogTitle}
          cancelDialogContent={cancelDialogContent}
          bannerActionsBlock={true}
        />

        <button type="button" onClick={openConsentManager}>
          Website Data Collection Preferences
        </button>
      </main>
    </div>
  )
}

ConsentManager Props

This section lists the configurable props you can change when loading the out of the box Consent Manager. In this demo, these are all the props you can pass into the returned preferences object.

writeKey

Type: string Default: none

The write key analytics.js should be loaded with.

You can find more information here. https://segment.com/docs/connections/find-writekey

otherWriteKeys

Type: array<string> Default: []

Write keys for other sources so you can include destinations they use in the Consent Manager tool list. This only displays destinations that are not connected to the primary writeKey.

The user’s consent preferences for these tools are not sent to these additional sources, but they are added to the identify call the Consent Manager sends to Segment. The user’s preferences can then be added to a raw data destination (like a data warehouse) or to a user profile in Personas.

shouldRequireConsent

Type: function Default: () => true

Callback function that determines if consent is required before tracking begins. Set to true to show the consent banner, otherwise return false to not show consent banner and start tracking immediately.

The function can return a Promise that resolves to a boolean.

initialPreferences

Type: object Default: {}

Object that opts into users into tracking for the different tracking categories. For example {‘Functional’:true}

closeBehavior

Type: string or function Default: dismiss

This option sets the default behavior for the x (close) button on the Consent Manager banner. Available options:

  • “dismiss” - dismisses the banner, but doesn't save or change any preferences. Analytics.js won’t load until consent is given.
  • “accept”- assume consent across every category.
  • ”deny” - denies consent across every category.

closeBehavior can also be customized - i.e. don't load some categories, but load everything else. For example, if you wanted to load everything except advertising, you could pass the following as closeBehavior:

closeBehavior={
  (categories) => ({
    ...categories,
    advertising: false
  })
}
implyConsentOnInteraction

Breaking Change (versions < 3.0.0 will default this option true)

Type: boolean Default: false (as of 3.0.0)

Determines whether or not consent should be implied if the user interacts with the website by clicking anywhere outside the Consent Manager banner.

defaultDestinationBehavior

Type: string Default: disable

Determines what the Consent Manager does if the user has already made consent selections and it detects new destination tools. (This is determined by checking if the user already has a cookie set on their browser.)

This is relevant when you've added a connected a new destination to any of the sources managed by Consent Manager.

Options:

  • disable (default) - When you add new destinations, they are set to “disabled” unless a user updates their consent selections by default.
  • enable - When you add new destinations, they are set to “enabled” unless a user updates their consent selections.
  • imply - When you add new destinations, they are enabled or disabled based on the category to which they belong and the user's previous consent to that category. For example, if a user already consented to the marketingAndAnalytics category, and you add a new destination which is in the Analytics category, that destination will be enabled until the user updates their consent selections.
  • ask - When you add new destinations, the Consent Manager automatically opens the preferences dialog on initialization, and asks the user for their consent again.
cookieDomain

Type: string Default: the top most domain and all sub domains

The domain the tracking-preferences cookie should be scoped to.

bannerContent

Type: PropTypes.node

The content of the consent banner.

bannerSubContent

Type: string

The call to action under the primary text in the Consent Manager banner.

bannerActionsBlock

Type: function(object) | boolean

The flag or function to render the actions block. If true value is passed - will render the default buttons block with Accept all and Deny all (required for the GDPR compliance). if the function is passed - will render the passed function into a actions block placeholder.

Function props:

  • acceptAll: () => void - accept all cookies and close the banner
  • denyAll: () => void - deny all cookies and close the banner
  • changePreferences: () => void - open the dialog
bannerTextColor

Type: string Default: #fff

The color of the consent banner text.

bannerBackgroundColor

Type: string
Default: #1f4160

The color of the consent banner background.

bannerHideCloseButton

Type: boolean
Default: false

Hide the close button of the consent banner.

bannerAsModal

Type: boolean
Default: false

Show the consent banner as a modal, blocking the interaction while it is not accepted/rejected.

preferencesDialogTitle

Type: PropTypes.node Default: Website Data Collection Preferences

The title of the preferences dialog.

preferencesDialogContent

Type: PropTypes.node

The top descriptive content of the preferences dialog.

cancelDialogTitle

Type: PropTypes.node Default: Are you sure you want to cancel?

The title of the cancel dialog.

cancelDialogContent

Type: PropTypes.node

The text displayed in the cancel dialog box.

customCategories

Type: PropTypes.object Default: undefined

An object that represents custom consent categories, and which tools are included in these categories. For example, for CCPA compliance, you could create a custom “Do Not Sell” category and list relevant destinations to it.

Note: Calling the customCategories object will overwrite the prebuilt categories (Analytics, Functional, Targeting and Advertising) provided by Consent Manager. Those categories will need to be redeclared inside customCategories. You can find examples here and here.

const customCategories = {
  'New Category': {
    purpose: 'A new consent category to capture more granular consent groupings',
    integrations: ['Google Adwords (Classic)', 'Amplitude', 'Slack']
  }
}

The values for integrations should be an integration's creationName (integration.creationName). You can find examples of that by going to https://cdn.segment.com/v1/projects/<writeKey>/integrations

preferencesDialogTemplate

Type: PropTypes.object Default:

{
  headings: {
    allowValue: 'Allow',
    categoryValue: 'Category',
    purposeValue: 'Purpose',
    toolsValue: 'Tools'
  },
  checkboxes: {
    noValue: 'No',
    yesValue: 'Yes'
  },
  actionButtons: {
    cancelValue: 'Cancel',
    saveValue: 'Save'
  },
  cancelDialogButtons: {
    cancelValue: 'Yes, Cancel',
    backValue: 'Go Back'
  },
  categories: [
    {
      key: 'functional',
      name: 'Functional',
      description:
        'To monitor the performance of our site and to enhance your browsing experience.',
      example: 'For example, these tools enable you to communicate with us via live chat.'
    },
    {
      key: 'marketing',
      name: 'Marketing and Analytics',
      description:
        'To understand user behavior in order to provide you with a more relevant browsing experience or personalize the content on our site.',
      example:
        'For example, we collect information about which pages you visit to help us present more relevant information.'
    },
    {
      key: 'advertising',
      name: 'Advertising',
      description:
        'To personalize and measure the effectiveness of advertising on our site and other websites.',
      example:
        'For example, we may serve you a personalized ad based on the pages you visit on our site.'
    },
    {
      key: 'essential',
      name: 'Essential',
      description: 'We use browser cookies that are necessary for the site to work as intended.',
      example:
        'For example, we store your website data collection preferences so we can honor them if you return to our site. You can disable these cookies in your browser settings but if you do the site may not work as intended.'
    }
  ]
}

An object that represents the text fields of the preferences dialog and allows customizing them. We recommend copying the default object and changing the fields as necessary.

Note: All fields are optional. If they are not included in the template (object) the default fields will be used.

Note 2: For categories, you need to provide the key in order to map all the values properly.

ConsentManagerBuilder

The ConsentManagerBuilder React component is a low level render props component for building your own consent manager UI. It abstracts away all the logic for fetching destinations, checking/saving consent and loading analytics.js.

Note: ConsentManagerBuilder is React-based so is not currently compatible with other frameworks such as Vue.js or Angular. In case you want to use it in another framework that is not React, you should use the Standalone implementation.

Install

Using npm:

npm install @segment/consent-manager

Using yarn:

yarn add @segment/consent-manager

Example

For a more detailed/advanced example, checkout the ConsentManager implementation.

import React from 'react'
import { ConsentManagerBuilder } from '@segment/consent-manager'

export default function() {
  return (
    <ConsentManagerBuilder writeKey="<your-segment-write-key>">
      {({ destinations, preferences, setPreferences, saveConsent }) => (
        <div>
          <h2>Tracking tools</h2>
          <ul>
            {destinations.map(destination => (
              <li key={destination.id}>
                <label>
                  <input
                    type="checkbox"
                    checked={Boolean(preferences[destination.id])}
                    onChange={() =>
                      setPreferences({
                        [destination.id]: !preferences[destination.id]
                      })
                    }
                  />
                  {destination.name}
                </label>
              </li>
            ))}
          </ul>

          <button type="button" onClick={() => saveConsent()}>
            Save
          </button>
          <button type="button" onClick={() => saveConsent(true)}>
            Allow all
          </button>
          <button type="button" onClick={() => saveConsent(false)}>
            Deny all
          </button>
        </div>
      )}
    </ConsentManagerBuilder>
  )
}

ConsentManagerBuilder Props

children

Type: function

The render props function that returns your UI.

writeKey

Type: string

The write key analytics.js should be loaded with.

otherWriteKeys

Type: array<string> Default: []

Other write keys that you want to load destination information for. This is useful for including your server-side destinations in the consent manager, so that you can easily apply the user's tracking preferences to your server-side analytics too. No data will be sent to these write keys.

shouldRequireConsent

Type: function Default: () => true

Callback function that determines if consent is required before tracking can begin. Return true to show the consent banner and wait for consent (if no consent has been given yet). Return false to not show the consent banner and start tracking immediately (unless the user has opted out). The function can return a Promise that resolves to a boolean.

initialPreferences

Type: object Default: {}

The initial value of the preferences. By default it should be an object map of {destinationId: true|false|'N/A'}. If you're using mapCustomPreferences it should be an object map of your custom preferences' default values.

defaultDestinationBehavior

Type: string Default: disable

Determines what the Consent Manager does if the user has already made consent selections and it detects new destination tools. (This is determined by checking if the user already has a cookie set on their browser.)

This is relevant when you've added a connected a new destination to any of the sources managed by Consent Manager.

Options:

  • disable (default) - When you add new destinations, they are set to “disabled” unless a user updates their consent selections by default.
  • enable - When you add new destinations, they are set to “enabled” unless a user updates their consent selections.
  • imply - When you add new destinations, they are enabled or disabled based on the category to which they belong and the user's previous consent to that category. For example, if a user already consented to the marketingAndAnalytics category, and you add a new destination which is in the Analytics category, that destination will be enabled until the user updates their consent selections.
  • ask - When you add new destinations, the Consent Manager automatically opens the preferences dialog on initialization, and asks the user for their consent again.

This setting also also affects Replays to new destinations. Only disable and enable apply to these replays. If you set defaultDestinationBehavior to imply, Segment interprets this as enable during a replay.

mapCustomPreferences

Type: function Default: undefined

Callback function allows you to use a custom preferences format (e.g: categories) instead of the default destination based one. The function gets called during the consent saving process and gets passed (destinations, preferences). The function should return {destinationPreferences, customPreferences} where destinationPreferences is your custom preferences mapped to the destinations format ({destiantionId: true|false}) and customPreferences is your custom preferences if you changed them in the callback (optional).

cookieDomain

Type: string Default: the top most domain and all sub domains

The domain the tracking-preferences cookie should be scoped to.

shouldReload

Type: boolean Default: true

Reload the page if the trackers have already been initialized so that the user's new preferences can take effect.

devMode

Type: boolean Default: false

Disable the analitics.load to make local testing.

useDefaultCategories

Type: boolean Default: false

Use default categories set by Consent Manager instead of detinations.

ConsentManagerBuilder Render Props

destinations

Type: array<object> Default: []

Destinations enabled for the provided write keys. Each destination contains these properties:

{
  id,
  name,
  description,
  website,
  category
}
newDestinations

Type: array<object> Default: []

New destinations that have been enabled since the user last gave consent.

preferences

Type: object Default: {}

The current preferences in state. By default if should be in the format of {destinationId: true|false}, but if you're using mapCustomPreferences the object map can be in any format you want. Note: this isn't the saved preferences.

destinationPreferences

Type: object Default: {}

The current destination specific preferences, i.e. {Amplitude: true}.

havePreferencesChanged

Type: boolean Default: false

A boolean value representing whether or not the user has changed their preferences since opening the preferences modal. Will be set to true if the user interacts with the preferences modal by selecting "Yes" or "No" on any of the consent categories.

This is used to not reload the page if no preferences have changed, as to not create a disruptive user experience.

isConsentRequired

Type: boolean Default: true

The result of shouldRequireConsent.

workspaceAddedNewDestinations

Type: boolean Default: false

A boolean value representing whether or not there have been new destinations connected to the source(s) managed by Consent Manager, compared to the destinations set on the existing cookie.

setPreferences

Type: function(object|boolean)

Sets a preference to a new value in state. By default it takes an object map in the format of {destinationId: true|false}, but if you're using mapCustomPreferences the object map can be in any format you want. It behaves like setState() in that you can set one or more preferences at a time and they get merged with what's currently in state. You can also pass a boolean to set all destination preferences to true or false (you shouldn't do this if you're using mapCustomPreferences).

resetPreferences

Type: function

Resets the preferences state to the value saved in the cookie. Useful for resetting the state when the preferences dialog is closed without saving for example.

saveConsent

Type: function(object|boolean)

Saves the preferences currently in state to a cookie called tracking-preferences, triggers an identify call with destinationTrackingPreferences and customTrackingPreferences traits and then reloads analytics.js using the new preferences. It can also be passed preferences like setPreferences to do a final update before saving.

onError

Type: function(object)

Allows you to manually handle if there is an error when initializing - e.g. if there is an ad blocker that prevented fetching the destinations. This will prevent an uncaught error e.g. Failed to fetch.

Utility functions

  • openConsentManager() - Opens the ConsentManager preferences dialog.
  • doNotTrack() - Returns the user's Do Not Track preference (normalises the cross browser API differences). Returns true, false or null (no preference specified).

Setting Custom Anonymous ID

Analytics.js generates a universally unique ID (UUID) for the viewer during the library’s initialization phase, and sets this as anonymousId for each new visitor to your site. This happens before Analytics.js loads any device-mode destinations, and so before these destination-libraries can generate their own user IDs.

Example

ajs_anonymous_id=%2239ee7ea5-b6d8-4174-b612-04e1ef3fa952

You can override the default-generated anonymousID from the Segment snippet.

analytics.SNIPPET_VERSION = '4.13.2'
analytics.page()
analytics.setAnonymousId('YOUR_CUSTOM_ID')

Note: Keep in mind that setting the anonymousId in Analytics.js does not overwrite the anonymous tracking IDs for any destinations you’re using.

There are other ways to override the anonymousID, you can find more information here.

Development

To run our storybook locally, simply do:

$ yarn dev

and the storybook should be opened in your browser. We recommend adding a new story for new features, and testing against existing stories when making bug fixes.

Styles

The file GUIDESTYLES.md contains the list of all components you can use this id to change de styles on Consent Manager.

Publishing New Version

This package follows semantic versioning. To publish a new version:

$ npm version <new-version>
$ npm publish

License

consent-manager is released under the MIT license.

Copyright © 2021, Segment.io, Inc.

consent-manager's People

Contributors

chrisradek avatar clemblanco avatar dependabot[bot] avatar dezzymei avatar dmitry-zaets avatar edsonjab avatar emont01 avatar felipe-najson-ntf avatar fforres avatar flaque avatar frankie567 avatar g07cha avatar gantoine avatar jfmaggie avatar kilinkis avatar lapa182 avatar laurenreeder avatar leecrossley avatar lestote avatar lucianoganga avatar michaelghseg avatar nd4p90x avatar nettofarah avatar notfelineit avatar pooyaj avatar rowno avatar shofman avatar tobiordobi avatar tomaisthorpe avatar yoannakaramfilova avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

consent-manager's Issues

Component Causing Reload on Every Client Side Transition

I started testing this package out today on a Gatsby static site. It works great up until the user has given consent. At this point it seems the component allows analytics.js to initialize, setting window.analytics.initialized = true. This is used to test if the browser needs to reload to apply new preferences:

https://github.com/segmentio/consent-manager/blob/master/src/consent-manager-builder/analytics.js#L33

  // Reload the page if the trackers have already been initialized so that
  // the user's new preferences can take affect
  if (window.analytics.initialized) {
    if (shouldReload) {
      window.location.reload()
    }
    return
  }

Since window.analytics.initialized: true persists through the client side routing, when the ConsentManager rerenders as a user navigates to a new page, it seems to be hitting this code and then reloading the page, causing a jarring user experience.

I'll try to produce a repro soon, but has anyone else had issues with this component and client side routers? Should this be the correct boolean to check wether or not to reload the page?

Base framework to query consent state

I've been playing with the Consent Manager and want to build my own to customize a few things. I'd like to optimize for a flow where there's a consent banner displayed with an explicit "Accept" and "Decline" button, no "X" or close button. Since we don't use too many tools, we don't need the preferences dialog to fine tune controls.

Is there a way to separate the UI from the concept of consent here?

  1. How do we know the consent state of a user?

  2. How do we set the consent state when the user clicks Accept or Decline?

  3. Assuming analytics are disabled on load, how do we enable analytics when the user clicks Accept?

  4. Do you store the consent information in the back end, or only in cookies? I'd like to have it in the back end so we have a log of consents.

Consent Manager being truncated on iPhoneX

It looks like the consent manager is being truncated on iPhone X, while it’s fully visible on larger screens such as iPhone XR.

Is there a way to improve mobile rendering so the entire modal is visible for all users, e.g. iPhone X screens? Thanks!

Standalone script: Container not found

Hi everyone,

I am trying to install the Consent Manager to our Webflow site and I have copied this script in our Head section (see long script below, copied straight from https://github.com/segmentio/consent-manager#callback-function), only replacing the link to our data collection policy and the write key.

The consent manager is not loaded on the website and I am getting the following error in the console:
image

I already checked the first part of the script which seems to work fine but the second does not finish. Can you help me out on that?

<script>
  window.consentManagerConfig = function(exports) {
    var React = exports.React
    var inEU = exports.inEU

    var bannerContent = React.createElement(
      'span',
      null,
      'We use cookies (and other similar technologies) to collect data to improve your experience on our site. By using our website, you՚re agreeing to the collection of data as described in our',
      ' ',
      React.createElement(
        'a',
        { href: '/docs/legal/website-data-collection-policy/', target: '_blank' },
        'Website Data Collection Policy'
      ),
      '.'
    )
    var bannerSubContent = 'You can change your preferences at any time.'
    var preferencesDialogTitle = 'Website Data Collection Preferences'
    var preferencesDialogContent =
      'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
    var cancelDialogTitle = 'Are you sure you want to cancel?'
    var cancelDialogContent =
      'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'

    return {
      container: '#target-container',
      writeKey: '<your-segment-write-key>',
      shouldRequireConsent: inEU,
      bannerContent: bannerContent,
      bannerSubContent: bannerSubContent,
      preferencesDialogTitle: preferencesDialogTitle,
      preferencesDialogContent: preferencesDialogContent,
      cancelDialogTitle: cancelDialogTitle,
      cancelDialogContent: cancelDialogContent
    }
  }
</script>

<script
  src="https://unpkg.com/@segment/[email protected]/standalone/consent-manager.js"
  defer
></script>

Displaying cookie information

Hi Segment,

A feature currently required by the Cookie Law and GDPR is to be able to list and display cookies inside of the the Privacy Policy page.

You are currently able to do this in the Consent Banner Modal, would there be a way to "embed" the same information into a post in any way, using a script?

If not that would be a great feature that consent manager solutions are offering (and currently require me to use both segment + another cookie solution at the same time on my sites).

Cheers,
Bruno

Tracking before consent given

I've noticed that the behaviour of the consent manager on the Segment website is different to the behaviour when implemented in my app.

On the Segment website, data is collected even before I agree / close the dialog box or open the preferences.

On my app, data isn't collected until I open the preferences, choose and save. I live in within the EU, so I believe this behaviour is correct. A user must consent before data can be collected.

Is this right? Or can I do what the Segment implementation does and start the analytics integrations before the the user has consented and if so, what configuration do I require to enable this?

Thanks :)

JS-Cookie Error: SyntaxError: Unexpected token e in JSON

Hi there 👋 ,

The following error occurs when using Brave: Version 0.67.125 Chromium: 76.0.3809.100.

SyntaxError: Unexpected token e in JSON at is thrown from js-cookies on mount.

I'm using Consent Manager and openConsentManager from @segment/consent-manager, and @segment/in-eu

The consent manager fails to open, and no error is logged other than the original JSON/js-cookies one.

Not critical to resolve for customers using tracker blocking - but probably could be handled in some way?

Unexpected end of JSON input

Description

After upgrading to the latest version of the consent manager (4.5.0) we started experiencing a spike in errors that seem to be happening within the consent manager code.

Screen Shot 2020-04-08 at 19 12 07

Something I noticed is that when opening the consent manager, the preferences are not set - even though I had set them previously and the cookie is set correctly. So this makes me thing there might be an issue related to how the consent manager code reads the cookie. However, after closing it and re-opening again, the options are now set correctly
consent-manager-debugging

Notes

We upgraded from an old version: 1.1.1

On Standalone script closeBehavior: accept does not work

Issue
For the standalone script the following does not work as expected:
https://github.com/segmentio/consent-manager#closebehavior
closeBehavior: 'accept'
 This behavior is a regression as it works in version 4.3.0 but no longer works in 5.0.0
Steps to reproduce
Page with 5.0.0, note closing the banner does not accept consent
https://prigiattiperrut.github.io/consentmanager3.html

Page with 4.3.0, note closing the banner does accept consent
https://prigiattiperrut.github.io/consentmanager2.html

ConsentManagerBuilder dont show preferences

Hello 👋

I have in the site a consent manager and after the answering to it the local storage has this information:

ajs_user_traits:"{"destinationTrackingPreferences":{ Salesforce: true },"customTrackingPreferences":{"marketingAndAnalytics":true,"advertising":false,"functional":false}}"

So then on another part of the site to read the values I dont want to hardcode the access to the local storage so what I did is a ConsentManagerBuilder ..

<ConsentManagerBuilder writeKey={config.SEGMENT_WRITE_KEY}>
        {({ preferences, destinations }) => { 

My problem is that the preferences are coming with the value Salesforce but not marketingAndAnalytics ..

I try adding a mapCustomPerferences like https://github.com/segmentio/consent-manager/blob/master/src/consent-manager/index.js#L106 but its never called =S

So why are the preferences coming up empty ? There is a better way of just reading the preferences ?

Thanks

Cookie banner closes on page click and cannot be made visible again

Hi,

What happens: when the banner appears on the first visit, if you click anywhere else on the page, the banner disappears (this seems to be "implicit consent" - no sure it is quite GDPR compliant). Once it is gone there is no way to bring it back.

In your latest blog post you wrote "The visitor can, of course, access the modal to change their preferences at any time by clicking on the “Website Data Collection Preferences” link in the footer of our site." => How ?

What should happen instead:

  1. The banner should behave in a way it HAS TO be closed using the "close X" only, not by external click
  2. There should be a way to bring the banner back. Ways to achieve that include a link (included wherever necessary - like privacy policy page, footer...) that would call the "preferences" modal
  3. Maybe there should be a parameter in the script to have the banner appear at every page and connection until the preferences pages has not been visited and saved (to increase compliance with GDPR).

Thanks for your feedback on these points!
Cheers

Tracking starts immediately after closing banner with closeBehavior="deny"

When using the standalone script tracking starts immediately after closing the banner no matter what the closeBehavior is set to.
I've tried both deny and dismiss but tracking starts immediately after closing the banner no matter which option is set.

The React component respects the option, so the issue is only in the standalone script.

Change the UI of Preferences Dialog

Is there any way to change the look of the Preferences Dialog? For example make the green Save button in another color and change the buttons in the cancel dialog etc..
Thanks in advance :)

ConsentManagerBuilder does not provide a way to check consent

The docs say:

The ConsentManagerBuilder React component is a low level render props component for building your own consent manager UI. It abstracts away all the logic for fetching destinations, checking/saving consent and loading analytics.js.

However the render props to ConsentManagerBuilder allow setting preferences and saving consent, but they don't appear to provide a way to check whether the user has save consent already.

Using the preferences prop might work, however as I am passing in initialPreferences (as per the GDPR+CCPA example) the result is a merged object which cannot distinguish between initial and user-set preferences.

Cookie notification bar is empty

We're trying to set up Segment's Consent Manager (the standalone version) to show our users a cookie notification and to let them manage their tracking preferences.

We're following the documentation from the Github readme: https://github.com/segmentio/consent-manager#standalone-script

This is the super simple HTML page we're testing with: https://gist.github.com/marceldegraaf/e2c490c3f3db11f41db681bab2c12b4f

Unfortunately this only renders an empty <div></div> in the target container, and does not show the cookie notification. The Consent Manager popup does open if we call consentManager.openConsentManager() from the developer console, and we see no errors/warnings on the developer console.

Screenshots:

Are we missing some configuration here, or is this a bug in the Consent Manager?

Questions: invalidating consent + logging/tracking consent

Can we invalidate and ask for consent again?

It looks like if some changes are made to the destinations added/removed to some categories, we need to invalidate the current consent and ask for the user consent again.

Is it something the consent-manager covers? Or is it something we have to determine ourselves and use the shouldRequireConsent prop for?

Can we track consents when given?

It looks like we need to store/track whenever a consent is given by a user.

How would you recommend to approach this?

When reading the readme I can see:

The user's tracking preferences are sent as an identify trait (if they haven't opted out of everything) so that you can also access them on the server-side and from destinations (warehouse).

Can you please expand on that? Does this also work with anonymous users? How to set it up so I can see/report on all the consents?

implyConsentOnInteraction not setting consent

implyConsentOnInteraction: true setting doesn't seem to work as expected. When clicking on the page it closes the the banner as expected but consent is not implied and events don't start being tracked. Also on page refresh the banner pops up again because the preferences hadn't been set.

Here's a screen record where you can see that even after interacting with the page and the banner closing, on page refresh the banner pops up again and no preferences have been set. The main issue is that events are not tracked.

Typescript support

Trying to consume this package within a typescript project is currently not possible to my knowledge as there is no @types declaration.

I may be missing something as I'm quite new to typescript.

Is this something that is/could be worked on?

Using consent-manager causes reload

I have a React Web Application and I am using consent manager. If I go to a new page within my application it causes a reload of the page which I don't want. If I comment out the consent manager code this does not happen. Is there some way to stop the page from reloading?

I'm using it this way:

<ConsentManager
  writeKey={SEGMENT_WRITE_KEY}
  shouldRequireConsent={inEU}
  bannerContent={bannerContent}
  preferencesDialogTitle={preferencesDialogTitle}
  preferencesDialogContent={preferencesDialogContent}
  cancelDialogTitle={cancelDialogTitle}
  cancelDialogContent={cancelDialogContent}
  bannerBackgroundColor={'rgba(31,29,29,.15)'}
  bannerTextColor={'rgba(31,29,29,1)'}
/>

Updating outdated dependencies

Hey folks, in looking at this tool, we noticed a number of outdated dependencies, judging by the output of npm i --package-lock-only and npm audit. We also noticed a few pull requests from dependabot. Some have security implications, including cross-site scripting. Most are several deps down the chain, and some may just be false positives or have no bearing on consent-manager. We're wondering if this is kept track of internally to determine what needs updating, or in general whether we should worry about these outdated deps?

Changing copy in Purpose section of table

Hi Segment folks! I'm wondering if there's an easy way I can change the copy in some of the table cells in the consent manager. For example, my company does not have a live chat, so saying "these tools enable you to communicate with us via live chat" is misleading.

Would it be possible for you to either
(a) change the wording to something like "these tools may enable you to communicate with us via live chat or
(b) provide a way to override the default copy for the Purpose column of the table?

Thanks!
-Eve

Keep getting error - Failed to find a valid digest in the 'integrity' attribute for resource - Please help!

I am new to Segment and coding. I don't know what I am doing wrong!

I keep getting the error:
Failed to find a valid digest in the 'integrity' attribute for resource 'https://unpkg.com/@segment/[email protected]/standalone/consent-manager.js' with computed SHA-256 integrity 'wC00Ta5lCOuOSL3dT3NF9tb9roS8uxTPGQ2Iqe70cqo='. The resource has been blocked.

<script>
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
  analytics.page();
  }}();
</script>  

<div id="consent-manager-container" style="position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;">
<script
  src="https://unpkg.com/@segment/[email protected]/standalone/consent-manager.js"
  integrity="sha256-N/wC00Ta5lCOuOSL3dT3NF9tb9roS8uxTPGQ2Iqe70cqo="
  crossorigin="anonymous"
  defer
  data-container="#target-container"
data-writeKey="Replacement for write key for Github"
  data-bannerContent="We use cookies (and other similar technologies) to collect data to improve your experience on our site."
  data-bannerSubContent="You can change your preferences at any time."
  data-preferencesDialogTitle="Website Data Collection Preferences"
  data-preferencesDialogContent="We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site."
  data-cancelDialogTitle="Are you sure you want to cancel?"
  data-cancelDialogContent="Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy."
></script>
</div>

Add prop to set className of banner container in ConsentManager React component

I doesn't seem like there is a way of setting the class name of the banner container when using the ConsentManager React component.
This makes positioning the banner difficult.
I would like a feature like container: '#target-container', when using the consentManagerConfig with the standalone script.

Right now in order to position the banner I had to access the div like this:

#root > div:first-child {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

This would break my app if the banner was the second element instead of the first as it is now. And since I cannot control where it is put in the DOM this solution seems extremely brittle.

image

The first child of #root is the banner container and the second child is my app. As you can see there is no class or id on the banner container, so I cannot access it reliably in my css.

Error: event.isImmediatePropagationStopped is not a function

I have an app that uses the standalone consent-manager script in index.html. The consent manager piece is working as expected along with the latest analytics scripts. However, in the same app I am have pre-existing codes using video.js for video frameworks, and having the consent-manager script causes this error to appear:

Uncaught TypeError: event.isImmediatePropagationStopped is not a function at data.dispatcher (video.js:22508)

The block of code that is causing this to happen is:

<script
        src="https://unpkg.com/@segment/[email protected]/standalone/consent-manager.js"
        integrity="sha256-cptjdzM9JCyAzOliNVMI+8U60l1MgdGbgop1MFfYoiU="
        crossorigin="anonymous"
        defer
        data-container="#target-container"
        data-writeKey="<hidden>"
        data-bannerContent="We use cookies (and other similar technologies) to collect data to improve your experience on our site."
        data-preferencesDialogTitle="Website Data Collection Preferences"
        data-preferencesDialogContent="We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site."
        data-cancelDialogTitle="Are you sure you want to cancel?"
        data-cancelDialogContent="Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy."
        ></script>

I wasn't able to find codes in consent-manager implementation that could have causes this. Any help is appreciated, thanks.

Update the categories

The new Email Marketing and Marketing Automation categories need to be added to Marketing and Analytics and the Email category should be removed.

SyntaxError: Unexpected identifier

I can't run my app in next.js after upgrading to 3.0.0. The same issue occurs for 2.4.0 installed from npm.

The error I'm getting in console is:

image

I see that in node_modules/@segment/consent-manager/commonjs/index.js that the file is using imports.

Destination fetch frequently fails

I deployed this consent manager on Friday and since then I have had hundreds of runtime errors reported with a "failed to fetch" exception on the destinations call here - I'm not sure what's causing the issue, but there's no way for me to see without error handling on the fetch call. Will put in a pull request to add this, just wanted to have this issue as a note!

Vue integration ?

Hi, thank you for this plugin !

Are there any guides on how to integrate this with Vue?

Thanks !

`openConsentManager` doesn’t open ConsentManager

Hey! Thanks for the useful tool!

I think I am missing something, but openConsentManager doesn’t cause ConsentManager to show up. Also looking in the source of the function, it emits openDialog but there is nothing that handles that event, if I’m seeing this correctly.

Thanks!

Partially blocks my screen

Been seeing a lot of this lately. These should be geofenced or every client in the EU, or the EU should be sending a flag indicating they're in the EU so the rest of us don't suffer from GDPR popovers.

Vue.js support

Are there any guides on how to integrate this with Vue? (We don't use React)

Unavoidable implied consent with implyConsentOnInteraction

When using the implyConsentOnInteraction flag, I noticed some odd behaviour when trying to opt out. Unfortunately, this effectively makes it impossible to opt-out when this flag is set.

Steps to reproduce:

  • clear all cookies for segmentio.github.io
  • visit https://segmentio.github.io/consent-manager/index.html?path=/story/react-component-basics--basic-react-component-with-implied-consent
  • witness the consent banner at the top of the story page
  • follow the "You can manage your preferences here!" link in the banner
  • in the "Website Data Collection Preferences" dialog that appears, choose "no" for one of the options, which should work as expected
  • try to choose "no" for a second option
  • witness that the second option was selected as "yes", along with all other unselected options and that the consent banner in the background page has disappeared
  • before hitting save, check which cookies have been set on segmentio.github.io

Expected behaviour:

  • selecting "no" works for each choice
  • no tracking behaviour fires or cookies are set until the user hits Save

Actual behaviour:

  • trying to choose "no" beyond the first choice selects "yes" on all other choices
  • tracking happens as soon as the mis-selected item is picked

I presume that interactions with the consent manager form are being mis-interpreted as 'interaction' implying consent.

Unfortunately, this means that with this flag enabled it's not possible for someone to properly opt out, as even if they notice that their selection for "no" was not honoured (and fix it before hitting Save) then the tracking scripts have already fired.

I tried this in a variety of browsers on a Mac OS (10.15.2) machine, with the same behaviour in each; I can't readily test on other OSes but expect the behaviour to be consistent:

  • Safari 13.0.4 (15608.4.9.1.3)
  • Chrome 79.0.3945.88 (Official Build) (64-bit)
  • Firefox 71.0 (20191202093317)

Localization?

Hello,
Do you plan to offer a localized version of the consent manager?
I would love to help translate it into french but I see that the text is currently hardcoded into the javascript. Any plans to change this?

Best,

On saveConsent(true) does not update state.havePreferencesChanged

We ran into this weird issue when loading the consent manager using the consent manager builder.

We have a button that "Allows all cookies" and on first time load that button would run successfully but the page never reloaded, neither did the analytics initialise.

To get it to work, we would have to disable a cookie destination and save, which ran the handleSetPreferences and that updated the state as seen here. That wasn't an ideal fix.

We can't find where in the saveConsent it updates the havePreferencesChanged in the state; it's not in the mergePreferences either. The only way we fixed this issue was by running the setPreferences(true) function before the saveConsent(true) as that updated the state.

Setting custom anonymous ID

We are using our own anonymous ID with segment in order to reduce the number of different user identifiers in our data space.

We achieve this by adding the following piece of code prior to any tracking code firing;

analytics.ready(function() {
analytics.user().anonymousId(our_anonymous_identifier);
});

When using the consent manager, analytics is not ready until user interaction with the banner, which consequently fires an identify call off to the segment end point. This means that this identify call will contain a segment client side generated anonymous ID.

question:
Is there any future option to make sure we can set the anonymous ID in the consent manager on time of loading?

Thanks

CloseBehaviour not documented

closeBehaviour isn't documented in the readme....

<script>
  window.consentManagerConfig = function(exports) {
    var React = exports.React
    var inEU = exports.inEU

    var bannerContent = React.createElement(
      'span',
      null,
      'We use cookies (and other similar technologies) to collect data to improve your experience on our site. By using our website, you՚re agreeing to the collection of data as described in our',
      ' ',
      React.createElement(
        'a',
        { href: '/docs/legal/website-data-collection-policy/', target: '_blank' },
        'Website Data Collection Policy'
      ),
      '.'
    )
    var bannerSubContent = 'You can change your preferences at any time.'
    var preferencesDialogTitle = 'Website Data Collection Preferences'
    var preferencesDialogContent =
      'We use data collected by cookies and JavaScript libraries to improve your browsing experience, analyze site traffic, deliver personalized advertisements, and increase the overall performance of our site.'
    var cancelDialogTitle = 'Are you sure you want to cancel?'
    var cancelDialogContent =
      'Your preferences have not been saved. By continuing to use our website, you՚re agreeing to our Website Data Collection Policy.'

    return {
      container: '#target-container',
      writeKey: '<your-segment-write-key>',
      shouldRequireConsent: inEU,
      bannerContent: bannerContent,
      bannerSubContent: bannerSubContent,
      preferencesDialogTitle: preferencesDialogTitle,
      preferencesDialogContent: preferencesDialogContent,
      cancelDialogTitle: cancelDialogTitle,
      cancelDialogContent: cancelDialogContent,
      closeBehavior: 'accept'
    }
  }
</script>

<script
  src="https://unpkg.com/@segment/[email protected]/standalone/consent-manager.js"
  defer
></script>

Standalone script with callback function doesn't work on IE?

Hi @Rowno
I'm using the standalone script and since I wanted to make sure it'd work on IE, didn't use the data-attributes and went for the callback function "advanced" implementation. However it looks like it's still not working on IE: any idea for a fix?

Thanks,
Bruno

Add id to consent manager form

Can we add an id to the consent manager form?

Preferably something in readable format like "Consent-Form" or "Cookie-Consent-Form"

I use form ids as identifiers when tracking form submission events:

analytics.track('Submitted {{Form ID}}', { category: 'Form', label: '{{Page Path}}', value: 0 });

Reach_Marketing

Sources_-_RoyaltyExoticCars_com_-_Segment-3

Sources_-_RoyaltyExoticCars_com_-_Segment-2

Google_Tag_Manager-2

Adding links into data-parameters in the out-of-the-box consent manager

Inside of data-bannerContent ("we use cookies...") I can see on your site (Segment.com) that you have a link to your Website Data Collection Policy. Similarly most site owners would like to be able to have a sentence like "By using our website, you’re agreeing to the collection of data as described in our Privacy Policy" with a link on Privacy Policy.
Can this be achieved easily?

Can I use setPreferences with groups?

It's very unclear from the docs whether I can simply pass group ids to setPreferences and have segment figure out the individual destination preferences.

Expected behavior:

setPreferences({
  functional: true,
  marketingAndAnalytics: false
});

When setting preferences on individual destination ids this may reload the page but the above code doesn't seem to do this, so I have no idea what it's doing. Are there no docs for the exact props that can be passed to setPreferences and saveConsent? mapCustomPreferences seems to provide a hint, but I can't find any examples of how this is used, and none of the examples in stories seem to be using it.

How to access Consent info

Hi Segment, again great work on this banner I'm using it for most sites I'm currently working on and it works like a charm!

How do you recommend to access the consent information for each user ? i.e. when a client is asked to erase the consent for someone how should we go about accessing and erasing this information ? CookieBot for instance offers an interface to list, edit and delete consent.

Cheers, Bruno

How to whitelist tracking scripts with Consent Manager

Hi I'm currently testing the simplest script you've made, works well!
To the point: some trackers like Google Analytics (when set up correctly with anonymous IP etc.) don't handle PII anymore. How can I make sure they can be included before user consent (since they' don't need to be acknowledged and accepted by the user anymore), while using your standalone script.
Otherwise quite a lot of visitors will visit the site, never accept any of the trackers, even those managed by Segment that don't include PII anymore.
Thanks
Bruno

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.