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
Install
npm install gatsby-plugin-sitecore-cdpHow 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!