Como ligar o n8n ao Workflow Webhooks

Visão geral dos casos de utilização

Esta configuração liga o seu fluxo de trabalho de e-mails pós-compra no n8n ao Workflow Webhooks, para que possa recolher os dados dos clientes para uma auditoria mensal de SEO e enviá-los para Shopify Flow.

Neste exemplo, o cliente recebe um e-mail com um formulário de inquérito (estamos a utilizar o Google Form, que adiciona uma entrada na folha de cálculo do Google) solicitando:

• Qual é o URL da sua loja Shopify?
• Qual é o seu maior desafio em matéria de SEO neste momento? Com as seguintes opções: slow traffic growth, poor product rankings, thin content, technical errors
• Há quanto tempo gere a sua loja? Com as seguintes opções: less than 6 months, 6–12 months, 1–3 years, 3+ years
• O endereço de e-mail utilizado para o pedido na loja?

Quando o cliente enviar o formulário, o n8n envia as respostas para o seu ponto de extremidade Workflow Webhooks. O Shopify Flow pode, então, atribuir uma tag ao cliente e adicionar uma nota, para que a sua equipa de SEO veja imediatamente o contexto na área de administração do Shopify.

O que este fluxo de trabalho faz

Depois de o cliente enviar o formulário no seu fluxo de e-mail, os dados são adicionados à folha de cálculo e, a partir daí, o n8n envia os dados para o webhook Workflow Webhooks, sendo que este webhook envia esta payload para Shopify Flow:

{
  "name": "Saad",
  "email": "customer@example.com",
  "store_url": "mystore.myshopify.com",
  "seo_challenge": "poor product rankings",
  "store_age": "1-3 years"
}

O seu fluxo de trabalho Shopify Flow será, então:

• adiciona un tag de cliente seo-audit-pending
• adiciona uma nota do cliente com o URL da loja e o desafio de SEO

Isto facilita à sua equipa a abertura do registo do cliente no painel de administração Shopify e permite-lhe verificar o que requer atenção antes do início da auditoria.

Guia em vídeo

Aqui pode ver o vídeo de toda a configuração; o vídeo não tem som. Pode aumentar ou diminuir a velocidade do vídeo, conforme necessário.

Antes de começar

• Instale e ative o «Workflow Webhooks» na sua loja Shopify.
• Tenha um fluxo de trabalho Shopify Flow já preparado ou crie um novo em Shopify Flow.
• Crie o seu formulário de registo na ferramenta que alimenta o seu fluxo de trabalho no n8n. Estou a utilizar o Google Form; assim que o Google Form for enviado, é criada uma entrada nas folhas de cálculo do Google. dados recebidos do Google Form numa folha de cálculo
• Certifique-se de que recolhe o endereço de e-mail do cliente exatamente tal como consta em Shopify, para que Shopify Flow possa identificar o cliente correto.

Configure a ligação

No site Workflow Webhooks, crie o webhook.

Introduza o nome e gere um token estático (pode criar o token estático instantaneamente premindo o botão mágico no número 3 da imagem seguinte) e guarde.

Nas «Definições avançadas», atribua um nome às variáveis que pretende receber:

• name
• email
• store_url
• seo_challenge
• store_age

Nas definições, temos 4 variáveis, que atribuímos aos nomes «name», «email», «store_url» e «seo_challenge»; além disso, marcámos também a opção «Permitir corpo de pedido personalizado» para receber outras informações, como «store_age».

No gatilho do Google Sheets, selecione a folha correta que pretende monitorizar e crie uma entrada de teste no formulário para visualizar os dados.

Em seguida, selecione a ação «Pedido HTTP» para enviar os dados do formulário para o webhook que criou através da aplicação Workflow Webhooks.

Pode seguir os passos indicados na parte inferior da página Workflow Webhooks, que inclui os campos mapeados, o token da API e o URL do webhook.

Adicionei o URL, selecionei o método POST e adicionei os cabeçalhos desta forma na ação «Pedido HTTP» do n8n.

Em seguida, associei as variáveis criadas no webhook às perguntas propriamente ditas. Poderá ver no vídeo de demonstração como arrastei e soltei a resposta nos campos. Adicionei também a variável store\_age, que se encontrava na página com barra de deslocamento e não coube na captura de ecrã.

Em seguida, execute o passo e veja os dados enviados do n8n para o seu webhook na aplicação Workflow Webhooks. Nas invocações, poderá ver que o Sistema Externo invocou este webhook e também consultar o payload. Pode utilizar este payload no seu Shopify Flow para realizar qualquer ação.

Uma vez que o seu webhook recebeu com sucesso os dados do n8n, guarde e publique o fluxo de trabalho.

No «Shopify Flow», crie um fluxo de trabalho que seja iniciado quando os dados do seu webhook forem recebidos através de Workflow Webhooks. Em seguida, no gatilho do webhook, clique em «Registar Eventos».

Agora, aceda à invocação anterior do webhook e repita a execução do webhook para enviar esta payload ao seu «Webhook Gatilho» no Shopify Flow.

Agora, nos dados, pode ver a payload e também o ID do webhook.

Pode ver o mesmo webhook no painel de controlo de webhooks, podendo este ser utilizado para identificar o seu webhook.

Agora adicione a condição: se o ID do webhook recebido for igual ao ID do webhook que criou para o fluxo do n8n, execute as ações relacionadas com o formulário. Uma vez que cada gatilho de webhook recebe os dados enviados para qualquer URL de webhook na aplicação Workflow Webhooks, este ID irá ajudá-lo a selecionar os dados relevantes do webhook para fins específicos.

Utilize o valor do e-mail recebido para encontrar o cliente correspondente através da consulta avançada. Na consulta, pode utilizar o e-mail, sendo que este e-mail é recebido a partir das variáveis de acionamento do webhook. No meu caso, o campo «fieldTwo» corresponde ao e-mail. A minha consulta tem o seguinte aspeto: email:"{{fieldTwo}}"

Agora, verifique se o cliente existe. Estou a verificar se o ID do cliente existe.

Em seguida, adicione a tag seo-audit-pending. Para obter o cliente, na configuração, utilizei este código para inserir o ID do cliente; utilizei o controlo de espaços em branco na sintaxe da tag {{-, -}}, {%- e -%} para remover os espaços em branco do lado esquerdo ou direito do ID do cliente. Se houver algum espaço em branco, a consulta não funcionará.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Adicione ou atualize a nota do cliente com o URL da loja e o desafio de SEO. Para obter o ID do cliente, na configuração, utilizei este código para inserir o ID do cliente; utilizei o controlo de espaços em branco na sintaxe das tags {{-, -}}, {%- e -%} para remover os espaços em branco do lado esquerdo ou direito do ID do cliente. Se houver algum espaço em branco, a consulta não funcionará.

{%- for getCustomerData_item in getCustomerData -%}
  {{-getCustomerData_item.id-}}
{%- endfor -%}

Ative o fluxo de trabalho, envie uma resposta de teste a partir do seu formulário e confirme se o registo de cliente correto no Shopify recebe a tag e a nota.

Isto funciona da seguinte forma: o formulário é enviado -> o N8N recebe os dados -> o N8N envia os dados para o webhook Workflow Webhooks -> o webhook Workflow Webhooks aciona o Shopify Flow -> o senhor filtra o gatilho do fluxo com base no ID do webhook -> em seguida, recupera o cliente com base no ID -> verifica se o cliente existe -> adiciona a etiqueta -> adiciona a nota

A tag e a nota têm o aspeto apresentado na imagem seguinte para o cliente.