Framer

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",
         "nemu_source",
         "nemu_medium",
         "nemu_campaign",
         "nemu_content",
         "nemu_adset",
         "nemu_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

Acesse as configurações da sua página na Framer
Na seção Custom Code, adicione o script de passagem de UTMs e o Pixel da Nemu (gerado no passo 4 do onboarding)

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

Na menu lateral, em Code clique no botão + e escolha New Code File

No campo Name, digite NemuHotmartForm, escolha a opção Override e clique em Create

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",
                "nemu_source",
                "nemu_medium",
                "nemu_campaign",
                "nemu_content",
                "nemu_adset",
                "nemu_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
        },
    }
}

No botão do seu formulário, selecione o componente em CodeOverride e escolha NemuHotmartForm

Clique em Publish e depois Update para visualizar as alterações.

1. Configurando UTMs

2. Dashboard

3. Integração com Redes Sociais e Google Analytics (GA4)

4. Configurando o Pixel da Nemu

5. Integração com Plataformas de Vendas

Script de passagem de UTMs

Quando usar

Por que é importante

Como instalar

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

​Script de passagem de UTMs

​Quando usar

​Por que é importante

​Como instalar

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

Script de passagem de UTMs

Quando usar

Por que é importante

Como instalar

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