Contexte de Page pour l'Implémentation Côté Client

Exemple de page d'accueil :

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

Exemple de page de produit :

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

Exemple de page d'accueil :

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

Exemple de page de produit :

/**
* @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'] }; // dans cet exemple, une page de produit 
</script>

<script type="text/javascript">
  window.DY = window.DY || {}; 
  DY.recommendationContext = { type: "POST", data: ['POST_ID123'] }; // dans cet exemple, une page de publication 
</script>

Voici des exemples d'expressions régulières à des fins de contexte sur chacun de ces types de pages : 

Page d'accueil

L'expression régulière (regex) ajoutée dans cette règle de contexte est une chaîne ajouté à la fin de l'URL de la page d'accueil : www.mysite.com/[REGEX], où la balise [REGEX] est remplacée par l'expression que vous souhaitez utiliser. Notez qu'il ne peut pas y avoir de texte supplémentaire après l'expression. 

Exemple : 

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

Cette règle trouve cette URL : www.mysite.com/pl/pl/

Cette règle ne trouve pas cette URL : www.mysite.com/pl/pl/new-in/men

Page produit

Pour définir une expression régulière à des fins de contexte sur la page d'un produit, il faut procéder en deux étapes : Définissez le type de page (définissez le ciblage du produit) et définissez l'emplacement du SKU (définissez la règle du contexte) :

Dans la zone Define Page Type (Définir le type de page), sélectionnez le contexte regex, puis ajoutez l'expression (où l'exemple affiche [my regex]). 

Exemple :

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

Cette règle trouve toutes les pages dont la structure de SKU répond aux conditions incluses, telles que cette URL :

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

Ensuite, définissez l'emplacement du SKU sur la page de votre produit. Dans cet exemple, la valeur du SKU est extraite du dataLayer[0].sku (sur la page). Des objets peuvent être utilisés dans les règles regex s'ils sont disponibles depuis la fenêtre globale.

Page du panier

L'URL du panier est unique. Par exemple, cette URL : https://www.mysite.com/pl/pl/checkout/cart/ est la seule URL du site contenant la chaîne /checkout/cart. Par conséquent, aucune règle regex n'est requise. Le type de page peut être détecté à l'aide du paramètre d'URL.