Visão geral: Integre a AppsFlyer a sites usando o Web SDK para registrar e medir visitas, eventos, conversões e receitas.
Guia de usuário e integração do web SDK
- A tag JavaScript do Web SDK:
- faz parte da solução People-Based Attribution (PBA) para analisar as jornadas dos usuários em multi plataformas.
- comunica as visitas e ações dos usuários no seu site à plataforma da AppsFlyer.
- é um módulo de plug-in de site que não precisa de programação. É independente do sistema operativo e do browser do visitante do site.
- Tamanho 40-60Kb.
- Implemente o Web SDK juntamente com o SDK mobile da AppsFlyer para registrar e mapear a atividade do usuário em seu aplicativo móvel e ambientes web.
- Os eventos que ocorrem fora dosite podem ser registados usando a API de eventos server-to-server da web (Web S2S)
Integrar o web SDK no site
Instalação e integração
Considerações e ações necessárias
Checklist da integração |
---|
Para garantir o registro das visitas e dos eventos, o web SDK deve ser instalado em todas as páginas do site. |
Coloque o código do trecho de modo que ele seja carregado o mais cedo possível no escopo da página. Para isso, coloque o código perto do topo da tag do cabeçalho. |
Se você estiver integrando o SDK usando o Google Tag Manager (GTM):
|
Você pode implementar o Web SDK com ou sem Smart Banners. Siga as instruções relevantes nas seções a seguir. |
Requisitos obrigatórios de integração
Valide a integração usando a ferramenta de teste |
Antes de começar:
- Verifique com o profissional de marketing se ele criou o pacote de marca.
- Para obter orientações adicionais, consulte o guia de integração de PBA.
- Considere o seguinte: Se você já tiver o SDK web Smart Banners autônomo, remova-o e substitua-o pelo SDK web para Smart Banners e PBA (Atribuição baseada em Pessoas). Não basta adicionar o SDK web autônomo para PBA.
Faça o seguinte:
- Obter a chave de desenvolvimento web do web SDK. Atenção! Esta não é a mesma chave usada pelos aplicativos mobile.
-
Para obter a chave do desenvolvedor web:
- Na AppsFlyer, no menu superior, selecione a aba Meus Aplicativos .
- Clique em Visualizar pacotes de marca.
- Copie a chave de desenvolvimento web necessária . (WEB_DEV_KEY)
-
Para obter a chave do desenvolvedor web:
- Se você implementar Smart Banners, obtenha a chave Smart Banner.
-
Para obter a chave Smart Banner:
- Na AppsFlyer, no menu lateral, vá para Engajar > Web to App > Smart Banners.
- Copie a chave do Smart Banner necessária.
-
Para obter a chave Smart Banner:
- Permissões para adicionar scripts a etiquetas de cabeçalho no site.
- Se você usar o Google Tag Manager, ele deve estar integrado no site.
Proceda à integração do SDK web usando uma das seguintes opções.
Trecho de código JavaScript
Integrar o SDK da web usando um dos seguintes métodos.
Para instalar o web SDK sem Smart Banners:
- Repita o procedimento a seguir em todas as páginas do seu site.
- No trecho de código a seguir, substitua o
WEB_DEV_KEY
usando a chave especificada nos pré-requisitos. - Cole o trecho de código na tag principal em seu site. Cole-o perto do topo da etiqueta de cabeçalho.
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>
Para implementar o Web SDK com Smart Banners:
- Repita o procedimento a seguir em todas as páginas do seu site.
- No trecho de código a seguir, substitua o
WEB_DEV_KEY
eYOUR_BANNER_KEY
usando as chaves especificadas nos pré-requisitos. - Cole este trecho de código na etiqueta do cabeçalho do site. Cole-o perto do topo da etiqueta de cabeçalho.
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}});
AF('banners', 'showBanner');
</script>
Para implementar o Web SDK com o Google Tag Manager (GTM):
- Acesse o Google Tag Manager.
- Crie uma nova tag para o Web SDK da AppsFlyer.
- Selecione o tipo de tag HTML personalizada.
- Dê um nome significativo à etiqueta.
- Siga um dos procedimentos abaixo:
- Se você integrando o Web SDK sem Smart Banners:
- Cole o trecho de código a seguir na janela Configuração de tags.
- No trecho de código, substitua
WEB_DEV_KEY
usando a chave mencionada nos pré-requisitos.
<!-- AppsFlyer web SDK --> <script> !function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){ (t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))}, t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1, o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""), p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}}) </script>
- Se estiver integrando o Web SDK com Smart Banners:
- Cole o trecho de código a seguir na janela Configuração de tags.
- No trecho de código, substitua
WEB_DEV_KEY
eYOUR_BANNER_KEY
usando as chaves mencionadas nos pré-requisitos.
<!-- AppsFlyer web SDK -->
<script> !function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){ (t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))}, t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1, o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""), p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}}); AF('banners', 'showBanner'); </script>
- Se você integrando o Web SDK sem Smart Banners:
- Clique em Salvar.
- Siga um dos procedimentos abaixo:
- Para adicionar o gatilho a todas as páginas:
-
Para adicionar o gatilho a páginas específicas:
- Clique em Salvar tag.
- Na janela principal do GTM, selecione Gatilhos . Clique em Novo.
- Clique no ícone de caneta.
- Escolha o tipo de gatilho Visualização de página.
- Selecione Algumas visualizações de página.
- Defina a página e as condições de gatilho conforme necessário.
- Clique em Salvar.
- Associe o gatilho à tag AppsFlyer Web SDK. Para isso:
- Crie uma propriedade na Adobe Experience Cloud
- Adicione o Web SDK à propriedade do Adobe Launch
- Adicione a etiqueta do Adobe Launch ao site
- Publique o ambiente do Adobe Launch
Crie uma propriedade na Adobe Experience Cloud
- Acesse o Adobe Experience Cloud> Inicialização.
- Em Adobe Experience Cloud Launch, clique em Ir para Inicialização.
- Clique em Nova propriedade.
- Nomeie a propriedade.
- Em Plataforma, selecione Web.
- Insira o domínio do seu site.
- Clique em Salvar.
Adicione o Web SDK à propriedade do Adobe Launch
- Na página Minha propriedade da web, selecione a aba Regras.
- Nomeie a regra. Recomendado para uso, Carregar Web SDK.
- Na seção IF, em EVENTOS, clique em +Adicionar.
- Em Tipo de evento, selecione Core - DOM Ready.
- Clique em Manter alterações.
- Na seção THEN, em Ações, clique em +Adicionar .
- Em Tipo de ação > Código personalizado.
- Selecione JavaScript > Abrir Editor e cole o trecho do código do SDK web sem as tags de <script>.
- Clique em Manter alterações para fechar o editor de código.
- Clique em Salvar.
Adicione a etiqueta do Adobe Launch ao site
- Na página de Propriedade da minha web, selecione a aba Ambientes .
- Encontre a linha com o ambiente no qual você deseja publicar (desenvolvimento ou produção).
- No título INSTALAÇÃO, clique no ícone de caixa na linha relevante; geralmente, esse é um ambiente de produção.
- Consulte a seção sobre como publicar o ambiente do Adobe Launch.
- Na caixa de diálogo Instruções de instalação na web:
- Copie o trecho de código de script.
- Feche a caixa de diálogo.
- Cole o trecho de código na tag <head> do site.
Publique o ambiente do Adobe Launch
- Na página Propriedade da minha web, acesse a aba Publicação .
- Na seção Desenvolvimento, clique em Adicionar nova biblioteca.
- Nomeie a biblioteca e escolha um ambiente.
- Em ALTERAÇÕES DE RECURSO, clique em Adicionar um recurso.
- Clique em Regras > Carregar SDK web > Mais recentes > Selecionar e criar uma nova revisão.
- Clique em Salvar.
- Na seção Desenvolvimento:
- Ao lado da biblioteca recém-criada, clique no menu Ação (3 pontos) > selecione Construir para Desenvolvimento.
- Clique no menu de ação novamente > selecione Enviar para aprovação.
- Na seção Submetido:
- Clique no menu de ação > selecione Construir para Preparação.
- Clique novamente no menu de ação > selecione Aprovar para publicação.
- Abaixo da seção Aprovado:
- Clique no menu de ação > selecione Construir e publicar em produção.
- O processo está concluído.
Quando o site é carregado num dispositivo móvel, o criativo ativo aparece no banner. Para exibir o banner em páginas específicas ou de acordo com as ações do usuário, consulte as Regras do Adobe Launch.
Certifique-se de que o SDK está funcionando
Depois de instalado, verifique se o Web SDK da AppsFlyer é chamado pelo navegador do visitante e se as mensagens estão sendo enviadas. Isto é feito examinando a conexão de rede de mensagem relatada no navegador.
Para garantir que o SDK é carregado e está funcionando:
- Acesse o site.
- Abra as ferramentas de desenvolvimento do navegador.
- Vá para a aba (A) Network.
- Atualize a página.
- Filtre por (B) wa.appflyer.
- Selecione a mensagem events (C).
- Na aba de cabeçalhos, (D) certifique-se de:
- O URL de solicitação é wa.appsflyer.com/events.
- parâmetro de consulta site_id=
WEB_DEV_KEY
. - (E) o código de status é 200.
- Verifique se o valor de site_id é igual ao valor de
WEB_DEV_KEY
nas configurações do pacote de marcas:- Na AppsFlyer, no menu lateral, selecione Configurações > Pacotes de marca.
- Clique na chave Web dev, o que permite copiar a chave.
- Cole a chave em qualquer local (nova aba do navegador, bloco de notas) para exibir a chave.
- Verifique se o site_id e
WEB_DEV_KEY
correspondem.
- Certifique-se de que o SDK é carregado apenas uma vez. O carregamento múltiplo de SDK pode fazer com que o SDK deixe de funcionar.
Eventos de envio opt-in/opt-out
O Web SDK envia dados de eventos do visitante para a AppsFlyer. É possível controlar, parar ou iniciar o envio de eventos, conforme descrito nesta secção.
Considere o seguinte:
- Definição do estado inicial do SDK: Determina se o SDK envia eventos ao carregar inicialmente a página web ou se o SDK tem de esperar até que seja dado um comando explícito para começar a enviar eventos. A definição está contida no trecho da web.
-
Controle explícito: Use para parar ou iniciar o envio de eventos. Por exemplo, se você implementar banners de opt-in/opt-out de dados (também conhecidos como banners de consentimento de cookies), integre os comandos explícitos nos controlos do banner para iniciar e parar o envio de eventos. O controle explícito tem prioridade sobre a definição do estado inicial do SDK e usa cookies primários persistentes com as seguintes características:
- Definido no domínio do site.
- Expira após um período definido pelo Web SDK ou conforme determinado pelo navegador. Após a expiração do cookie, o Web SDK reverte para a definição do estado inicial.
- O cookie Web SDK da web não interfere e está sempre sujeito às configurações de cookies específicas do navegador.
Definição do estado inicial do SDK
Definição | Trecho necessário |
---|---|
[Padrão] Enviar eventos |
Faça a seguinte alteração no trecho do Web SDK. Se necessário, adicione o parâmetro measurementStatus: Defina measurementStatus=true
|
Não envie eventos
|
Faça a seguinte alteração no trecho do Web SDK. Se necessário, adicione o parâmetro measurementStatus: Set measurementStatus=false |
Controlo explícito
Opção | Comando |
---|---|
Começar a enviar eventos (opt-in) | window.AF_SDK.PLUGINS.PBA.enableMeasurement() |
Pare de enviar eventos (opt-out) | window.AF_SDK.PLUGINS.PBA.disableMeasurement() |
Implementar uma política de Política de Segurança de Conteúdo (CSP)
Alguns webmasters exigem que o Javascript seja protegido por seu CSP. Você pode usar vários mecanismos de CSP para fazer isso, incluindo qualquer um dos seguintes:
- CSP usando self
- CSP usando nonce: Anexe o comando nonce à tag de script usando um valor nonce aleatório gerado por você.
<script nonce="random value generated by you"> !function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){ .... </script>
Descartar parâmetros de consulta
Se seus parâmetros de consulta contiverem dados que você não deseja que a AppsFlyer registre, você poderá instruir a plataforma AppsFlyer a descartar alguns ou todos os parâmetros de consulta. Ao fazer isso, eles não ficam disponíveis em dados brutos ou relatórios.
Você pode implementar os métodos descritos em relação a URLs, referenciadores e header_referer.
Consultar opções de descarte
Método | Descrição |
---|---|
Descartar todos os parâmetros de consulta | Anexe af_url=true ao url |
Descartar parâmetros de consulta especificados |
Ao definir uma máscara de parâmetros de consulta, você especifica quais parâmetros serão descartados. Defina a máscara de descarte usando Exemplo: URL com máscara:
URL após descartar:
|
Princípios do registro de eventos
Eventos de conversão e padrão
- Os eventos do usuário são registrados pelo SDK, que envia o evento para a plataforma AppsFlyer.
- Usando a lista de eventos de conversão, definida pelo profissional de marketing, a AppsFlyer divide os eventos em eventos padrão e de conversão.
- Os dados dos eventos de conversão estão disponíveis nos painéis de controle de PBA.
- Os dados de conversão e de eventos padrão estão disponíveis em relatórios de dados brutos.
Eventos de conversão
- Os eventos de conversão fornecem insights sobre os seus esforços comerciais e de marketing. Os eventos de conversão incluem compras, downloads, inscrições e assinaturas.
- O PBA atribui os eventos de conversão à fonte de media que levou o usuário a visitar o site.
- Ao identificar o canal de mídia atribuído, é possível medir e diferenciar a qualidade dos usuários trazida por diferentes canais de mídia.
- Os eventos de conversão são usado para registrar as receitas e calcular o ROI.
- Use-os para comparar o orçamento de anúncios para canais de mídia específicas com as receitas geradas pelos usuários que provêm desses canais de mídia.
Eventos padrão
- Os eventos padrão são usados para validar a jornada do usuário e os funis que geram conversões.
- Use-os para medir a atividade do usuário e destacar os canais de mídia que atraem usuários engajados.
- Registre a atividade do usuário para marcar os usuários para campanhas de reengajamento.
Eventos de registro
Acione o Web SDK para registrar eventos quando determinadas condições são cumpridas, por exemplo, quando uma página inicial é carregada ou quando os usuários interagem com elementos do site. Ver exemplos de registro de eventos.
Identificação de usuários através do ID de usuário do cliente (CUID)
- Os usuários da web são identificados na AppsFlyer usando o CUID único que você atribui a eles. Normalmente, o CUID é gerenciado pelos seus servidores backend.
- Use o mesmo valor CUID que usa no ambiente móvel. Desta forma, é possível ter uma visão holística da atividade do usuário em multi plataformas. A função no SDK mobile é setCustomerUserId (iOS, Android, Unity).
-
Para definir o CUID no Web SDK:
- Defina o CUID no primeiro momento em que tiver acesso a ele. Na maioria das vezes, isto significa que é necessário esperar que o usuário se identifique através do login ou da inscrição.
-
Dispare a chamada JavaScript para setCustomerUserId() como mostrado no exemplo a seguir.
Observação! Envie o CUID como uma string mesmo que seja um número. Faça-o colocando-o entre aspas.
- Se você implementar o S2S da Web, considere que poderá ter de notificar o PBA quando associar um CUID a um ID de visitante da web no seu backend.
- Os CUID não devem conter informações pessoais diretamente identificáveis , como um número de telefone ou um endereço de email.
// Associate all current user web events to distinct ID 663274
AF('pba', 'setCustomerUserId' , '663274')
Parâmetros de eventos do Web SDK
Nome do parâmetro | Obrigatoriedade | Descrição |
---|---|---|
eventType | Sim |
Tipo de evento Formato: String Preencha sempre este parâmetro com EVENT. Exemplo: eventType: "EVENTO" |
eventName | Sim |
Nome do evento Formato: String Exemplo: Compra, Assinatura |
Não |
Este parâmetro está descontinuado e será removido do sistema em data a ser anunciada. No lugar dele, use o parâmetro eventValue. |
|
|
Não |
Este parâmetro está descontinuado e será removido do sistema em data a ser anunciada. No lugar dele, use o parâmetro eventValue. |
eventRevenue | Não |
Receita atribuída a um evento de conversão Formato: Float |
eventRevenueCurrency | Não |
Moeda da receita
Formato: String |
Valor do evento | Não |
Mapa de parâmetros de eventos que descrevem o evento. Use este parâmetro para enviar eventos avançados in-app como SKU do produto, preço do item de linha.
Formato: JSON
Exemplo: Para enviar o SKU ABC123, de cor azul e preço unitário de $3,99
Limitação: 1000 caracteres. Não exceda este valor, será truncado. |
Registrar cenários de eventos
Exemplo de evento
// purchase event of shoes with associated revenue
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});
Os eventos que você envia dependem da natureza do seu aplicativo web. Por exemplo, um aplicativo de loja online requer um conjunto de eventos diferente do de um canal de notícias. Veja os cenários que a seguir para ter uma noção dos eventos que você deve enviar e quando.
Loja online
Suponha que está gerenciando uma loja online. Alguns eventos padrão que talvez você queira registrar são:
- Pesquisa: evento padrão
- Adicionar ao carrinho: evento padrão
- Remover do carrinho: evento padrão
- Compra: evento de conversão
Canal de notícias
Suponhamos que está gerenciando um canal de notícias. Alguns eventos que talvez você queira registrar são:
- Inscrição: evento de conversão
- Assinatura de compras: evento de conversão
Garantir o envio de eventos
Esta parte destina-se a desenvolvedores web.
Teste a integração do PBA web SDK: visualize eventos de teste em tempo real.
Para garantir que os eventos sejam enviados para a AppsFlyer:
- Abra o site.
- Abra as ferramentas de desenvolvimento do navegador.
- Mude para a aba Rede.
- Acione o evento.
- Filtrar por mensagem.
- Procure uma solicitação de rede que comece com o destino wa.appsflyer.com (veja a imagem abaixo).
- Certifique-se de que:
- O código de status é 200.
- A carga útil do pedido está alinhada com os parâmetros do evento.
Exemplos
Eventos de registro
O código fornecido serve apenas para fins ilustrativos. Não use este código tal como está.
- Pressupostos: O Web SDK já está carregado pela página no momento em que o evento é enviado.
- Os cenários de exemplo contêm o código para registrar eventos quando:
- uma página inicial é carregada.
- os usuários interagem com o site.
Registro de eventos quando uma página inicial é carregada
- Você tem uma página de assinatura de newsletters e pretende registrar as assinaturas.
- Você também pode criar uma página de agradecimento e redirecionar os usuários para essa página depois que eles se inscrevem.
<html>
<head>
<!-- Assume that the server returns a response with details about the newly subscribed user -->
<!-- Alternatively, you can extract data from localStorage or cookies,
in case data was set in either of them during the subscription process
-->
<script>window.onload = function(){
AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion', eventValue: {'label' : 'newspaper'},
eventName: 'subscription',}); } </script> </head> <body> <h1>Thank You for Subscribing to Our Newsletter</h1> </body> </html>
- O código anterior contém uma página HTML básica. A página web precisa carregar o Web SDK para que você possa enviar eventos.
- Depois que a página é carregada, após o usuário ser redirecionado para ela, o método de carregamento da janela chama o método AF() para enviar o evento de assinatura para a AppsFlyer.
Registro de eventos quando os usuários interagem com o site
- Você tem um site de eCommerce e deseja registrar eventos de checkout.
- Quando o usuário clica no botão de checkout, o Web SDK envia um evento para a AppsFlyer.
<html>
<head>
<!-- Assume that data about products in the shopping cart
is stored in localStorage -->
<script>
window.onload = function () {
document.getElementById('checkout').addEventListener('click', function () {
AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
});
}
</script>
</head>
<body>
<h1>Shopping Cart</h1>
<h2>Shirt</h2>
<p>
<ul>
<li>Color: Blue</li>
<li>Quantity: 2</li>
<li>Price: $20</li>
</ul>
</p>
<h2>Pants</h2>
<p>
<ul>
<li>Color: Black</li>
<li>Quantity: 3</li>
<li>Price: $15</li>
</ul>
</p>
<button id='checkout'>Checkout</button>
</body>
</html>
O código anterior mostra uma página HTML básica. A página web precisa carregar o Web SDK para que você possa enviar eventos.
- Depois que a página é carregada, ela vincula um ouvinte de clique ao botão Checkout.
- Quando o usuário clica no botão Checkout, a função de retorno de chamada:
- busca dados de localStorage.
- chama o método AF() e passa dados para ele.
- O método AF() envia o evento para a AppsFlyer.
Registro de eventos quando uma página inicial é carregada
- Você tem uma página de assinatura de newsletters e pretende registrar as assinaturas bem-sucedidas.
- Você configurou uma página de agradecimento para a qual os usuários são redirecionados depois de se inscreverem com sucesso.
- Crie uma página de agradecimento
<html> <head> <script> // Google Tag Manager loads the Web SDK <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXX'); </script> <script> // Assume that the server returns a response with details about the newly subscribed user function getResponseFromServer() { return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail }) } //Alternatively, you can extract data from localStorage or cookies, //in case data was set in either of them during the subscription process localStorage.setItem('data', JSON.stringify({ action: 'subscribe', category: 'site actions', label: 'user@email.com' })); </script> </head> <body> <h1>Thank You for Subscribing to Our Newsletter</h1> </body> </html>
O código anterior carrega o GTM que, por sua vez, carrega o Web SDK. Depois disso, duas outras ações ocorrem no script. Uma é uma função que obtém uma resposta do servidor com detalhes do usuário. A outra define dados para armazenamento local. GTM tem acesso à função e ao localStorage. Você pode chamar a função e acessar localStorage usando GTM.
- Adicione uma nova tag para atribuir assinaturas após o carregamento da página de agradecimento
- Dê um nome distinto à tag e selecione a opção de tipo de tag HTML personalizado.
- Coloque o seguinte código no HTML personalizado.
<script> AF('pba', 'event', {eventType: 'EVENT',
eventValue: {'category' : 'holiday_promotion'}
, eventName: 'subscription'}); </script> - Expanda o controle Configurações avançadas e, em seguida, o controle Sequenciamento de tags abaixo da área de texto e certifique-se de que ele esteja configurado para disparar a conversão após a execução da tag.
- Para disparar a tag de conversão, defina um gatilho. No exemplo, o gatilho é acionado ao carregar a página de agradecimento.
Registro de eventos quando os usuários interagem com o site
- Você tem um site de eCommerce e deseja registrar eventos de checkout.
- Depois que o usuário clica no botão de checkout, o Web SDK envia um evento para a AppsFlyer.
- Configure uma página de checkout
<html> <head> <script> // Google Tag Manager loads the Web SDK <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXX'); </script> </head> <body> <h1>Shopping Cart</h1> <h2>Shirt</h2> <p> <ul> <li>Color: Blue</li> <li>Quantity: 2</li> <li>Price: $20</li> </ul> </p> <h2>Pants</h2> <p> <ul> <li>Color: Black</li> <li>Quantity: 3</li> <li>Price: $15</li> </ul> </p> <button id='checkout'>Checkout</button> </body> </html>
O código anterior carrega o Web SDK usando GTM. O resto é simplesmente HTML que imita uma página de carrinho de compras. Observe o botão Checkout que contém o ID checkout. É necessário ao configurar o GTM para lidar com um clique nesse botão.
- No GTM, clique em Variáveis, clique em Configurar e marque Clicar element na lista de Variáveis internas.
- Crie uma nova variável, dê a ela um nome significativo e escolha o tipo Todos os Elementos.
- Na configuração do gatilho, escolha Alguns cliques, escolha Clicar elemento que corresponda ao seletor CSS de #checkout.
- Crie uma nova tag para a ação de checkout, escolha o tipo HTML personalizado e defina o gatilho como gatilho de checkout.
<script> AF('pba', 'event', {eventType: 'EVENT',
eventValue: {'category' : 'holiday_promotion'}
, eventName: 'checkout'}); </script>
- Certifique-se de que a tag das funções do Web SDK seja carregada antes de o evento ser acionado.
- Não envie caracteres especiais nos valores dos eventos, como símbolos de moeda no valor da receita.
- As strings de valor devem ter menos de 50 caracteres.
Definir o ID de usuário do cliente após a inscrição
O código fornecido nestes exemplos é apenas para referência. Não use este código tal como está. Se você não tiver certeza de como usar este código, consulte o seu desenvolvedor Web.
Pressuposto: O Web SDK é carregado pela página antes de o evento ser enviado; não carregue o SDK novamente.
Cenário do usuário:
- Um usuário inscreve-se no seu site.
- O código do site recolhe os dados do usuário e envia-os para o seu servidor.
- O servidor gera um CUID único para o usuário.
- Na página de agradecimento após o registro, você consulta o servidor para obter o novo CUID.
- Usando a resposta do servidor, você define o CUID da AppsFlyer usando o método setCustomerUserId() do Web SDK.
Crie uma página de inscrição:
<html>
<head>
<!-- The Web SDK script loads first -->
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>
<script>
};
// This function stores the user email sent to the server after the user reaches the thank you page
// The response from the server is a unique CUID that should be set using the web SDK setCustomerUserId method
function storeUserEmail (){
var userEmail = document.getElementById('email').value;
localStorage.setItem('user_email', userEmail);
}
</script>
</head>
<body>
<h1>Sign Up</h1>
<form onsubmit="storeUserEmail()" action="/signup" method="post">
<div><label>Name</label>
<input type="text" name="name" id="name"></div>
<br />
<div> <label>Email</label>
<input type="email" name="email" id="email"></div>
<br />
<input type="submit" id="submit">
</form>
</body>
</html>
O código anterior acima é um formulário de registro simples. Quando o formulário é enviado, o e-maill é armazenado em localStorage. Quando o usuário chega à página de agradecimento, o endereço de e-mail é enviado para o servidor para gerar o CUID único para o endereço de e-mail.
Configure uma página de agradecimento para os usuários que se inscrevem:
<html>
<head>
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>
<script>
// Using the fetch API to send the user email to the server
// and get the unique user id in return
window.onload = function () {
var userEmail = localStorage.getItem('user_email');
fetch('users/' + userEmail).then(function (res) {
res.text().then(function (id) {
console.log(id);
AF('pba', 'setCustomerUserId', id);
});
});
} </script>
</head>
<body>
<h1>Thank You for Signing Up!</h1>
</body>
</html>
O código usa a API fetch. Ele envia ao servidor o endereço de e-mail inserido pelo usuário. Partindo do princípio de que o servidor cria um usuário com um CUID único aquando da inscrição, o envio do endereço de e-mail para o servidor destina-se a receber um CUID único. O servidor responde com um CUID único e este CUID único é o valor que é passado com o método setCustomerUserId.
-
Crie uma página de inscrição:
<html> <head> <script>
// Google Tag Manager loads the Web SDK (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-5VJ6C7R');
// This function stores the user email to be sent to the server after the user reaches the thank you page // the response from the server is a unique CUID that should be used in the web SDK setCustomerUserId method function storeUserEmail (){ var userEmail = document.getElementById('email').value; localStorage.setItem('user_email', userEmail); } </script> </head> <body> <h1>Sign Up</h1> <form onsubmit="storeUserEmail()" action="/signup" method="post"> <div><label>Name</label> <input type="text" name="name" id="name"></div> <br /> <div> <label>Email</label> <input type="email" name="email" id="email"></div> <br /> <input type="submit" id="submit"> </form> </body> </html>O código acima é um formulário de registro simples. Quando o formulário é enviado, o endereço de e-mail é armazenado em localStorage. Quando o usuário chega à página de agradecimento, o endereço de e-mail é enviado para o servidor para obter o CUID único para esse e-mail.
-
Configure uma página de agradecimento para os usuários que se inscrevem:
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))}, t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1, o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""), p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}}) </script> <script> // using the fetch api to send the user email to the server // and get the unique user id in return window.onload = function () { var userEmail = localStorage.getItem('user_email'); fetch('users/' + userEmail).then(function (res) { res.text().then(function (id) { console.log(id); AF('pba', 'setCustomerUserId', id); }); }); } </script> </head> <body> <h1>Thank You for Signing Up!</h1> </body> </html>
O código anterior é uma página de agradecimento com um gatilho GTM que envia ao servidor o endereço de e-mail fornecido pelo usuário no formulário de inscrição.
Supondo que na inscrição, o servidor crie um usuário com um CUID exclusivo.
O envio do email para o servidor tem como objetivo receber um CUID exclusivo.
O servidor responde com um CUID exclusivo que é enviado usando o método setCustomerUserId().
Continue este procedimento para criar o gatilho e a aba. - Adicione uma nova tag para atribuir assinaturas após o carregamento da página de agradecimento.
- Dê um nome distinto à tag e selecione a opção de tipo de tag HTML personalizado.
<script> var userEmail = localStorage.getItem('user_email'); fetch('users/' + userEmail).then(function (res) { res.text().then(function (id) { console.log(id); AF('pba', 'setCustomerUserId', id); }); }); </script>
- Expanda o controle Configurações avançadas e, em seguida, o controle Sequenciamento de tags abaixo da área de texto e certifique-se de que ele esteja configurado para disparar a conversão após a execução da tag
- Defina um gatilho para a tag de conversão para indicar quando a tag de conversão deve ser acionada (no exemplo abaixo, é acionada no carregamento da página "Obrigado")
A função setCustomerUserId pode ser enviada em qualquer fase do fluxo do utilizador, por exemplo, após o início de sessão e a inscrição do usuário. A AppsFlyer usa o CUID mais recente enviado para atualizar o usuário atualmente observado para pontos de contacto e eventos passados ou futuros.
Use o mesmo valor de CUID que você usa na função setCustomerUserd no app mobile (consulte setCustomerUserId móvel para: iOS, Android, Unity)
Informações adicionais
Cookies Web SDK
Os cookies listados na tabela que a seguir são definidos ou usados pelo Web SDK no seu site.
Na tabela são utilizadas as seguintes abreviaturas:
- AMP: Páginas AMP (accelerated mobile pages)
- CDN: Rede de distribuição de conteúdo
- 3PC: Cookies de terceiros
Nome do cookie | Domínio | Lifespan | Quando usado | Informações |
---|---|---|---|---|
afUserid | Domínio do seu site | 395 dias | não AMP | Identifique um usuário no contexto de eventos de carregamento e navegação da web |
AF_SYNC | Domínio do seu site | 1 semana | não AMP |
|
af_id | appsflyer.com | 395 dias | não AMP quando 3PC permitido | Identifique um usuário no contexto de eventos de inicialização de aplicativo e navegação |
af_id | onelink.me | 395 dias | não AMP quando 3PC permitido | Vincule compromissos de banner, compromissos de onelink ou ambos a eventos de lançamento de aplicativos. |
amp-afUserid | AMP CDN ou domínio do seu site | 1 ano | Para serviço de páginas por AMP |
Notas de versão do Web SDK
Data | Versão | Observações |
---|---|---|
2021-07-01 | 1.0 | Descartar parâmetros de consulta |
2021-06-01 | 1.0 | Implementar uma política de Política de Segurança de Conteúdo (CSP) |
2020-08-31 | 1.0 | Adicionada funcionalidade de optar por participar e optar por não participar |
2020-04-16 | 1.0 | A função customerUserId() substitui o evento IDENTIFY para enviar o CUID exclusivo |
30/07/2020 | 1.0 |
|
Descontinuações
- Um aviso de descontinuação informa sobre a nossa intenção de parar a compatibilidade com um recurso ou método. A caraterística ou método continua a funcionar até à sua data de expiração.
- Encare os avisos de descontinuação como uma oportunidade para fazer alterações no seu código.
Data da descontinuação |
Data da descontinuação (EN: Sunset date) | Informações |
---|---|---|
2020-04-16 | A ser anunciado |
Método obsoleto: Envio do ID de usuário do cliente (CUID) no parâmetro do evento customUserId com o eventType definido como "IDENTIFY" Método atual: Envie o CUID usando a função setCustomerUserId() . |