Integração Experience

Esta página detalha a integração nativa para captura dos eventos da Experience. Em novas lojas, essa integração já está disponível automaticamente a partir do momento da instanciação.

Script Experience

O script da Wake - Experience é carregado por meio de componentes fechados localizados no repositório publico wake-components. Abaixo estão os links para os componentes relevantes:

• wake_experience_script_sdk.html
• wake_experience_btg.js

Para o funcionamento do componente é necessário que os campos de tokens estejam configurados no admin da loja em Configurações -> Integrações -> Wake Experience:

Inserção do Componente

Lojas com repositório criado a partir de 25/09/2024 possuem a referência para o componente. Para lojas que não possuem essa integração nativa, o componente pode ser adicionado manualmente em todos os arquivos html da pasta Pages através da seguinte referência no código:

HTML

{{ wake_experience_script_sdk experience_page:"GENERAL"}}

Parâmetros

• experience_page: Esse parâmetro é utilizado para indicar ao SDK da Experience qual tipo de página está sendo exibida. Por exemplo, ele diferencia páginas comuns de páginas de confirmação de compra, onde diferentes eventos são disparados.

Para páginas de confirmação de compra, o componente deve ser inserido da seguinte forma:

HTML

{{ wake_experience_script_sdk experience_page:"PURCHASE" orders: data.checkout.orders}}

• orders: Este campo é uma lista contendo os detalhes dos pedidos relativos à compra. Esse comportamento é aplicável somente para lojas que utilizam o modelo de Checkout SSR.

Funcionamento interno

O componente HTML, chamado por meio do componente fechado, insere automaticamente as tags <script> referentes ao SDK e ao BTG, bem como o JavaScript fechado wake_experience_btg.js. Ao analisar esse script, é possível observar como as tags do BTG são acionadas.

Em termos gerais, o script wake_experience_btg.js aproveita o comportamento do script presente no template da loja: Assets/JS/event_manager.js. Este script atua como um gerenciador central, responsável por coordenar os eventos de visualização e interação das páginas por meio do disparo de CustomEvents no JavaScript.

As informações usadas para os eventos de visualização de página normalmente são armazenadas no contexto JavaScript por meio de um componente específico localizado em Components/utils/data_layer/. Esse componente garante que os dados necessários para os eventos sejam disponibilizados de forma estruturada para o BTG e o SDK, permitindo a correta captura e análise das interações do usuário com as páginas.