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>