Tengo una extensión de Chrome que se activa en algunos sitios web e inyecta algunos elementos en html DOM. Ahora quiero agregar Google Tag Manager en la extensión.
En los documentos de Google Tag Manager se menciona agregar la función dada en la etiqueta <head> de la página. Entonces, primero traté de agregar la etiqueta del script en la etiqueta del documento <head> tan pronto como se carga la extensión:
const loadGTM = () => { const scriptTag = document.createElement("script"); scriptTag.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX');`; document.head.appendChild(scriptTag); const noScriptTag = document.createElement("noscript"); noScriptTag.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>`; document.body.prepend(noScriptTag); }Luego intenté conectarme a través de Google Tag Assistant y no funcionó.
Después de esto, traté de ejecutar el script en lugar de agregar el script a la etiqueta principal. Así que abro un nuevo archivo gtm.js y le agrego el script:
//gtm.js const accountToken = `GTM-XXXXXXX`; function integrateGTM() { (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != "dataLayer" ? "&l=" + l : ""; j.async = true; j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl; f.parentNode.insertBefore(j, f); })(window, document, "script", "dataLayer", accountToken); const code = `<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${accountToken}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`; const bodyScript = document.createElement("noscript"); bodyScript.innerHTML = code; document.body.prepend(bodyScript); } integrateGTM();Y nuevamente, después de intentar conectarse a través de Tag Assistant, no se conecta.
Entonces, si alguien tiene alguna idea o experiencia en este campo, me encantaría obtener ayuda. ¡Gracias!