website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
SHIPPING - SETUP
Shipping Methods
Shipping Zones
Shipping Method Setup Examples
TAXES - Setup
Tax Automation with Stripe Tax
Tax Automation with Avalara
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by archbee 

Installing in Gatsby

7min

Chord's Gatsby starter kit uses the ConsentManager React component. It comes with a fully built UI for selecting data collection preferences:

Document image


If you prefer to build a custom UI, you can use the ConsentManagerBuilder component. View the Github repo for complete installation instructions.

Installing the package

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:

yarn
npm
|
yarn add @segment/consent-manager


Configuring the Chord Gatsby theme

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:

JS
Text
|
 plugins: [
    {
      resolve: '@chordcommerce/gatsby-theme-autonomy',
      options: {
         ...
         segmentConfig: {
           prodKey: process.env.GATSBY_SEGMENT_PRODUCTION_WRITE_KEY,
           devKey: process.env.GATSBY_SEGMENT_DEV_WRITE_KEY,
           manualLoad: true,
           ...
        }
        ...
      }
    }
  ]


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.

Adding the ConsentManager React component

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).

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 GATSBY_SEGMENT_SHOULD_REQUIRE_CONSENT environment variable to true in your .env file.

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

JS
|
import ConsentManagerWrapper from '~/components/Segment/ConsentManager'

/**
 * Wraps the app's root element with Segment's Consent Manager.
 */
export const wrapPageElement = ({ element }) => {
  return <ConsentManagerWrapper>{element}</ConsentManagerWrapper>
}

wrapPageElement.propTypes = {
  element: propTypes.element.isRequired
}


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

Troubleshooting

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:

Document image


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.

if you have any questions or need help, please reach out to us at help@chord.co



Updated 04 May 2023
Did this page help you?
Yes
No
PREVIOUS
Installing in Next.js
NEXT
Integrations
Docs powered by archbee 
TABLE OF CONTENTS
Installing the package
Configuring the Chord Gatsby theme
Adding the ConsentManager React component
Troubleshooting