How can we help?

Pesquisa

Implementação do código do site Smart Banners para profissionais de marketing

  • Atualizado

Visão geral: Adicione o SDK dos Smart Banners ao seu site para converter os visitantes do seu site em usuários de aplicativos móveis.

 Observação

O web SDK v1 do Smart Banner da AppsFlyer foi desativado em 8 de novembro de 2023. Para exibir Smart Banners em seu site, você precisa atualizar para a v2. Saiba mais

Implementação do código do site

Este artigo destina-se aos profissionais de marketing que pretendem implementar o código Smart Banners no seu sítio através de um dos seguintes métodos

  • Google Tag Manager (GTM)
  • Adobe Launch Tag Manager
  • Shopify
  • Wix
  • Squarespace
  • WordPress

Para adicionar o código ao seu site por meio de outras plataformas ou fazer alterações no código de acordo com as suas necessidades (incluindo a adição de parâmetros, deep linking, ocultação do banner ou integração do PBA com os Smart Banners), consulte Implementação de código de site aos Smart Banners - para desenvolvedores.

Para implementar o código dos Smart Banners no seu site:

  1. Siga as instruções do site para obter o código dos Smart Banners.
  2. Use as instruções específicas da plataforma que se seguem para implementar o código no seu site:

Google Tag Manager

Para implementar o código através do Google Tag Manager:

  1. No GTM, crie uma nova tag.
  2. Nomeie a tag, clique em Configuração de tags e selecione HTML personalizado.
  3. Na caixa HTML, cole o snippet de código do Smart Banner. Substitua YOUR-BANNER-KEY no trecho de código pela sua chave de banner real.
  4. Clique em Gatilho e crie um novo gatilho clicando no ícone de + no canto superior direito da tela.
  5. Nomeie o gatilho, em seguida, clique em Configuração de gatilho, e escolha a Visualização da página .
  6. Se quiser que o banner apareça em todas as páginas, selecione Visualizar em todas as páginas. Se quiser que o banner apareça nas páginas selecionadas, escolha Visualizar em algumas páginas e defina a condição para disparar a tag. Para saber mais sobre gatilhos, leia a documentação do GTM.
  7. Clique em Salvar no canto superior direito.
  8. Retorne à tela de configuração da tag. Verifique se tudo está corretamente configurado e clique em Salvar no canto superior direito.
  9. Publique seu contêiner GTM. 

Adobe Launch Tag Manager

Para implementar o código através do Adobe Launch Tag Manager:

Passo 1: Crie uma propriedade na Adobe Experience Cloud

Crie uma propriedade (tag) que hospede o Smart Banner SDK:

  1. Acesse o Adobe Experience Cloud> Inicialização.
  2. Em Adobe Experience Cloud Launch, clique em Ir para Inicialização.
  3. Clique em Nova propriedade.
  4. Nomeie sua propriedade.
  5. Em Plataforma, selecione Web.
  6. Insira o domínio do seu site.
  7. Clique em Salvar.

Passo 2: Adicionar o código Smart Banners à propriedade do Adobe Launch

Para adicionar o código dos Smart Banners à tag:

  1. Na página Minha propriedade da web, selecione a aba Regras.
  2. Nomeie a regra. Recomendado: AppsFlyer Smart Banners.
  3. Na seção IF, em Eventos, clique em +Adicionar.
    • Em Tipo de evento, selecione Core - DOM Ready.
    • Clique em Manter alterações.
  4. 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 dos Smart Banners sem as tags de <script>.
    • Clique em Manter alterações para fechar o editor de código.
  5. Clique em Salvar.

Passo 3: Adicione a tag Adobe Launch ao seu site.

Para adicionar a tag Adobe Launch ao seu site (que carrega o código dos Smart Banners):

  1. Na página de Propriedade da minha web, selecione a aba Ambientes .
  2. Encontre a linha com o ambiente no qual você deseja publicar (desenvolvimento ou produção).
    • No cabeçalho 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.
  3. 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.
  4. Cole o trecho de código na tag <head> do seu site.

Etapa 4: Publique o ambiente do Adobe Launch

Publique o ambiente para ativar a tag Adobe Launch:

  1. Na página Propriedade da minha web, acesse a aba Publicação .
  2. Na seção  Desenvolvimento, clique em Adicionar nova biblioteca.
    1. Nomeie a biblioteca e escolha um ambiente. 
    2. Em Alterações de recurso, clique em Adicionar um recurso.
    3. Clique em Regras > Carregar Smart Banners > Mais Recentes > Selecionar e Criar uma Nova Revisão.
    4. Clique em Salvar.
  3. Na seção Desenvolvimento:
    1. Ao lado da biblioteca recém-criada, clique no menu Ação (3 pontos) e selecione Construir para Desenvolvimento.
    2. Clique no menu de ação novamente e selecione Enviar para aprovação.
  4. Na seção Submetido:
    1. Clique no menu de ação e selecione Construir para Preparação.
    2. Clique novamente no menu de ação e selecione Aprovar para publicação.
  5. Na seção Aprovado, clique no menu de ação e selecione Criar e Publicar para Produção.
    O processo está concluído.

Agora, quando seu site for carregado em dispositivos mobile, o criativo ativo do banner será exibido. Para exibir somente o banner em determinadas páginas ou de acordo com as ações do usuário, consulte as Regras do Adobe Launch.

Shopify

Para implementar o código no seu site do Shopify:

  1. No seu painel de controle do Shopify, acesse Canais de vendas > Loja online > Temas.
    O tema atual aparece.
  2. Clique em Ações > Editar código.
    A página Editar código abre para o seu tema.
  3. Na pasta Layout, clique no arquivo que começa com o tema {/}.
    O código da página aparece.
  4. No código, diretamente sob <head>, cole o seu código de Smart Banners. 

Wix

Para implementar o código no seu site Wix:

  1. No seu painel de controle Wix, clique em Configurações.
  2. Na seção Avançado da página Configurações, clique em Código personalizado.
  3. Clique em + Adicionar código personalizado.
  4. Na caixa Cole o trecho de código aqui, cole o código dos Smart Banners.
  5. Na caixa Nome, insira um nome para o seu código. Recomendado: AppsFlyer Smart Banners.
  6. Em Adicionar código às páginas, selecione o local onde pretende exibir seus banners. Ou:
    • Todas as páginas
    • Selecionar páginas específicas
  7. Clique em Aplicar.
    A página Código personalizado deve agora mostrar o seu código. Certifique-se de que ele está na seção Cabeçalho.

Squarespace

Para implementar o código no seu site Squarespace:

  1. No painel de controle do Squarespace, clique em Site.
  2. Clique em Configurações. 
  3. Clique em Avançado.
  4. Clique em Injeção de código.
  5. Na seção Cabeçalho, cole o código dos Smart Banners.
  6. Clique em Salvar.

WordPress

Para implementar o código no seu site WordPress:

  1. No seu painel de controle do WordPress, clique em Aparência > Editor de temas.
    A página Editar temas abre e o código CSS do seu site é exibido.
  2. Em Arquivos de tema, clique em Cabeçalho do tema (header.php).
  3. No código que é exibido, em <head>, cole o código dos Smart Banners.
  4. Clique em Atualizar arquivo.

Veja também

Relacionado com

This article was translated using AI and may contain errors. For the most accurate information, please refer to the English version using the language selector.

Share article: