Estoy tratando de agregar Google Analytics a mi sitio dinámicamente solo después de que el usuario haga clic en "Acepto cookies".
El guión que tengo hasta ahora es
<script> function addScript() { var addGoogleAnalytics = document.createElement("script"); addGoogleAnalytics.setAttribute("src","https://www.googletagmanager.com/gtag/js?id=G-MYIDHERE"); addGoogleAnalytics.async = "true"; document.head.appendChild(addGoogleAnalytics); var addDataLayer = document.createElement("script"); var dataLayerData = document.createTextNode("window.dataLayer = window.dataLayer || []; \n function gtag(){dataLayer.push(arguments);} \n gtag('js', new Date()); \n gtag('config', 'G-MYIDHERE');"); addDataLayer.appendChild(dataLayerData); document.head.appendChild(addDataLayer); } </script>Esto se activa usando un simple
<a href="#" onclick="addScript();">Click Here</a>Esto parece funcionar bien, pero mis preguntas son:
¿Hay una mejor manera de hacer esto? No soy un experto en javascript, por lo que estoy un poco sorprendido de que funcione y quiero asegurarme de que no haya riesgos importantes de código/seguridad antes de la implementación.
Más importante aún ... ¿Cómo almaceno el "Acepto" en una cookie o localStorage para que no tengan que hacer clic en Acepto cada vez, y si eso está configurado, carga el script automáticamente sin la función onclick?
Entonces, el problema con lo anterior era que el código mostraba el aviso de cookies en cada página.
<script> var cookies = localStorage.getItem("cookiesAccepted"); // this checks if cookies local storage was accepted before if(cookies == 'Yes') { //if they were it creates the analytics tag var addGoogleAnalytics = document.createElement("script"); addGoogleAnalytics.setAttribute("src","https://www.googletagmanager.com/gtag/js?id=G-MYIDHERE"); addGoogleAnalytics.async = "true"; document.head.appendChild(addGoogleAnalytics); var addDataLayer = document.createElement("script"); var dataLayerData = document.createTextNode("window.dataLayer = window.dataLayer || []; \n function gtag(){dataLayer.push(arguments);} \n gtag('js', new Date()); \n gtag('config', 'G-MYIDHERE');"); addDataLayer.appendChild(dataLayerData); document.head.appendChild(addDataLayer); } //if cookies were not set to yes, it waits for the cookie banner click function. function addScript() { localStorage.setItem('cookieAccepted', 'Yes'); var addGoogleAnalytics = document.createElement("script"); addGoogleAnalytics.setAttribute("src","https://www.googletagmanager.com/gtag/js?id=G-MYIDHERE"); addGoogleAnalytics.async = "true"; document.head.appendChild(addGoogleAnalytics); var addDataLayer = document.createElement("script"); var dataLayerData = document.createTextNode("window.dataLayer = window.dataLayer || []; \n function gtag(){dataLayer.push(arguments);} \n gtag('js', new Date()); \n gtag('config', 'G-MYIDHERE');"); addDataLayer.appendChild(dataLayerData); document.head.appendChild(addDataLayer); } </script>Este código anterior parece funcionar. Si el usuario ya aceptó las cookies, agrega la etiqueta de Google Analytics sin preguntarle al usuario. Si no han aceptado, el indicador se usa para activar la función addscript al aceptar.