49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
|
import { useEffect } from 'react';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Esse hook procura por links de checkout (que saem da página) e
|
||
|
|
* adiciona os parâmetros de URL (como UTMs) no final desses links.
|
||
|
|
*
|
||
|
|
* Assim, se o usuário entra via:
|
||
|
|
* meusite.com/?utm_source=facebook&utm_medium=stories
|
||
|
|
*
|
||
|
|
* Quando ele clicar em "Comprar", o link de checkout receberá esses mesmos parâmetros,
|
||
|
|
* garantindo que a venda seja rastreada perfeitamente.
|
||
|
|
*/
|
||
|
|
export function useUTMForwarder() {
|
||
|
|
useEffect(() => {
|
||
|
|
// Pega todos os parâmetros atuais da URL da landing page (UTMs, src, sck, etc)
|
||
|
|
const urlParams = window.location.search;
|
||
|
|
|
||
|
|
if (!urlParams) return;
|
||
|
|
|
||
|
|
// Encontra todas as tags de link (<a>) na página
|
||
|
|
const links = document.querySelectorAll('a');
|
||
|
|
|
||
|
|
links.forEach(link => {
|
||
|
|
const href = link.getAttribute('href');
|
||
|
|
|
||
|
|
// Checa se é um link externo de checkout ou similar
|
||
|
|
// Exemplo: https://pay.kiwify.com.br, https://pay.hotmart.com, ou links com http
|
||
|
|
if (href && href.startsWith('http') && !href.includes(window.location.host)) {
|
||
|
|
try {
|
||
|
|
const urlObj = new URL(href);
|
||
|
|
|
||
|
|
// Pega os parâmetros existentes na landing page e repassa pro link final
|
||
|
|
const params = new URLSearchParams(urlParams);
|
||
|
|
params.forEach((value, key) => {
|
||
|
|
// Se o link de checkout já não tiver esse UTM, ele adiciona
|
||
|
|
if (!urlObj.searchParams.has(key)) {
|
||
|
|
urlObj.searchParams.append(key, value);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
link.setAttribute('href', urlObj.toString());
|
||
|
|
} catch (e) {
|
||
|
|
console.error("Erro ao processar UTMs do link: ", e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
}
|