Connectif permite adicionar facilmente conteúdos web personalizados no seu eCommerce sem a necessidade de modificar seu código nem alterar sua estrutura.
Neste artigo, você aprenderá como inserir conteúdo do Connectif embutido no seu site.
Tempo de implementação: 15 minutos.
Dificuldade: Média
Quando utilizá-lo?: Quando você quiser incluir conteúdo (estático ou dinâmico) no seu site sem modificar o código.
PASSO 1. Localização do seletor adequado no código
(Nesta seção, identifica-se a etiqueta adequada do site onde o Connectif exibirá o conteúdo).
Você pode pular esta primeira etapa e começar no PASSO 2 se:
— Já conhece o seletor e o identificador único a ser utilizado.
— Deseja criar um seletor específico para seu conteúdo web que evite que alterações ou atualizações no código do seu eCommerce alterem ou impeçam que os conteúdos inseridos sejam exibidos. Nesse caso, recomendamos que você use um bloco "div" com um identificador (id) único que o distinga. Lembre-se de adicioná-lo no código do seu eCommerce antes de continuar.
1.1 Localizar o seletor
Um seletor identifica um elemento HTML, localizado em qualquer lugar da página da web, por meio de seu ID, classe ou atributo. Este seletor será a referência para indicar ao Connectif onde você deseja exibir o conteúdo.
1. Acesse a página do seu site onde deseja adicionar o conteúdo embutido.
2. Visualize o bloco que deseja usar como referência.
Em nosso exemplo, o objetivo é enviar o conteúdo para que apareça logo acima do bloco "CUSTOM TEXT BLOCK".
3. Abra o console de ferramentas de desenvolvimento (DevTools) do navegador.
Todos os navegadores possuem no menu um link para abri-lo. Aqui estão as instruções para abrir no Google Chrome (navegador utilizado no nosso exemplo), Mozilla Firefox, Microsoft Edge e Safari.
Como alternativa, se você estiver no Chrome, Firefox ou Edge, pode utilizar a tecla de atalho F12.
4. Selecione a aba Elements no console para visualizar a estrutura HTML.
5. Clique no ícone Inspecionar, o primeiro à esquerda no menu superior.
6. Coloque o cursor do mouse sobre a área do conteúdo que planeja usar como referência. Clique quando a seleção estiver correta para que a tag fique destacada no console.
No nosso exemplo, a tag que fica destacada, "<div id=”customer-text”>", se distingue pelo atributo global "id" que tem como valor "custom-text". Este bloco div contém toda a área selecionada.
1.2 Confirmar que o seletor é único.
(Nesta seção, verifica-se que o parâmetro para identificar a tag não se repete em nenhuma outra tag).
7. Clique no conteúdo da aba Elements do console e use o atalho de teclado Control + F para procurar o nome da tag ou atributo.
No nosso exemplo, o identificador "custom-text" tem apenas uma correspondência, portanto, é adequado para usá-lo como seletor.
O seletor deve ser único para evitar que o conteúdo apareça várias vezes em diferentes posições. Se a pesquisa mostrar mais de uma correspondência, será necessário encontrar um seletor adequado diferente.
Os atributos têm múltiplas opções de uso e são comuns a muitos conteúdos da web. Se você quiser aprender mais sobre eles para se aprofundar no uso em conteúdos web do tipo inline, clique aqui.
8. Copie o nome do seu seletor único para a área de transferência ou para um bloco de notas.
9. Feche o console de desenvolvimento.
PASSO 2. Exibir o conteúdo embutido no site
2.1 Criar um workflow para exibir o conteúdo
10. Acesse “Workflows” e clique em Criar novo workflow.
11. Desenvolva sua estratégia estabelecendo as condições para exibir o conteúdo embutido aos contatos.
Um workflow com o objetivo de inserir conteúdo embutido no site deve conter, pelo menos, um nó "Enviar conteúdo web".
No nosso exemplo, foi criada uma estratégia simples que mostra um conteúdo para todos os contatos que visitarem a home.
Lembre-se de que você pode utilizar nossos templates que enviam conteúdo embutido.
12. Configure os demais nós do workflow, exceto o nó "Enviar conteúdo web" (as instruções para configurá-lo estão no próximo passo).
No nosso exemplo, a audiência foi configurada no nó "Início" para todos os contatos existentes e novos. O nó gatilho "Ao visitar página" foi configurado para ser ativado exclusivamente na home.
Se você deseja aprender mais sobre esses dois nós, consulte os artigos Nó "Início" e Nós de tipo gatilho.
2.2 Configurar o nó "Enviar conteúdo web"
13. No nó “Enviar conteúdo web”, clique em (Editar configuração do nó).
Se você quiser saber mais sobre o nó "Enviar conteúdo web", clique aqui.
14. Na primeira etapa da configuração, selecione ou crie um novo conteúdo inline.
Entre os diferentes conteúdos web, o tipo inline é o único que é incorporado na estrutura do site, enquanto os demais são exibidos sobre ela.
Para aprender mais sobre o conteúdo web do tipo inline, clique aqui.
15. Clique em Próximo .
16. Cole na seção Seletor o nome obtido no passo 8 e marque seu tipo nos botões à esquerda.
No nosso exemplo, deixamos selecionado o atributo global Id que vem por padrão e colamos o valor "custom-text" obtido no passo 8.
17. Escolha a posição em relação ao elemento selecionado na qual o conteúdo será inserido.
Você pode escolher inserir seu design imediatamente antes ou depois do bloco apontado pelo seletor, ou até mesmo dentro dele.
Se você indicar para mostrar Substituindo o interior, o conteúdo gerado pelo Connectif substituirá o conteúdo original, que não será exibido.
18. Clique em Próximo .
19. Associe as variáveis, se necessário.
Se não houver nenhuma variável definida no seu conteúdo, como no nosso exemplo, não é necessário configurar nada nesta etapa.
Caso seu conteúdo contenha variáveis personalizadas, será preciso associá-las neste passo com as informações provenientes de outros nós.
Se você deseja aprender mais sobre as variáveis, clique aqui.
20. Clique em Finalizar .
21. No workflow, clique em Salvar para salvar as alterações e em Iniciar para ativá-lo.
22. Verifique no seu site se o conteúdo está sendo exibido como esperado.
Sucesso!
Seu conteúdo do Connectif está embutido no seu site.
USOS ALTERNATIVOS
Utilize o conteúdo embutido de forma inteligente para melhorar ainda mais seus resultados.
1. Inserir conteúdo embutido invisível para o visitante
(Nesta seção, explicamos como incluir código HTML no seu site a partir do Connectif sem nenhum elemento visual).
Os conteúdos inline invisíveis são muito úteis para executar ações que não requerem a exibição de um conteúdo. Um exemplo muito utilizado é o de pedir uma inscrição para notificações push sem exibir nenhum conteúdo web.
1. Acesse “Conteúdo > Conteúdos Web” e clique em Criar novo conteúdo web.
2. Selecione como tipo de conteúdo web Inline.
3. Dê um nome ao seu conteúdo.
3. Clique em Criar conteúdo web.
4. Adicione um componente avançado do tipo HTML.
5. Escreva o conteúdo do código HTML.
6. Clique em Salvar.
7. Crie um workflow, seguindo os passos deste guia a partir do PASSO 2, para usar seu conteúdo embutido invisível para o visitante.
Continue aprendendo!
Para aproveitar todo o potencial da sua conta no Connectif, recomendamos continuar com os seguintes artigos:
- Integração personalizada para enviar dados, para enviar dados do Connectif para sistemas ou aplicativos externos.
- Detectar e reagir a links web criados fora do Connectif, para detectar e reagir aos cliques em qualquer link do seu site.
-
Integração com Facebook e Instagram, para conectar sua conta do Facebook Ads com o Connectif e começar a gerenciar suas audiências.
-
Formulários integrados, para integrar ao Connectif formulários já existentes no seu site.