Installing Segment's Consent Manager in Next.js
Chord's Next.js starter kit uses the ConsentManager React component. It comes with a fully built UI for selecting data collection preferences:
If you prefer to build a custom UI, you can use the ConsentManagerBuilder component. View the Github repo for complete installation instructions.
First, verify you have Segment's Analytics.js installed. Segment's npm package @segment/analytics-next is not currently compatible with the Consent Manager, so you'll need to install Segment via snippet.
Next, install the @segment/consent-manager package:
Be sure to remove analytics.load("YOUR_WRITE_KEY") from your site code, so the Consent Manager can handle loading.
Chord's Next.js starter includes a ConsentManagerWrapper component. This component is responsible for configuring and rendering a banner (or pop-up, depending on your level of customization) that will offer users an option to opt in or out of tracking. To customize the look and behavior of the Consent Manager, change various properties on the ConsentManager component (full reference here).
Please note that the Consent Manager banner in the starter is shown automatically for visitors from the EU. Please refer to the shouldRequireConsent method of the component to alter that behavior. You can decide to show the banner for all visitors, regardless of their actual location, by configuring the SEGMENT_SHOULD_REQUIRE_CONSENT environment variable to true in your .env file.
The ConsentManagerWrapper component wraps the root page element of the starter in _app.js. The starter also includes an example of a link that will open the Consent Manager pop-up.
if you have any questions or need help, please reach out to us at [email protected]