Implement Context Using Code
Grab the code from the General Settings screen and paste the relevant code on each page inside the head tag.
Note: Make sure to define the context in every page's head tag (both for SPA and non-SPA sites) before the script.
/**
* @param {string} type
*/
<script type="text/javascript">
window.DY = window.DY || {};
DY.recommendationContext = { type: 'HOMEPAGE' }; // in this example - a homepage page
</script>
<script src="//cdn.dynamicyield.com/api//[YOUR SITE ID]/api_dynamic.js" type="text"></script>
<script src="//cdn.dynamicyield.com/api//[YOUR SITE ID]/api_static.js" type="text"></script>
/**
* @param {string} type
* @param {string[]} data
*/
<script type="text/javascript">
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data }; // in this example - a homepage page
</script>
<script src="//cdn.dynamicyield.com/api//[YOUR SITE ID]/api_dynamic.js" type="text"></script>
<script src="//cdn.dynamicyield.com/api//[YOUR SITE ID]/api_static.js" type="text"></script>
Here are some code examples.
Using hooks in SPAs
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default function HomePage() {
// ...
useEffect(() => setDYContext('HOMEPAGE'));
return (
// ...
)
}
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default function ProductPage(props) {
// ...
useEffect(() => setDYContext('PRODUCT', [ props.sku ]), [ props.sku ]);
return (
// ...
)
}
Using lifecycle methods in SPAs
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default class HomePage extends React.Component{
// ...
componentDidMount() {
setDYContext('HOMEPAGE');
}
render() {
return(
// ...
)
}
}
/**
* @param {string} type
* @param {string[]} data
*/
export function setDYContext(type, data) {
window.DY = window.DY || {};
DY.recommendationContext = { type: type, data: data };
}
export default class ProductPage extends React.Component{
constructor(props) {
super(props);
this.state = { sku: props.sku }
}
// ...
componentDidMount() {
setDYContext('PRODUCT', [ this.props.sku ]);
}
componentDidUpdate(prevProps) {
if (prevProps.sku !== this.props.sku) {
setDYContext('PRODUCT', [ this.props.sku ]);
}
}
render() {
return(
// ...
)
}
}
Example: Product page context (e-commerce and financial institutions)
<script type="text/javascript">
window.DY = window.DY || {};
DY.recommendationContext = { type: "PRODUCT", data: ['SKU123'] }; // in this example - a product page
</script>
Example: Post page (media)
<script type="text/javascript">
window.DY = window.DY || {};
DY.recommendationContext = { type: "POST", data: ['POST_ID123'] }; // in this example - a post page
</script>
Updated 6 months ago