Matcher

Matchers: Potencializando as Variants

Os Matchers são blocos essenciais no deco que desempenham um papel fundamental ao potencializar as Variants. Eles permitem que você avalie condições específicas e segmente seu público com base em vários critérios. Ao aproveitar os Matchers, você pode criar experiências personalizadas e dinâmicas para seus usuários. Ao criar um novo Matcher Block, você pode chamá-lo de Segmento.

Compreendendo os Matchers

No deco, os Matchers são criados usando funções dentro do código do seu site. Eles são ferramentas poderosas que permitem que você defina condições e avalie se um usuário pertence a um determinado segmento. Os Matchers servem como base para segmentar grupos específicos de usuários e personalizar o conteúdo com base em suas características ou comportamentos.

Os Matchers padrão estão prontamente disponíveis no deco e abrangem uma variedade de condições comuns, como características do usuário, data e horário, tipo de dispositivo, localização geográfica e seleção aleatória (testes A/B). Esses Matchers predefinidos oferecem flexibilidade e permitem que você personalize as variações de conteúdo com base nessas condições.

No entanto, o poder dos Matchers vai além das opções padrão. O deco oferece a capacidade de criar Matchers personalizados para atender às necessidades específicas do seu negócio. Com Matchers personalizados, você pode estender a funcionalidade do deco para integrar fontes de dados externas, como buscar dados de um sistema Salesforce ERP, e usar esses dados para determinar o segmento ao qual um usuário pertence.

Matchers Nativos

Desenvolvendo um Novo Matcher

Em seu repositório, os Matchers estão localizados na pasta matchers, assim como as seções e loaders. Vamos criar um novo matcher chamado MeuMatcher.ts para ilustrar o processo.

A assinatura do nosso matcher seguirá a seguinte estrutura:

import { MatchContext } from "deco/blocks/matcher.ts";

export interface Props {
}

/**
 * @title Meu Matcher
 */
export default function MeuMatcher(
  props: Props,
  ctx: MatchContext,
) {
  return true;
}

No exemplo acima, a função MeuMatcher aceita props como entrada, permitindo que você passe quaisquer dados necessários para o matcher. Além disso, ela recebe um objeto ctx do tipo MatchContext, que contém as informações da solicitação. Você tem a flexibilidade de realizar as operações desejadas dentro da função do matcher e retornar um valor booleano com base na avaliação.

Vamos dar uma olhada no exemplo MatchDate da biblioteca do deco:

/**
 * @title Por início
 */
export interface Props {
  /**
   * @format date-time
   */
  start?: string;
  /**
   * @format date-time
   */
  end?: string;
}

/**
 * @title Matcher de Data
 */
const MatchDate = (props: Props) => {
  const now = new Date();
  const start = props.start ? now > new Date(props.start) : true;
  const end = props.end ? now < new Date(props.end) : true;
  return start && end;
};

export default MatchDate;

Neste exemplo, a função MatchDate atua como um Matcher. Ela aceita props como entrada, que inclui as propriedades start e end. A função avalia se a data atual está dentro do intervalo de datas especificado. Se nenhum valor de start ou end for fornecido, ele será considerado true. A função MatchDate retorna um valor booleano com base na avaliação.

Os

Matchers também podem ter um comportamento "sticky", o que é particularmente útil para cenários de testes A/B. Para tornar um Matcher "sticky" na sessão do usuário, você pode exportar uma constante chamada sticky com o valor "session", conforme mostrado abaixo:

export const sticky = "session";

Aqui está um exemplo de implementação do MatchRandom usando a funcionalidade de sessão "sticky":

/**
 * @title Teste A/B {{{percentage traffic}}}
 */
export interface Props {
  traffic: number;
}

// Uma vez selecionado, a sessão reutilizará o mesmo valor
export const sticky = "session";

/**
 * @title Matcher Aleatório
 */
const MatchRandom = ({ traffic }: Props) => {
  return Math.random() < traffic;
};

export default MatchRandom;

No exemplo MatchRandom, a função matcher MatchRandom aceita traffic como prop, representando a porcentagem de tráfego que deve corresponder à condição. Ao gerar um número aleatório entre 0 e 1, a função determina se o valor gerado é menor que a porcentagem traffic especificada. O Matcher retorna true ou false com base nessa avaliação.

Os Matchers oferecem grande flexibilidade para personalizar e estender a funcionalidade do deco para atender às suas necessidades específicas. Com a capacidade de criar Matchers personalizados, você pode integrar fontes de dados externas, realizar cálculos complexos e implementar lógicas intrincadas para determinar a segmentação do usuário e fornecer experiências personalizadas.

Aproveitando o Poder dos Matchers nas Variants

Os Matchers são a base das Variants no deco. Ao combinar Matchers com diferentes condições, você pode criar variações de conteúdo direcionadas para segmentos de usuários específicos. As Variants permitem que você modifique e personalize o conteúdo dinamicamente com base na avaliação dos Matchers.

Ao configurar as Variants, você pode selecionar o Matcher apropriado para cada segmento e definir as condições que determinam se um usuário pertence a esse segmento. Ao utilizar Matchers nas Variants, você pode ajustar a experiência do usuário, otimizar a entrega de conteúdo e fornecer interações personalizadas.