1. Centro de Ajuda
  2. Integre sua Loja
  3. Integrar por módulo ou aplicativo
  4. VTEX IO

Guia para integrar com VTEX IO

Criado
Atualizado
Seguir

Se sua loja virtual está desenvolvida em VTEX IO, você poderá sincronizá-la com sua conta Connectif em poucos minutos e começar a coletar dados de interação dos seus contatos na página web.

Neste artigo, você aprenderá como integrar sua loja VTEX IO com a Connectif. 

 
Tempo de implementação: 20 min.
Dificuldade: Baixa.
Quando usar: Ao abrir sua conta na Connectif.

 

PASSO 1. Download do aplicativo

  1. Acesse o seguinte link: Connectif na VTEX App Store.
  2. Clique no botão Obter App na parte superior direita.

VTEX_IO_Integracao_-_2-min.png

  1. Faça login na VTEX IO.

VTEX_IO_Integracao_-_3.png

  1. Confirme o pedido seguindo as instruções da VTEX.
  2. Clique em Finalizar compra.

VTEX_IO_Integracao_-_4.png

 

PASSO 2. Instalação do módulo

  1. Clique no botão Ir para a página de instalação.

VTEX_IO_Integracao_-_5.png

  1. Na próxima tela, revise as permissões necessárias do módulo Connectif e clique em Instalar.

VTEX_IO_Integracao_-_6.png

 

PASSO 3. Ativação do App VTEX

a. Requisitos prévios

(Nesta seção serão explicados os PASSOs para criar uma Chave de aplicativo, necessária para realizar a ativação do VTEX App Connectif.)

  1. Em sua conta VTEX, vá para "Configurações da conta > Configurações da conta > Funções do usuário" e clique em Nova função.

VTEX_IO_Integracion_-_17.png

  1. Atribua as seguintes permissões à função: 
    • Product Catalog > Content, Admin, Marketing, Configuration, Commercial, Miscellaneous, Reports, Marketplace, Collection.
    • Product License Manager > Services Access Control > Get account by identifier.
    • Product Checkout > CheckoutResources.
    • Product OMS > OMS Acccess > Change order workflow status , Notify payment, Notify invoice, View order, Notify refund, Order feed subscription, View store sales stats, List Orders.
    • Product Master Data > Generic resources, Application, Comment, Customized Search, Form, Import.
    • Product Dynamic Storage > Dynamic storage generic resources > Read only documents, Master Data administrator, Full access to all documents.
    • Product Dynamic Storage > Data entity > List data entity, Create data entity, Edit schema, View data entity details, Publish index.

VTEX_IO_Integracion_-_16.png

  1. Acesse "Configurações da conta > Configurações da conta > Chaves de aplicativo" e clique em  Adicionar.

VTEX_IO_Integracion_-_18.png

  1. No painel de criação da nova Chave de aplicativo, clique em  Adicionar funções.

VTEX_IO_Integracion_-_19.png

  1. Atribua o novo papel configurado para Connectif.

VTEX_IO_Integracion_-_20.png

  1. Clique em Salvar.

VTEX_IO_Integracion_-_21.png

 

b. Ativação do aplicativo 

(Nesta seção serão indicados os dados identificadores da conta para ativar o aplicativo Connectif no VTEX IO.)

  1. Acesse sua conta Connectif e, nas configurações da Loja, em "Integrações > Plataformas de e‑commerce", clique em  Editar  sobre VTEX.

Integração com VTEX IO - 0-min.png

  1. Copie o ID do Cliente e a Chave Secreta.

Integração com VTEX IO - 1-min.png

  1. Vá para sua conta no VTEX IO e acesse "Apps instalados > Connectif > Configuração".
  2. Preencha os campos com as seguintes informações:
  • Client ID: adicione o valor de Identificador de Cliente da sua conta Connectif, disponível em "Configurações da Loja > Plataformas de e‑commerce > VTEX".
  • Private Key: adicione o valor da Chave Secreta da sua conta Connectif, disponível em "Configurações da Loja > Plataformas de e‑commerce > VTEX".
  • VTEX Key e VTEX Token: adicione os valores correspondentes obtidos em Application Keys para o papel de Connectif.

Integração com VTEX - Tamanho da Imagem - 1-min.png

  1. Opcionalmente:
  • Selecione os Canais de Vendas 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 é 300×300.

Integração com VTEX - Tamanho da Imagem - 1-min.png

  1. Ative o rastreamento 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.) 

  1. Acesse sua conta no Connectif.
  2. Nas configurações da loja, vá para "Integrações > Plataformas de e-commerce" e, na VTEX IO, clique em  Editar.
  3. Verifique se o Domínio da Loja corresponde a um domínio público e acessível do seu site.

Integración con VTEX IO - 5-min.png

  1. Nas configurações da loja, vá para "Canais > Notificações Web Push".
  2. Modifique a URL do ServiceWorker para corresponder a um domínio público e acessível da sua loja.

Integración con VTEX IO - 2-min.png

 

PASSO 4. Configuração do Connectif na página de Checkout

(Nesta seção, descreve-se como configurar o rastreamento da web na VTEX IO.)

 

VTEX IO possui uma seção de Checkout separada do restante da loja VTEX. Para que o Connectif possa fazer o rastreamento da web e exibir conteúdos durante o processo de confirmação do pedido, é necessário adicionar manualmente um trecho de código do backoffice à seção de checkout.

  1. Acesse as configurações de sua loja VTEX, em "Apps instalados > Connectif", e copie o trecho de código de Checkout código personalizado.

VTEX_IO_Integracion_-_13.png

  1. Acesse "Configuração da loja > Checkout" e clique em  (Editar).

VTEX_IO_Integracion_-_14.png

  1. Vá para a aba Código e modifique o arquivo checkout6-custom.js, adicionando o código copiado:

VTEX_IO_Integracion_-_15.png

 

 

Sucesso!
A integração do Connectif com a VTEX IO está completa.

 

Perguntas frequentes

1. Quais informações o Connectif coleta por meio desta integração

a. Informações coletadas de Contatos

Nas integrações com VTEX IO, através dos eventos JavaScript do Connectif, são transferidas, por padrão, certas informações sobre os Contatos:

  • _name 
  • _surname 
  • email

Além disso, por meio da sincronização massiva diária, estes campos são atualizados:

  • email
  • _birthdate
  • _name
  • _surname
  • _mobilePhone
  • _newsletterSubscriptionStatus

b. Informações coletadas de Produtos

Nas integrações com VTEX IO, através dos 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 massiva diária)
  • publishedAt (somente com a sincronização massiva diária)
  • inStockUnits (somente com a sincronização massiva diária)

c. Informações coletadas de Compras

Nas integrações com VTEX IO, através dos eventos JavaScript do Connectif e da sincronização por 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

(Esta seção explica como funciona a URL de Recuperação de Carrinho para obter os itens associados a um carrinho específico).

Por meio da integração com VTEX IO, é enviada ao Connectif uma URL de Recuperação de Carrinho, ou seja, um link para recuperar os itens relacionados a esse carrinho e que pode ser usado em workflows e conteúdos.

Para obter a URL de recuperação de carrinho por meio de um workflow, deve-se utilizar o nó "Obter último carrinho" e "Ao abandonar carrinho", e em seguida, mapeá-la nas variáveis do conteúdo a ser exibido ou enviado.

  • Aprenda como essa URL funciona nos diferentes CMS e como utilizá-la neste artigo. 

 

 

Continue aprendendo!

Para aproveitar todo o potencial da sua conta no Connectif, recomendamos continuar com os seguintes artigos: