After building our own consent management solution, we learned how difficult it is to develop a tool that both meets the requirements of the GDPR and aligns with Segment’s approach to privacy. In particular, we needed a solution that was technically dependable, transparent, and easy for visitors to use, in addition to being compliant.
Through conversations with many of our customers, we learned that they had similar requirements and were also struggling to find an adequate solution. That’s why we decided to open source our solution and make it available to our customers and the community.
In this post, we’ll walk you through how the Segment Consent Manager works, share details on the key features, and show you how you can build it into your website in less than a week.
Why do you need a consent management solution for the GDPR?
The GDPR requires that companies have legal grounds to process and collect EU residents’ personal data. There are a number of approved grounds, and businesses may have different grounds for processing different kinds of data.
The Consent Manager was built to help with one of the approved grounds for processing personal data: consent. If your company is using consent as the legal grounds for processing data, you’ll likely want a technical solution to collect, manage, and ultimately honor your website visitors’ consent preferences.
How the open source Segment Consent Manager works
At its core, the Segment Consent Manager is a way for website visitors (mobile or desktop) to control and customize their tracking preferences. They can opt out entirely of being tracked, or selectively opt out of categories of tools from which they don’t want their information processed.
The Segment Consent Manager is built off of our analytics.js library, so you need to be using Segment to deploy it.
Diving into the details, here’s how we built the open source Consent Manager into Segment’s website:
Visitor from the EU lands on our site
Visitor sees a banner giving them the option to change preferences
Visitor selects change preferences, and is presented with a modal that allows them to opt in or out of certain categories of tools
Visitor saves their preferences, and we honor their preferences whenever they visit our site
If the visitor dismisses the banner or starts to use the site, they agree to our website data collection policy, and tracking will begin (as explained in the banner)
Here’s a look at how it works on our website today.
Key features of the Segment Consent Manager
The Segment Consent Manager is built to help you collect and manage consent from your website visitors. Here are some key features that enable you to do so:
1) Analytics.js is optimized to honor consent preferences
We first request the customer to consent to data collection and then configure a custom build of analytics.js at runtime to respect the visitor’s preferences. We do this by surfacing a banner to give visitors the ability to configure their consent preferences. If a user sees the banner and then closes it out or continues to use the site, they are also consenting to our website data collection policy. Our banner makes it clear that by using our site, the user is agreeing to this policy. 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.
When a customer has chosen their tracking preferences, analytics.js only loads integration libraries for the categories that the user has consented to. If they don’t allow any categories, we don’t initialize analytics.js at all. We use a browser cookie to store the user consent options, so their preferences persist across the entire website when they return. If the user clears their cookies, their preferences will reset. If this happens, they will see the banner the next time they visit the site.
2) Privacy-conscious EU traffic detection
Detecting EU traffic presents a classic “chicken and egg” problem. How do you decide where the user came from without using their Personally Identifiable Information (PII)? The most obvious and common way to do this is to look at the IP address, but this compromises end-user privacy and can often be inaccurate.
Instead, we use time zones to determine if a user is physically in the EU, and also utilize their language preferences as a hint to determine whether they might be a European resident visiting another country. While this approach is more inclusive than necessary (meaning non-EU residents may also see the banner), we wanted to prioritize privacy and compliance at the expense of accuracy. You can check out the technical documentation of this EU traffic detection feature here.
3) All of the Segment integrations connected to your website are covered automatically
The Segment Consent Manager will account for all of the integrations connected to your website Source in Segment, whether they’re configured via Device Mode like the Facebook Pixel (has to be loaded in the browser) or they’re configured via Cloud Mode, like Zendesk (where data is sent from the server). The Segment Consent Manager also detects when new tools are added to your website via Segment and automatically updates the modal to include it. As an additional layer of precaution, if you add a new tool to your site, the Consent Manager will re-ask visitors for consent the next time they visit your site. This way you can update your marketing and analytics stack and continue to be transparent with your customers.
4) Fully customizable user experience
We have two versions of the Consent Manager you can use depending on what you’re optimizing for. If you want to get a solution live on your website as soon as possible, you can use our out-of-the-box solution that we use on our website today. If you’re looking to align the user experience with your product or brand, we offer React Components that allow for full customization of the UI.
How to use the Segment Consent Manager
You can get started with the Consent Manager using one of these two options. As a quick reminder, both versions require you to have a Segment account.
Option 1: Out-of-the-box Consent Manager
To use this version of the Consent Manager, simply include our script tag on the bottom of your page (as pictured below). The full UX that we’re using on our site is available to you, including a web and mobile optimized UX. All you need to do is finalize the copy for your modal, and you’re good to go.
Option 2: BYOD (Bring Your Own Design)
For this version, we provide a few React Components (our favorite framework for building UIs) that you can use to customize the Consent Manager according to your preferences.
While this option requires more investment from your team, it allows for full customization and alignment with your brand. You can create your own custom categories in the consent modal (e.g., marketing and analytics), and customize the UX to seamlessly integrate with your own website or single-page app.
To use this option, import our
ConsentManager component, mount it anywhere on your page and add your customization. Check out the full documentation here.
Check out the Segment Consent Manager project on GitHub for more advanced examples and a deep dive into how you can build a consent manager that is tailored to your user experience and empowers your visitors to control their data collection preferences.