Se o seu eCommerce está desenvolvido em VTEX IO, você poderá sincronizá-lo com sua conta Connectif em poucos minutos e começar a coletar dados de interação dos seus contatos no site.
Neste artigo você aprenderá como integrar sua loja VTEX IO com Connectif.
Dificuldade: Baixa.
Quando utilizá-lo?: Ao abrir sua conta no Connectif.
PASSO 1. Download do aplicativo
1. Acesse o seguinte link: Connectif na VTEX App Store.
2. Clique no botão Obter App no canto superior direito.
3. Faça login no VTEX IO.
4. Confirme o pedido seguindo as instruções da VTEX.
5. Clique em Finalizar compra.
PASSO 2. Instalação do módulo
6. Pressione o botão Ir para a página de instalação.
7. Na tela seguinte, revise as permissões necessárias do módulo Connectif e clique em Instalar.
PASSO 3. Ativação do App da VTEX
a. Requisitos prévios
(Nesta seção serão explicados os passos para criar uma Chave de aplicação, necessária para realizar a ativação do VTEX App do Connectif.)
8. Na sua conta VTEX, vá para "Configuração da conta > Configuração da conta > Papéis de usuário" e clique em Novo Papel.
9. Atribua as seguintes permissões ao papel:
Product Catalog > Conteúdo, Admin, Marketing, Configuração, Comercial, Diversos, Relatórios, Marketplace, Coleção.
Product License Manager > Controle de Acesso a Serviços > Obter conta por identificador.
Product Checkout > Recursos de Checkout.
Product OMS > Acesso OMS > Alterar status do fluxo de pedido, Notificar pagamento, Notificar fatura, Visualizar pedido, Notificar reembolso, Assinatura de feed de pedidos, Visualizar estatísticas de vendas da loja, Listar Pedidos.
Product Master Data > Recursos genéricos, Aplicação, Comentário, Pesquisa personalizada, Formulário, Importação.
Product Dynamic Storage > Recursos genéricos de armazenamento dinâmico > Documentos somente leitura, Administrador de dados mestre, Acesso total a todos os documentos.
Product Dynamic Storage > Entidade de dados > Listar entidade de dados, Criar entidade de dados, Editar esquema, Visualizar detalhes da entidade de dados, Publicar índice.
Product Logistics > Acesso total à logística, Visualizador de logística, Acesso total ao inventário logístico, Inventário logístico somente leitura.
10. Acesse "Configuração da conta > Configuração da conta > Chaves de aplicação" e clique em Adicionar.
11. No painel de criação da nova Chave de aplicação, clique em Adicionar papéis.
12. Atribua o novo papel configurado para Connectif.
13. Clique em Salvar.
b. Ativação do aplicativo
(Nesta seção serão indicados os dados identificativos da conta para ativar no VTEX IO o aplicativo Connectif.)
14. Acesse sua conta Connectif e, nas configurações da Loja, em "Integrações > Plataformas de e-commerce", clique em Editar sobre VTEX.
15. Copie o ID do Cliente e a Chave Secreta.
16. Vá para sua conta VTEX IO e acesse "Apps instaladas > Connectif > Configuração".
17. Preencha os campos com as seguintes informações:
- Client ID: insira o valor do Identificador de cliente da sua conta Connectif, disponível em "Configurações da Loja > Plataformas e-commerce > VTEX".
- Private key: insira o valor da Chave secreta da sua conta Connectif, disponível em "Configurações da loja > Plataformas e-commerce > VTEX".
- VTEX Key e VTEX Token: insira os valores correspondentes obtidos em Application Keys para o papel Connectif.
18. Opcionalmente:
- Selecione os Canais de venda com os quais deseja que o Connectif sincronize as compras. Por padrão, todas as compras serão registradas.
- Ajuste o Tamanho da imagem que será usado ao importar os produtos para o Connectif. O padrão é 300x300.
19. Ative o tracking e salve as alterações.
c. Verificação da integração
(Nesta seção será revisada a configuração da URL da loja no Connectif.)
20. Vá para sua conta Connectif.
21. Nas configurações da Loja, vá para "Integrações > Plataformas e-commerce" e, em VTEX IO, clique em Editar.
22. Verifique se o Domínio da Loja corresponde a um domínio público e acessível do seu site.
23. Nas configurações da Loja, vá para "Canais > Notificações Web Push".
24. Modifique a URL do ServiceWorker para que corresponda a um domínio público e acessível da sua loja.
PASSO 4. Configuração do Connectif na página de Checkout
(Nesta seção é descrito como configurar o acompanhamento web no VTEX IO.)
VTEX IO possui uma seção de Checkout separada do restante da loja VTEX. Para que o Connectif possa realizar o acompanhamento web e mostrar conteúdos durante o processo de confirmação do pedido, é necessário adicionar manualmente um trecho do script do Connectif no Checkout.
25. Acesse a configuração da sua loja VTEX, em "Apps instaladas Connectif", e copie o trecho de código do Código personalizado do Checkout.
A configuração do código depende do tipo de Checkout que sua loja utiliza. Siga apenas os passos de Checkout ou Checkout UI Custom, conforme corresponda à sua configuração.
a. Configuração com Checkout
(Nesta seção você configurará o script do Connectif se sua loja utiliza Checkout).
26. Acesse "Configuração da loja > Checkout" e clique em (Editar).
27. Vá para a aba Código e modifique o arquivo checkout6-custom.js, adicionando o código copiado:
b. Configuração com Checkout UI Custom
(Nesta seção você configurará o script do Connectif se sua loja utiliza Checkout UI Custom).
28. Acesse “Configuração da loja > Checkout UI Custom > JavaScript”.
29. Adicione o trecho de código do Connectif que você copiou anteriormente.
30. Clique em PUBLISH para publicar as alterações.
Sucesso!
A integração do Connectif com VTEX IO já está pronta.
Você pode verificar se fez a integração corretamente do Connectif com VTEX IO neste artigo.
Perguntas frequentes
1. Que informações o Connectif coleta através desta integração
a. Informações coletadas dos Contatos
Nas integrações com VTEX IO, através de eventos JavaScript do Connectif, é transferida, por padrão, certa informação sobre os Contatos:
- _name
- _surname
Além disso, através da sincronização massiva diária, são atualizados estes campos:
- _birthdate
- _name
- _surname
- _mobilePhone
- _newsletterSubscriptionStatus
b. Informações coletadas dos Produtos
Nas integrações com VTEX IO, através de eventos JavaScript do Connectif e da sincronização diária do catálogo, são coletadas por padrão certas informações sobre os Produtos:
- productDetailUrl
- name
- brand
- productId
- imageUrl
- unitPrice
- unitPriceOriginal
- availability
- categories
- unitPriceWithoutVAT (somente com a sincronização diária massiva)
- publishedAt (somente com a sincronização diária massiva)
- inStockUnits (somente com a sincronização diária massiva)
c. Informações coletadas das Compras
Nas integrações com VTEX IO, através de eventos JavaScript do Connectif e da sincronização via API, são coletadas por padrão certas informações sobre as Compras:
- cartId
- purchaseDate
- purchaseId
- totalPrice
- totalQuantity
2. Como recuperar carrinhos abandonados com a URL de Recuperação de Carrinho
(Nesta seção é explicado como funciona a URL de Recuperação de Carrinho para obter os itens associados a um carrinho específico).
Através da integração com VTEX IO, é enviada ao Connectif uma URL de Recuperação de Carrinho, ou seja, um link para recuperar os artigos relacionados a esse carrinho e que pode ser utilizado em workflows e conteúdos.
Para obter a URL de recuperação de carrinho via workflow, deve ser feito por meio do nó "Obter último carrinho" e "Ao abandonar carrinho", posteriormente, mapeando nas variáveis do conteúdo a ser exibido ou enviado.
- Aprenda como funciona essa URL nos diferentes CMS e como utilizá-la neste artigo.
Continue aprendendo!
Para aproveitar todo o potencial da sua conta Connectif, recomendamos continuar com os seguintes artigos:
Onboarding, para adquirir habilidade com nossa interface.
Workflows iniciais, para implementar suas primeiras estratégias na conta.
Integrações com sistemas externos, para integrar-se com Facebook, formulários e webhooks do seu site.
Eventos que consomem Atividades, para compreender melhor o consumo da sua conta.