Skip to main content

​
Script de passagem de UTMs

​
Quando usar

Caso você tenha uma página de vendas dedicada, é necessário instalar o script de passagem de UTMs na página de checkout da Framer.

​
Por que é importante

O script de passagem de UTMs desempenha um papel crucial ao transferir as informações das UTMs de uma página para outra dentro do seu funil de vendas, garantindo que esses dados sejam rastreados até o momento do checkout.
Script de passagem de UTMs
<script>
   var timer = setInterval(function () {
      const location =
         window.trackingNemu?.nemuUtms ||
         new URL(document.location.href)?.searchParams;
      const fields = [
         "src",
         "sck",
         "utm_source",
         "utm_medium",
         "utm_campaign",
         "utm_content",
         "utm_term",
      ];
      var links = document.getElementsByTagName("a");

      for (var i = 0, n = links.length; i < n; i++) {
         if (links[i].href.includes("#")) continue;
         if (links[i].href) {
            let link = new URL(links[i].href);
            fields.forEach((field) => {
               if (location.get(field))
                  link.searchParams.set(field, location.get(field));
            });
            let href = link.href;
            links[i].href = href;
         }
      }
   }, 500);
</script>

​
Como instalar

  1. Acesse as configurações da sua página na Framer
  2. Na seção Custom Code, adicione o script de passagem de UTMs e o Pixel da Nemu (gerado no passo 4 do onboarding)
  1. Clique em Save para salvar as alterações.
Se a sua página conter formulários antes de ir para o checkout, é necessário instalar o script de passagem de UTMs no formulário para que as UTMs sejam capturadas.

​
Código de passagem de UTMs no formulário da Framer

  1. Na menu lateral, em Code clique no botão + e escolha New Code File
  1. No campo Name, digite NemuHotmartForm, escolha a opção Override e clique em Create
  1. Cole o código abaixo no arquivo criado:
Substitua a URL do checkout pela URL do checkout da sua oferta e os campos do formulário pelos campos do seu formulário.
Para verificar os nomes dos campos do formulário, acesse o popup do seu projeto e clique em cima do campo que deseja verificar o nome.
import { Override } from "framer"

export function NemuHotmartForm(): Override {
    return {
        onClick: async () => {
            const waitForForm = () =>
                new Promise<HTMLFormElement | null>((resolve) => {
                    const start = Date.now()
                    const interval = setInterval(() => {
                        const form = document.querySelector("form")
                        if (form) {
                            clearInterval(interval)
                            resolve(form)
                        } else if (Date.now() - start > 2000) {
                            clearInterval(interval)
                            resolve(null)
                        }
                    }, 50)
                })
            const form = await waitForForm()
            if (!form) return

            const params =
                window.trackingNemu?.nemuUtms ||
                new URLSearchParams(window.location.search)
            const fields = [
                "src",
                "sck",
                "utm_source",
                "utm_medium",
                "utm_campaign",
                "utm_content",
                "utm_term",

                // Adicionar os campos do formulário
                "name",
                "email",
                "phone",
            ]

            fields.forEach((field) => {
                let input = form.querySelector<HTMLInputElement>(
                    `input[name='${field}']`
                )
                if (!input) {
                    input = document.createElement("input")
                    input.type = "hidden"
                    input.name = field
                    form.appendChild(input)
                }
                const val = params.get(field)
                if (val) input.value = val
            })

            const getValue = (name: string) =>
                form.querySelector<HTMLInputElement>(`input[name='${name}']`)
                    ?.value || ""

            // Substituir pela URL do checkout da sua oferta
            const checkoutURL = "https://pay.hotmart.com/999999999?off=999999999&checkoutMode=10"

            const url = `${checkoutURL}&name=${encodeURIComponent(getValue("name"))}&email=${encodeURIComponent(getValue("email"))}&phoneac=${encodeURIComponent(getValue("phoneac"))}&src=${encodeURIComponent(getValue("src"))}&sck=${encodeURIComponent(getValue("sck"))}&utm_source=${encodeURIComponent(getValue("utm_source"))}&utm_medium=${encodeURIComponent(getValue("utm_medium"))}&utm_campaign=${encodeURIComponent(getValue("utm_campaign"))}&utm_content=${encodeURIComponent(getValue("utm_content"))}&utm_term=${encodeURIComponent(getValue("utm_term"))}`

            window.location.href = url
        },
    }
}
  1. No botão do seu formulário, selecione o componente em CodeOverride e escolha NemuHotmartForm
  1. Clique em Publish e depois Update para visualizar as alterações.