Next.js Discord

Discord Forum

NextJS with Footer Script for Meta ADS (UTM)

Unanswered
Koyun dog posted this in #help-forum
Open in Discord
Koyun dogOP
hi guys i m trying to use this script but it dosent working im using the next js without app router

this is footer script:


// Define os prefixos dos URLs de checkout
let prefixos = ["https://pay.kiwify.com.br"];

// Função para recuperar os parâmetros UTM da URL atual
function getParamsUTM() {
const urlAtual = new URL(window.location.href);
const params = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
let parametrosUTM = '';

params.forEach(param => {
const valor = urlAtual.searchParams.get(param);
if (valor) {
parametrosUTM += ${parametrosUTM ? '&' : ''}${param}=${valor};
}
});

return parametrosUTM;
}

// Função para adicionar os parâmetros UTM aos links de checkout
function adicionarParametrosUTMAosLinks() {
const parametrosUTM = getParamsUTM();
if (!parametrosUTM) return;

document.querySelectorAll("a").forEach(link => {
const ehLinkDeCheckout = prefixos.some(prefixo => link.href.startsWith(prefixo));
if (ehLinkDeCheckout) {
link.href += link.href.includes('?') ? '&' : '?';
link.href += parametrosUTM;
}
});
}

// Executa a função quando o documento é carregado, garantindo que os links sejam atualizados
document.addEventListener('DOMContentLoaded', adicionarParametrosUTMAosLinks);

17 Replies

Koyun dogOP
i have to use useEffect?
Western paper wasp
You can render a script tag using:

  <script
    dangerouslySetInnerHTML={{
      __html: `
        // your script content here
      `,
    }}
  />
on html?
react
like this
put "" on the code?
Western paper wasp
You need backticks around the JS code
like I showed
and you’ll need to escape the template strings inside your JS code
Like this
<script
  dangerouslySetInnerHTML={{
    __html: `
    let prefixos = ["https://pay.kiwify.com.br/"];

    // Função para recuperar os parâmetros UTM da URL atual
    function getParamsUTM() {
        const urlAtual = new URL(window.location.href);
        const params = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
        let parametrosUTM = '';

        params.forEach(param => {
            const valor = urlAtual.searchParams.get(param);
            if (valor) {
                parametrosUTM += \`\${
                  parametrosUTM ? "&" : ""
                }\${param}=\${valor};\`
            }
        });

        return parametrosUTM;
    }

    // Função para adicionar os parâmetros UTM aos links de checkout
    function adicionarParametrosUTMAosLinks() {
        const parametrosUTM = getParamsUTM();
        if (!parametrosUTM) return;

        document.querySelectorAll("a").forEach(link => {
            const ehLinkDeCheckout = prefixos.some(prefixo => link.href.startsWith(prefixo));
            if (ehLinkDeCheckout) {
                link.href += link.href.includes('?') ? '&' : '?';
                link.href += parametrosUTM;
            }
        });
    }

    // Executa a função quando o documento é carregado, garantindo que os links sejam atualizados
    document.addEventListener('DOMContentLoaded', adicionarParametrosUTMAosLinks);
    `,
  }}
/>
Western paper wasp
You can put it in your _app.jsx if you need the script on every page
or you can put it in any single page component
Koyun dogOP
okay
i will try
thanks so much luke!