O que você vai aprender
Saiba como adicionar um formulário de incorporação do Klaviyo ao seu site BigCommerce, o que requer a criação do formulário no Klaviyo e, em seguida, a colagem do código de incorporação nos arquivos do seu site onde você deseja que ele apareça (por exemplo, no rodapé).
Este guia mostra como substituir o formulário de registro padrão BigCommerce por um formulário incorporado Klaviyo.
Antes de começarAntes de começar
Antes de criar um formulário incorporado em Klaviyo, o senhor deve primeiro integrar-se a BigCommerce e, em seguida, habilitar a funcionalidade de formulário de registro (também chamada de "rastreamento no local"). Se o senhor marcou a configuração Automatically add Klaviyo onsite JavaScript when integrating with BigCommerce, está tudo pronto.
Se não:
- Em Klaviyo, selecione a guia integrações.
- Clique em BigCommerce.
- Marque a configuração Automatically add Klaviyo onsite javascript.
- Clique em Salvar.
O exemplo deste artigo usa o tema Cornerstone padrão do BigCommerce. Lembre-se de que seu tema pode ser diferente, assim como os nomes de alguns arquivos ou locais de snippet de código.
Adicionar o código de incorporação do formulário em seu siteAdicionar o código de incorporação do formulário em seu site
Primeiro, crie e publique um formulário incorporado no Klaviyo. Esta seção abordará as próximas etapas para colar o código de incorporação do formulário no site do BigCommerce para que ele seja exibido e sincronize os dados corretamente.
- Se ainda não o fez, copie o código de incorporação para seu formulário de incorporação. O senhor pode acessar o código incorporado do formulário abrindo o formulário no editor e clicando na seção Targeting & behavior.
- Navegue até o seu site e localize o formulário de registro padrão BigCommerce. Se o senhor estiver usando um tema Cornerstone, ele estará no rodapé do site.
- Se o senhor não vir um formulário padrão em seu site:
- Abra o painel de controle do BigCommerce.
- Navegue até Marketing > Email Marketing
- Marque a caixa de seleção Allow newsletter subscriptions (Permitir assinaturas de boletins informativos). Isso permite que o senhor colete o consentimento de e-mail dos visitantes do seu site e também adiciona uma caixa padrão do E-mail Cadastre-se no site BigCommerce. Se essa caixa já estiver marcada e o senhor ainda não vir um formulário padrão, talvez seu tema não inclua um.
- Se o senhor não vir um formulário padrão em seu site:
- Abra o painel de controle do BigCommerce e navegue até Storefront > Themes.
- Na seção Current Theme (Tema atual ), clique no menu suspenso Advanced (Avançado ) e escolha Edit Theme Files (Editar arquivos de tema).
- Se estiver usando um tema padrão, o senhor não poderá selecionar essa opção. Em vez disso:
- Clique em Make a Copy (Fazer uma cópia), dê um nome a ela e selecione Save a Copy (Salvar uma cópia).
- Depois de adicionado à seção Themes (Temas ), selecione os três pontos e, em seguida, escolha Edit Theme Files (Editar arquivos de tema). Observe que todas as edições que fizer serão aplicadas somente ao tema que estiver editando, e o senhor precisará aplicar o tema ao seu site para ver as alterações refletidas.
- Se estiver usando um tema padrão, o senhor não poderá selecionar essa opção. Em vez disso:
- Na barra lateral esquerda, abra o arquivo correspondente ao local onde o formulário padrão apareceu em seu site. Se o formulário padrão estiver localizado no rodapé, como no exemplo, navegue até o modelo > components > common e clique no arquivo footer.html.
- Use o atalho de localização (Command+F no Mac ou Control+F no Windows) para pesquisar a palavra "newsletter" no arquivo de rodapé.
- No código abaixo dele, encontre a referência ao formulário. No exemplo, o formulário é referenciado em um caminho de arquivo diferente: {{> components/common/subscription-form}}.
- Na barra lateral esquerda, siga o caminho do arquivo referenciado no código (neste exemplo, selecione componentes > common > subscription-form). O senhor verá os componentes reais do formulário padrão a partir daqui.
- Como o cabeçalho e o idioma do formulário padrão correspondem ao restante dos estilos do nosso site, substituiremos apenas a entrada real do formulário. No código-fonte, o senhor pode ver que a entrada do formulário padrão está contida no elemento <form>.
- Destaque tudo o que estiver entre a tag de abertura e de fechamento <form> e, em seguida, cole o código incorporado que o senhor copiou de Klaviyo para substituir o texto destacado.
- Clique em Salvar e aplicar arquivo para aplicar essas alterações ao seu site.
- Se o botão disser apenas Save file (Salvar arquivo), então o arquivo que o senhor acabou de editar ainda não é o tema atual. O senhor precisará clicar em Save file (Salvar arquivo), depois rolar para cima e selecionar Edit Theme Files (Editar arquivos de tema) > Save > Use as Active Theme (Usar como tema ativo ) no canto superior direito para aplicar o tema ao seu site.
Depois de colar o código de incorporação, salvar e aplicar as alterações em BigCommerce, navegue até seu site e atualize a página. O formulário incorporado Klaviyo será exibido em seu site e começará a adicionar novos assinantes à lista Klaviyo vinculada ao formulário.
Se o formulário não for exibido, consulte Solução de problemas de formulários incorporados.
Próximas etapasPróximas etapas
Em seguida, crie uma série de boas-vindas fluxo para causar um impacto imediato em seu novo assinante.
Recursos adicionais