diff --git a/docs/developing-guide/go-live-ab-testing/en.md b/docs/developing-guide/go-live-ab-testing/en.md new file mode 100644 index 00000000..f9412a08 --- /dev/null +++ b/docs/developing-guide/go-live-ab-testing/en.md @@ -0,0 +1,121 @@ +--- +description: Go-Live with A/B Testing +since: 1.0.0 +--- + +Working with two environments simultaneously is sensitive in terms of data consistency. We recommend following a detailed and careful process, paying attention to some points such as: + +- Replicate the GTM identically in both environments +- Update both environments throughout the test +- Ensure feature parity + +On deco.cx, there are several testing methods before fully migrating a site. + +## Subdomain Method + +The subdomain method involves associating the site built on deco.cx with a new subdomain. + +Example: +For the current site www.deco.cx, we will associate the new site with the subdomain store.deco.cx. + +### How to Do It: + +1 - Register a subdomain on [deco.cx](http://deco.cx) + +- [Doc](https://deco.cx/docs/en/getting-started/custom-domains/) + +2 - Create a traffic splitting script: + +- Create a loader on deco.cx, like [this example](https://gist.github.com/guitavano/aca72370b74081289d5d2b86143828e6) +- Fill in the details of this loader in your ``site`` app. +- Insert this loader into the ```` of your current site within a `` +``` + +This script will randomly assign users to stay on the current site or redirect them to the subdomain. + +### How to Measure Results? + +- Set up G.A. and GTM on both sites. + +#### Advantages + +- The client only pays for infrastructure proportional to usage. +- Simple setup. + +#### Disadvantages + +- The end user sees a different URL +- Traffic splitting is done with JavaScript on the front end. + +## deco.cx Proxy Method + +The proxy method involves keeping all traffic on the same domain but transparently proxying part of the users. + + + +Notice that in this way, you need to place your old site on another domain so that deco.cx can use it for the proxy. + +### How to Do It: + +We have simplified the activation of this proxy with the following flow: + +1 - In the deco.cx panel, go to ``Apps`` + +2 - Open the ``site`` app + +3 - You should see this configuration: + + + +The segment shown in the image is ``Random``, with a 50% split, but you can use other segments. + +### How to Measure Results? + +- Set up G.A. and GTM on both sites. + +- Track results on deco.cx. + +To track results on deco.cx, the Matcher to be used must be created through the Experiments tab. Check how in [A/B Testing](https://deco.cx/docs/en/developing-capabilities/apps/ab-test). + +Additionally, in the settings, there is an option ``Scripts to include``; select and include the ``DecoAnalytics`` script. + +#### Advantages + +- Keeps the entire experience on the same domain. +- Ready-to-use traffic splitting setup. +- Ready-to-use analytics setup. + +#### Disadvantages + +- The client pays the cost of all traffic, regardless of scaling + +## External Proxy Method + +This method is the inverse of the proxy on deco.cx: the responsibility for splitting the traffic and managing the proxy lies with the old website. + +> For VTEX stores, deco.cx is building an APP on VTEX IO to perform this proxy. + +If you have any doubts about how to develop this proxy on your technology, we are on Discord to help. + +#### Advantages + +- The client only pays for infrastructure proportional to usage. + +#### Disadvantages + +- Setup does not come ready, depending on the technology. + +## Extra Information + +### GTM Configuration + +To assist in configuring events in GTM, we recommend checking the ``deco_matcher...`` cookie, which indicates which version the user is on. + +### VTEX Orderform + +As an additional data source, we recommend adding a marker in the marketingData within the OrderForm, indicating which version the user is on, as this information goes to the VTEX order panel. + +- [Example Script](https://gist.github.com/guitavano/6de5f1068c85800b0702937b97c51ef2) diff --git a/docs/developing-guide/go-live-ab-testing/pt.md b/docs/developing-guide/go-live-ab-testing/pt.md new file mode 100644 index 00000000..1ff26a98 --- /dev/null +++ b/docs/developing-guide/go-live-ab-testing/pt.md @@ -0,0 +1,122 @@ +--- +description: Go-Live com Teste A/B +since: 1.0.0 +--- + +Trabalhar com dois ambientes ao mesmo tempo é algo sensível em termos de consistência de dados. Recomendamos que seja seguido um processo detalhado e cuidadoso, prestando atenção a alguns pontos, como: + +- Replicar o GTM de forma idêntica em ambos os ambientes +- Atualizar ambos os ambientes ao longo do teste +- Garantir a igualdade de features + +Na deco.cx, existem alguns métodos de teste antes de realizar a migração completa de um site. + +## Método de subdomínio + +O método de subdomínio, consiste em associar o site construído na deco.cx a um novo subdomínio. + +Exemplo: +Meu site atual ``www.deco.cx``, vamos associar o novo site ao domínio ``store.deco.cx``. + +### Como fazer: + +1 - Registrar um sub-domínio na [deco.cx](http://deco.cx) + +- [Doc](https://deco.cx/docs/en/getting-started/custom-domains/) + +2 - Criar um script para divisão de tráfego + +- Crie um loader na deco.cx, como [esse](https://gist.github.com/guitavano/aca72370b74081289d5d2b86143828e6) +- Preencha as informações desse loader na sua app ``site`` +- Insira na tag ```` do seu site atual, esse loader em uma tag `` +``` + +Esse script, irá sortear os usuáriso para mantê-los no site ou redirecioná-los para o subdomínio. + +### Como medir o resultado? + +- Configurar o G.A e o GTM em ambos os sites + +#### Vantagens + +- O cliente só paga a infraestrutura proporcional ao uso +- Setup simples + +#### Desvantagens + +- O cliente final vê uma URL diferente +- A divisão de tráfego é feita com Javascript no Front + +## Método de Proxy da deco.cx + +O método de proxy consiste em manter todo o tráfego no mesmo domínio, mas realizar um proxy transparente para parte dos usuários. + + + +Repare que dessa forma, você precisa colocar o seu antigo site em outro domínio, para que a deco.cx utilize-o para o Proxy. + +### Como fazer: + +Facilitamos a ativação desse proxy com esse fluxo: + +1 - No painel deco.cx, acesse ``Apps`` + +2 - Abra o app ``site`` + +3 - Você deve ver essa configuração: + + + +O segmento da imagem, é o ``Random``, com split de 50%, mas você pode utilizar outros segmentos. + +### Como medir o resultado? + +- Configurar o G.A e o GTM em ambos os sites + +- Acompanhar os resultados na deco.cx + +Para acompanhar os resultados na deco.cx, o Matcher a ser utilizado precisa ser criado através da aba de Experiments, confira como em [Teste A/B](https://deco.cx/docs/pt/developing-capabilities/apps/ab-test). + +Além disso, repare que nas configurações, existe a opção ``Scripts to include``; selecione e inclua o script ``DecoAnalytics``. + +#### Vantagens + +- Mantem a experiência toda no mesmo domínio +- Setup de divisão de tráfego pronto +- Setup de Analytics pront + +#### Desvantagens + +- Paga o custo de todo tráfego, independente do escalonamento + +## Método de Proxy externo + +Este método, é o inverso do proxy na deco.cx: a responsabilidade de dividir o tráfego e fazer o proxy é do antigo website. + +> Nota: Para lojas VTEX, deco.cx está construindo +> um APP no Vtex IO para realizar esse proxy + +Caso esteja em dúvida sobre como desenvolver esse proxy na sua tecnologia, estamos no [Discord](https://deco.cx/discord) para ajudar. + +#### Vantagens + +- O cliente só paga a infraestrutura proporcional ao uso + +#### Desvantagens + +- Setup não vem pronto, a depender da tecnologia + +## Informações extras + +### Configuração GTM + +Para auxiliar a configuração dos eventos no GTM, recomendamos a consulta do cookie ``deco_matcher...``, que indica em qual versão o usuário está. + +### Orderform VTEX + +Como fonte extra de dados, recomendamos a inserção no OrderForm de uma marcação no marketingData, indicando em qual versão o usuário está, pois essa informação vai para o painel de pedidos da VTEX. + +- [Script exemplo](https://gist.github.com/guitavano/6de5f1068c85800b0702937b97c51ef2) \ No newline at end of file diff --git a/docs/toc.ts b/docs/toc.ts index 0d19c0f2..3fa9da04 100644 --- a/docs/toc.ts +++ b/docs/toc.ts @@ -213,6 +213,13 @@ const tableOfContents: TableOfContents = [ }, slug: "developing-guide/examples", }, + { + title: { + pt: "Go Live com Teste A/B", + en: "Go Live with A/B Testing", + }, + slug: "developing-guide/go-live-ab-testing", + } ], }, {