Installing Segment's Consent Manager in Next.js

chord's https //github com/chordcommerce/nextjs starter autonomy 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 https //github com/segmentio/consent manager for complete installation instructions installing the package first, verify you have segment's analytics js installed segment's npm package @segment/analytics next is https //github com/segmentio/consent manager/issues/193 with the consent manager, so you'll need to install segment via snippet next, install the @segment/consent manager package yarn yarn add @segment/consent manager npm npm install @segment/consent manager be sure to remove analytics load("your write key") from your site code, so the consent manager can handle loading adding the consentmanager react component chord's next js starter includes a https //github com/chordcommerce/nextjs starter autonomy/blob/main/src/components/segment/consentmanager/index jsx 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 https //github com/segmentio/consent manager#consentmanager props ) 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 https //github com/chordcommerce/nextjs starter autonomy/blob/main/pages/ app js the starter also includes an https //github com/chordcommerce/nextjs starter autonomy/blob/main/src/components/footer/legal/index jsx 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 mailto\ help\@chord co