Como incorporar um formulário de auditoria em seu site

A ferramenta de auditoria incorporável do Ahrefs é uma ferramenta poderosa de geração de leads para agências digitais.

As agências que usam nosso plano White Label e Incorporação podem incorporar a ferramenta de auditoria de site ao site da agência. Isso permite que eles capturem leads e forneçam relatórios de SEO a clientes em potencial. Este guia explica como configurar e instalar a ferramenta de auditoria incorporável no site da sua agência.

Depois de instalar a ferramenta, seus visitantes podem criar relatórios gratuitos de auditoria de site em seu próprio site (ou mesmo em qualquer site). Esses relatórios podem ter etiqueta em branco com a marca, cores e fontes da sua agência. Você pode personalizar as seções do relatório e até mesmo permitir que um e-mail seja enviado automaticamente ao visitante com o relatório anexado.

Como funciona a ferramenta de auditoria incorporável

Para incorporar a ferramenta ao seu site, você precisa adicionar um pequeno trecho de código ao HTML do seu site. Por padrão, o formulário é mínimo e simples, mas você pode personalizar os campos do formulário e estilizá-lo para combinar com a aparência do seu site. Na verdade, o formulário incorporado foi projetado especificamente para ser simples e facilmente editável. Propositalmente, não compactamos ou ofuscamos o código incorporado como outras ferramentas de terceiros fazem, o que impede você de fazer alterações. Em vez disso, expomos todo o CSS em um bloco simples no início do código para que os objetos do formulário possam ser estilizados, desde que você tenha algum conhecimento básico de CSS.

Quando um usuário insere seus dados (por exemplo: URL do site e endereço de e-mail), você pode configurar o formulário para enviar os dados do lead por e-mail. Você também pode ativar um Webhook para enviar os dados do lead para o seu CRM via Zapier ou executar qualquer outra ação suportada no Zapier, como notificar um canal do Slack, adicionar os dados do lead a uma planilha do Google, etc.

Você também pode personalizar o que acontece quando o usuário insere seus dados. Por padrão, um relatório de auditoria em PDF com etiqueta branca é criado instantaneamente e exibido ao usuário. Eles podem visualizar diretamente no navegador ou baixar o PDF. Em vez disso, você pode remover a opção PDF e apenas exibir uma versão do relatório baseada na web no navegador ou pode removê-la totalmente para que você mesmo possa responder ao lead por e-mail com o relatório.

Configurando o relatório de etiqueta em branco

Se você decidir mostrar o relatório de auditoria ao usuário quando ele enviar o formulário (versão PDF ou relatório web), você precisará configurar o modelo de relatório. Primeiro, certifique-se de ter preenchido todos os detalhes necessários da agência na página Modelos de relatório. São 6 campos para preencher: logotipo, nome da agência, endereço, e-mail, telefone e site.

Ler:  O que são links quebrados? E como você os encontra e corrige?

Se você optar por exibir o relatório em PDF ou baseado na Web quando o usuário enviar o formulário, esses detalhes da agência serão exibidos no relatório quando o formulário for enviado.

Depois de adicionar esses detalhes, você também poderá fazer personalizações adicionais nas verificações e seções de auditoria (ativar ou desativar seções). Você também pode personalizar as cores e fontes usadas em todo o relatório de auditoria.

Clique no botão “Visualizar relatório em PDF” no canto inferior direito para ver uma prévia de como o usuário verá seu relatório:

Quando estiver satisfeito com o layout e a aparência do relatório, clique no botão “Salvar configurações” no canto inferior esquerdo da página.

Gerenciando vários modelos de relatório com etiqueta em branco

Usuários avançados podem querer configurar um modelo de relatório separado para a Auditoria Incorporável para que possam personalizar exatamente a aparência desses relatórios. Descobrimos que algumas agências preferem tornar estes relatórios mais curtos em vez de um relatório de auditoria completo utilizado para consultas ou reuniões com clientes. Se desejar fazer isso, você pode criar um modelo separado usado para a ferramenta Incorporar visitando a página Modelos de relatório e clicando no botão “Criar novo” na parte superior para definir um novo modelo de relatório. Chame-o de algo descritivo como “Relatório de ferramenta de auditoria incorporável”. Você também pode selecionar o idioma do relatório, o tipo de pontuação e se deseja mostrar ou ocultar as explicações detalhadas de cada verificação.

Você pode então ativar/desativar diferentes seções do relatório e verificações individuais para controlar exatamente a aparência do relatório de auditoria.

Escolha um tipo de relatório de incorporação

Em seguida, visite a página Configurações de incorporação para personalizar o comportamento do formulário quando o usuário o envia. A configuração “Incorporar comportamento do formulário” oferece 4 opções:

  • Exibir relatório na nova guia do navegador: isso abrirá o relatório em uma nova guia do navegador
  • Exibir relatório em uma caixa modal: isso abrirá o relatório em uma “caixa modal” na parte superior do conteúdo da página (opção padrão)
  • Sem relatório, apenas mostre a mensagem pop-up “Entraremos em contato”: o relatório não será mostrado ao usuário, porém uma mensagem de confirmação personalizável será exibida
  • Sem relatório, apenas redirecionar para outra página: o relatório não será mostrado ao usuário e ele será redirecionado para o URL desejado

Se você selecionar uma das opções “Exibir relatório”, poderá personalizar se o relatório será exibido ao usuário como um arquivo PDF nativo ou como um relatório da web:

  • Relatório PDF: A geração de PDF produzirá um relatório PDF com marca em uma nova guia. Eles verão uma tela de carregamento inicial e serão direcionados para o relatório após a conclusão. Eles podem visualizar isso no navegador ou optar por baixar o arquivo PDF para o dispositivo (opção padrão)
  • Relatório da Web: Os usuários serão direcionados para uma versão web do relatório que carrega nativamente no navegador
Ler:  Como ingressar na comunidade do Twitter: aumente o envolvimento

A próxima etapa é personalizar os campos do formulário. O campo “Inserir site” é obrigatório. Mas você pode ativar/desativar os outros campos do formulário. É altamente recomendável que você ative o e-mail e o nome para poder capturar informações básicas do lead. Você também pode definir um campo personalizado e fazer outras personalizações, como estilo de layout e cores:

Você pode visualizar a aparência do seu formulário clicando no botão “Visualizar formulário incorporado” no canto inferior direito. Quando estiver satisfeito com a aparência, clique no botão “Salvar configurações e gerar código incorporado” para gerar o código HTML:

Marcação em branco do domínio do relatório da Web

Se você escolher a opção “Relatório da Web” como método de entrega do relatório, poderá colocar uma etiqueta em branco no domínio visitando a página Configurações do domínio.

Por padrão, o relatório é veiculado em um domínio genérico denominado “websiteauditserver.com”. Você pode usar um subdomínio com o formato https://.websiteauditserver.com/ – esta é a opção mais simples para personalizar o domínio.

A alternativa mais avançada é clicar na guia “Domínio” e colocar uma etiqueta totalmente branca no domínio, por exemplo: https:///. Esta é a opção preferível porque o URL é totalmente rotulado em branco e aparece para o usuário como um serviço executado inteiramente em seu site. Leia nosso guia completo sobre como configurar domínios personalizados com etiqueta em branco.

Instalando o Código

A instalação do código do formulário incorporado real requer alguma codificação do site ou conhecimento de CMS de back-end. Muitas vezes é melhor fornecer o código ao desenvolvedor do seu site para instalar para você.

Se você tiver conhecimento intermediário de HTML, poderá modificar a própria estrutura do formulário. Você também pode adicionar suas próprias funções JavaScript (por exemplo: validação de formulário personalizado) ou pode chamar outras funções/sistemas onSubmit ou onClick dentro do formulário.

A única recomendação de personalização que temos é não fazer alterações no bloco de código JavaScript, pois isso pode causar erros. Relacionado a isso, sugerimos que você não mova muito os elementos do formulário em relação à sua ordem original, pois algumas referências JavaScript dependem do posicionamento relativo dos objetos no formulário. Fora isso, recomendamos e encorajamos você a personalizar o formulário para que corresponda à aparência do seu site. Deve parecer uma parte natural da experiência do seu site e não um widget anexado. Sugerimos isso porque vemos as agências alcançando níveis mais altos de geração de leads quando personalizam o formulário de forma adequada para combinar com o estilo de seu site. Para se inspirar, confira estes ótimos exemplos de implementações de clientes.

Depois de gerar o código de incorporação na guia Configurações de incorporação, você notará que há três seções diferentes. A primeira seção é CSS, seguida de HTML e finalmente JavaScript. Você deve personalizar as duas primeiras seções e deixar o JavaScript como está. Como é sugerido no comentário da 2ª linha, você pode mover a seção CSS para o seu arquivo CSS para que tudo seja gerenciado centralmente em um só lugar.

Ler:  Aprenda a amar a si mesmo para aumentar sua diligência digital

Para instalar o código em CMS específicos, escrevemos 6 guias separados para alguns dos mais populares:

Notificações de envio de formulário

Se desejar receber um e-mail sempre que um usuário enviar o formulário, basta ativar esta opção e definir um “endereço de e-mail de destino”. Se o seu site tiver um grande volume e muitos usuários enviarem o formulário, recomendamos desabilitar as notificações por e-mail em favor da configuração de notificações em um canal do Slack ou contar com a integração do Webhook ao seu CRM (veja a seção abaixo).

Notificações por e-mail do usuário

Você também pode permitir que um e-mail seja enviado ao usuário assim que ele enviar o formulário. Você também pode anexar opcionalmente a versão PDF do relatório de auditoria e personalizar todos os aspectos do próprio e-mail, incluindo assunto, título e conteúdo do e-mail, logotipo, fonte e cores.

Algumas agências não mostram o relatório ao usuário quando ele envia o formulário e apenas o anexam a esta notificação por e-mail, que funciona como uma verificação de que o usuário inseriu um endereço de e-mail real. Isso reduz o potencial de abuso do formulário de auditoria por usuários anônimos que executam vários relatórios e nunca deixam detalhes reais.

O conteúdo da notificação por e-mail pode ser totalmente personalizado. Algumas agências incluem links no conteúdo do e-mail para um aplicativo de reserva de calendário para que o usuário possa agendar uma reunião com elas para discutir o relatório.

Abaixo está um exemplo de notificação por e-mail enviada a um usuário que envia o formulário de auditoria:

Como você pode ver, o remetente do e-mail é “[email protected]”. É propositalmente um domínio genérico e é importante observar que o nome do remetente ou o endereço de e-mail não podem ser alterados. Não podemos falsificar o endereço de e-mail da sua empresa, pois isso criaria um risco de segurança e afetaria negativamente a capacidade de entrega do e-mail. Nas configurações de e-mail do formulário incorporado, você pode especificar um endereço de “Responder para” para que, se o destinatário responder a este e-mail, ele seja endereçado a você.

Prevenindo Spambots e Abuso

Abaixo das opções de design de e-mail, há uma seção “Restrições do usuário”. Essas configurações permitem impedir o envio do formulário com base em endereço IP, e-mail ou URLs de auditoria se você identificar abuso ou atividade de spam.

Todos os 3 campos podem conter vários valores, separando cada valor com uma vírgula (,). Se quiser bloquear e-mails de um domínio inteiro (por exemplo: Gmail), você pode usar o curinga asterisco assim: *@gmail.com. Se você deseja bloquear um URL e todas as suas páginas e subdomínios, insira apenas o domínio assim: website.com

Se um endereço IP, endereço de e-mail ou URL bloqueado for inserido, o usuário verá o seguinte erro ao tentar enviar o formulário:

Ler:  Como o comércio eletrônico pode gerar mais vendas por meio das mídias sociais

Envio de novos leads para seu CRM via Zapier

Se sua agência usa um CRM como HubSpot, Salesforce, Pipedrive, etc, você pode usar a opção Webhook para conectar a ferramenta de auditoria incorporável ao Zapier. Você também pode seguir estas etapas para configurar novas notificações de leads a serem enviadas para um canal do Slack ou, na verdade, qualquer outro aplicativo compatível com Zapier:

Abra o Zapier em uma nova aba e faça um novo Zap com o aplicativo “Webhooks by Zapier” (observe que este é um recurso Premium, então você precisará de um dos Zapier’s planos pagos):

Em seguida, escolha a opção “Catch Hook”:

Em seguida, clique no botão “Copiar” ao lado do URL do Webhook personalizado que o Zapier gera para você:

Clique em Continuar, volte para a guia Configurações de incorporação do Ahrefs e cole este URL no campo “URL do manipulador de Webhook”. Em seguida, clique no botão “Testar chamada”. Isso enviará um terminal de teste para Zapier. Após alguns segundos, você verá uma mensagem “200 OK” ao lado do botão. Depois de ver isso, volte para o Zapier e clique no botão “Testar gatilho”:

Você deverá ver os dados de teste agora no Zapier com a mensagem “encontramos uma solicitação!” mensagem de sucesso:

Neste ponto, seu gatilho Ahrefs está configurado com sucesso no Zapier. Você notará nos dados de teste que o campo “chave” é enviado pelo Ahrefs. Este valor corresponderá à sua chave de API na página Configurações de incorporação. Recomendamos fortemente que você defina uma condição no Zapier para verificar se esses 2 valores correspondem cada vez que o Zap dispara. Isso garantirá que o gatilho seja invocado legitimamente pelo Ahrefs e não por terceiros maliciosos.

Agora que seu gatilho foi concluído, você pode criar a ação no Zapier para salvar os dados do lead em qualquer CRM compatível, como HubSpot ou qualquer outro aplicativo de notificação, como Slack:

Teste o novo formulário

Depois que o formulário estiver instalado, recomendamos testar a página atualizada e enviar o formulário. Ao enviar você deverá ser direcionado para o seu relatório, receber a mensagem de confirmação ou ser redirecionado para outra página (dependendo da opção selecionada nas configurações de incorporação). Além disso, você deverá receber um e-mail de notificação de novo lead e ter um novo registro de lead adicionado à página Leads.

Potenciais problemas e conflitos

Se por algum motivo o widget não estiver funcionando em seu site, recomendamos realizar alguma depuração em seu site antes de abrir uma consulta com o Ahrefs. A causa mais comum de problemas ou conflitos é devido a:

  • Outros plug-ins ou complementos interferindo: alguns plug-ins acrescentam parâmetros de rastreamento a quaisquer URLs de um site ou interferem de outra forma na lógica existente do formulário
  • Compatibilidade Javascript: Parte do nosso código inclui uma parte do código Javascript para validar o formulário. Outro código Javascript na página pode interferir nisso

Novas publicações:

Recomendação