Contexto da Página para Implementação do Lado do Cliente

Exemplo de página inicial:

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

Exemplo de página de produto:

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

Exemplo de página inicial:

/**
* @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 ('PÁGINA INICIAL');
  }
  
  render() {
  return(
  // ...
  )
  }
}

Exemplo de página de produto:

/**
* @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'] }; // nesse exemplo - uma página de produto 
</script>

<script type="text/javascript">
  window.DY = window.DY || {}; 
  DY.recommendationContext = { type: "POST", data: ['POST_ID123'] }; // nesse exemplo - uma página de publicação 
</script>

A seguir estão exemplos de expressões regulares para contextualizar cada um desses tipos de página: 

Homepage

A expressão regular (regex) adicionada nessa regra de contexto é uma string adicionada ao final do URL da página inicial: www.mysite.com/[REGEX], onde a tag [REGEX] é substituída por qualquer expressão que você quiser usar. Observe que não pode haver texto adicional após a expressão. 

Exemplo: 

Expressão: /\w{2}\/\w{2}\/$ (URL é www.mysite.pl/\w{2}\/\w{2}\/$)

Essa regra encontra este URL: www.mysite.com/pl/pl/

Essa regra não encontra este URL: www.mysite.com/pl/pl/new-in/men

Product page

Para definir um regex para contexto em uma página de produto, há duas partes: Defina o tipo de página (defina a segmentação do produto) e defina a localização da SKU (defina a regra de contexto):

Na área Define Page Type (definir tipo de página), selecione o contexto do regex e, em seguida, adicione a expressão (onde o exemplo exibe [my regex]). 

Exemplo:

Expressão: *[a-zA-Z0-9_]{5}-[a-zA-Z0-9_]{3}. *

Essa regra encontra todas as páginas com uma estrutura de SKU que atende às condições incluídas, como este URL:

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

Em seguida, defina onde a SKU está localizada na página do seu produto. Nesse exemplo, o valor da SKU é obtido de dataLayer[0].sku (na página). Objetos podem ser usados em regras de regex se estiverem disponíveis na global window.

Cart page

O URL do carrinho é único. Por exemplo, este URL: https://www.mysite.com/pl/pl/checkout/cart/ é o único URL no site com a string /checkout/cart. Portanto, nenhuma regra de regex é necessária. O tipo de página pode ser detectado usando-se o parâmetro de URL.