Installing in Gatsby

Chord's Gatsby 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:

If you're using Chord's Gatsby theme, Segment loading is handled by the Gatsby Segment plugin. Set manualLoad to true in the segmentConfig object in your gatsby-config.js file, to allow the Consent Manager to handle loading:

If you're not using Chord's Gatsby theme, be sure to remove analytics.load("YOUR_WRITE_KEY") from your site code, so the Consent Manager can handle loading.

Chord's Gatsby 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).

The ConsentManagerWrapper component wraps the root page element of the starter in gatsby-browser.js. Here's a simplified example:

The starter also includes an example of a link that will open the Consent Manager pop-up.

I'm seeing a blank page.

If you customize the ConsentManagerWrapper component, make sure that the {children} prop coming from the wrapRootElement is placed before the <ConsentManager /> node:

If you accidentally changed that order, you might run into this known Gatsby issue, where a blank page is rendered all over the site. This issue only occurs with production builds, not development builds.