#NextJS with Footer Script for Meta ADS (UTM)

19 messages · Page 1 of 1 (latest)

barren vigil
#

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);
winter basinBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

barren vigil
#

i have to use useEffect?

#

NextJS with Footer Script for Meta ADS (UTM)

tardy hull
#

You can render a script tag using:

  <script
    dangerouslySetInnerHTML={{
      __html: `
        // your script content here
      `,
    }}
  />
barren vigil
#

on html?

#

react

#

like this

#

put "" on the code?

tardy hull
#

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);
    `,
  }}
/>
#

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

barren vigil
#

okay

#

i will try