Hoy traigo de nuevo otro codekata, esta vez en JavaScript. Para evitar el uso de cookies, y la carga opcional de ficheros JS. Traigo el cómo cargar o no Google Analytics opcionalmente mediante JavaScript. Es decir, son unas rutinas de carga de ficheros JavaScript, o de funciones que se ejecuten, si el visitante ha aceptado o no el uso de ciertos servicios que usemos en una web.
Esto se puede usar para Google Analytics o para otros servicios que carguen a partir de JavaScript como anuncios, pixeles de conversión, etc..
Al grano, código fuente de una web de pruebas
Un html podría ser:
<html>
<head>
<title>Prueba</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<h1>Esto es una prueba</h1>
<p>Probando de nuevo a ver si hay cambiosssss</p>
<p>Vamos a probar a ver si esto funciona..</p>
<script src="app.js"></script>
</body>
</html>Algo de CSS, por ponerle algo de estilo:
body {
background-color: #808080;
}El fichero app.js que se encarga de la carga opcional
El siguiente código es el encargado de la toma de decisión de si cargar o no los siguientes JavaScripts, es el contenido en app.js:
'use strict';
// MAIN
window.addEventListener('load', function () {
console.log('Main app.js loaded!');
// Lógica de control de carga o no de los scripts..
let enabledSecondaryJavascript = true;
let enabledAnotherSecondaryJavascript = true;
let enabledGoogleAnalytics = true;
// Primer JS opcional..
if (enabledSecondaryJavascript) {
let secondaryJs = document.createElement('script');
secondaryJs.type = 'text/javascript';
secondaryJs.src = 'app-secondary.js';
document.body.append(secondaryJs);
}
// Segundo JS opcional..
if (enabledAnotherSecondaryJavascript) {
let anotherSecondaryJs = document.createElement('script');
anotherSecondaryJs.type = 'text/javascript';
anotherSecondaryJs.src = 'app-secondary-other.js';
document.body.append(anotherSecondaryJs);
}
// Carga opcional de Google Analytics..
if (enabledGoogleAnalytics) {
launchGoogleAnalytics();
}
});
function launchGoogleAnalytics () {
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-12345678-12', 'dominiodetuweb.com', {
'anonymizeIp': true,
'storage': 'none',
'clientId': window.localStorage.getItem('googleAnalyticsClientId')
});
ga(function (tracker) { window.localStorage.setItem('googleAnalyticsClientId', tracker.get('clientId')); });
ga('send', 'pageview');
}El primer y segundo ficheros JS opcionales
El fichero que se llama primero como app-secondary.js:
'use strict';
function mainSecondary() {
console.log('Secondary app-secondary.js loaded!');
}
mainSecondary();Otro fichero llamado app-secondary-other.js:
'use strict';
function mainSecondary() {
console.log('Secondary app-secondary-other.js loaded!');
}
mainSecondary();Los ficheros dentro pueden tener funciones con mismos nombres, no hay conflicto por esto. Si todo ha ido bien se tiene que ver en la consola de JavaScript los mensajes de los 3 ficheros JavaScript como en la imagen de cabecera de este post.
