Page Context for Client-side Implementation

Homepage example:

/**
* @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 (
  // ...
  )
} 

Product page example:

/**
* @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 (
  // ...
  )
}

Homepage example:

/**
* @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(
      // ...
    )
  }
}

Product page example:

/**
* @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(
      // ...
    )
  }
}

<script type="text/javascript">
  window.DY = window.DY || {}; 
  DY.recommendationContext = { type: "PRODUCT", data: ['SKU123'] }; // in this example - a product page 
</script>

<script type="text/javascript">
  window.DY = window.DY || {}; 
  DY.recommendationContext = { type: "POST", data: ['POST_ID123'] }; // in this example - a post page 
</script>

The following are examples of regular expressions for context on each of these page types: 

Homepage

The regular expression (regex) added in this context rule is a string added to the end of the homepage URL: www.mysite.com/[REGEX], where the tag [REGEX] is replaced with whatever expression you want to use. Note that there can be no additional text after the expression. 

Example: 

Expression: /\w{2}\/\w{2}\/$ (URL is www.mysite.pl/\w{2}\/\w{2}\/$)

This rule finds this URL: www.mysite.com/pl/pl/

This rule does not find this URL: www.mysite.com/pl/pl/new-in/men

Product page

To set a regex for context on a product page, there are two parts: Define the page type (set product targeting) and define the SKU location (set the context rule):

In the Define Page Type area, select the regex context, and then add the expression (where the example displays [my regex]. 

Example:

Expression: *[a-zA-Z0-9_]{5}-[a-zA-Z0-9_]{3}.*

This rule finds all pages with an SKU structure that meets the included conditions, such as this URL:

www.mysite.com/pl/pl/4270h-00x/opaska-na-wl-re

Next, set where the SKU is located on your product page. In this example, the SKU value is taken from the dataLayer[0].sku (on the page). Objects can be used in regex rules if they are available from the global window.

Cart page

The cart URL is unique. For example, this URL: https://www.mysite.com/pl/pl/checkout/cart/ is the only URL on the site with the string /checkout/cart. Therefore, no regex rule is needed. The page type can be detected using the URL parameter.