All Articles

Gatsby Plugin for Sitecore CDP

Gatsby

Gatsby is a React-based open-source framework with built-in performance, scalability, and security. The site you are reading this article on is also built with Gatsby. Gatsby offers a plugin architecture, through which you can connect to various headless technologies with only the configuration. Gatsby also provides its own cloud platform to host your sites, accessible at a blazing-fast speed.

- Gatsby

Sitecore CDP

The Sitecore CDP is designed to drive exceptional experiences on all digital channels. It takes the core data management capabilities of a CDP and layers on decisioning, predictive analytics, experimentation, and orchestration.

- Sitecore

Gatsby Plugin for Sitecore CDP

I am excited to present you with a plugin to connect Sitecore CDP with a Gatsby site. This plugin connects your Gatsby site to Sitecore CDP and tracks the views throughout your website, without any code.

You can find the plugin listed in the Gatsby Plugins here: https://www.gatsbyjs.com/plugins/gatsby-plugin-sitecore-cdp/

You can find the source code in my GitHub here: https://github.com/mrvinaykj/gatsby-plugin-sitecore-cdp

Gatsby with Sitecore CDP

Install

npm install gatsby-plugin-sitecore-cdp

How to use

You can add the below options in your gatsby-config.js file, to configure the plugin.

You can find more information about the options here: https://doc.sitecore.com/cdp/en/developers/sitecore-customer-data-platform—data-model-2-1/integrating-sitecore-cdp-using-javascript.html

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sitecore-cdp`,
      options: {
        clientKey: "<replace-with-your-client-key>",
        cookieDomain: "<replace-with-your-site-domain>",
        // Change to the api endpoint for your region
        apiEndpoint: "https://api.boxever.com/v1.2",
        pointOfSale: "<replace-with-your-configured-point-of-sale>",
        // The below options are optional
        // The Javascript SDK Client version, defaults to 1.4.8
        clientVersion: "1.4.8",
        // The webflow CDN to be used for Sitecore Personalize, the below value will be the default
        webFlowTarget: "https://d35vb5cccm4xzp.cloudfront.net",
        // The Boxever Script CDN for the JS file, the below value will be the default
        boxeverCdnTarget: "https://d1mj578wat5n4o.cloudfront.net",
        // Set value to false, if you want the script to be in the body tag instead of head
        head: true,
        // The async value for the boxever script, false by default
        async: false,
        // The defer value for the boxever script, false by default
        defer: false,
        // DevOptions will be used for local dev configuration
        devOptions: {
          // Use this to log events to the console
          trackDev: true,
        },
        // Exclude the paths that you do not want to track
        exclude: ["/hello-world/"],
      },
    },
  ],
};

Please feel free to drop any suggestions/feedback in the comments.

Happy Sitecoring!

Published Oct 6, 2022

Sitecore MVP Technology 2024-23. Web Developer with rich experience in Sitecore and ASP.NET MVC.