Creating The Component In Sitecore
In order to enable your Next.js application to utilize Sitecore CDP, you need to include your initialization script on every page.
The first thing you need to set-up is a template that you can use to inject the appropriate values needed by the initialization script.
The Template
Though not absolutely required, it's nice to have a datasource with the appropriate values to pass into the CDP component. The template for such a datasource is fairly straight-forward and nothing but a bunch of Single-Line Text fields.
The great news is that, given the value details don't change all that much, you can put the values they should be within the standard values.
The Rendering
The rendering for the component should be of type Json Rendering. I'll leave it to you to ensure that the Datasource Template and Datasource Location are set to the appropriate values as it obviously depends on your setup.
Creating The Next.js TypeScript Component
We have a bit more work to do on the Next.js side of things. Below, I've included a complete component that can be used and added to a page via the Presentation Details in Experience Editor within Sitecore.
import { Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';
import Head from 'next/head';
type SitecoreCDPProps = ComponentProps & {
fields: {
clientKey: Field;
apiToken: Field;
targetDomain: Field;
cookieDomain: Field;
jsLibraryVersion: Field;
pointOfSale: Field;
webFlowTarget: Field;
};
};
const SitecoreCDP = ({ fields }: SitecoreCDPBaseProps): JSX.Element => {
const htmlInject = `
var _boxeverq = _boxeverq || [];
var _boxever_settings = {
client_key: '${fields.clientKey.value}',
target: '${fields.targetDomain.value}',
cookie_domain: '${fields.cookieDomain.value}',
javascriptLibraryVersion: '${fields.jsLibraryVersion.value}',
pointOfSale: '${fields.pointOfSale.value}',
web_flow_target: '${fields.webFlowTarget.value}',
web_flow_config: { async: false, defer: false }
};
(function() {
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
s.src = 'https://d1mj578wat5n4o.cloudfront.net/boxever-${fields.jsLibraryVersion.value}.min.js';
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
})();
`;
return (
<Head>
<script
id="cdp"
dangerouslySetInnerHTML={{
__html: htmlInject,
}}
/>
</Head>
);
};
export default withDatasourceCheck()(SitecoreCDP);
By using next/head and the <Head> component we can ultimately push the script inside the <head> element.
We use the dangerouslySetInnerHTML to inject the rendered script inside the element in question. For the script itself, we are just injecting the values from the rendering's datasource that is used.
And that's really all there is to it to get your initialization script set-up. More will need to be done to track events and such.
👋 Hey Sitecore Enthusiasts!
Sign up to our bi-weekly newsletter for a bite-sized curation of valuable insight from the Sitecore community.
What’s in it for you?
- Stay up-to-date with the latest Sitecore news
- New to Sitecore? Learn tips and tricks to help you navigate this powerful tool
- Sitecore pro? Expand your skill set and discover troubleshooting tips
- Browse open careers and opportunities
- Get a chance to be featured in upcoming editions
- Learn our secret handshake
- And more!
Meet David Austin
Development Team Lead | Sitecore Technology MVP x 3
📷🕹️👪
David is a decorated Development Team Lead with Sitecore Technology MVP and Coveo MVP awards, as well as Sitecore CDP & Personalize Certified. He's worked in IT for 25 years; everything ranging from Developer to Business Analyst to Group Lead helping manage everything from Intranet and Internet sites to facility management and application support. David is a dedicated family man who loves to spend time with his girls. He's also an avid photographer and loves to explore new places.