Recientemente publiqué un #ConsejosGTMT guía llamada 10 selectores CSS útilesy fue muy bien recibido. Inspirado por los comentarios, aquí está la siguiente entrega. Esta vez, repasaremos algunos consejos y trucos útiles de JavaScript que puedes usar para hacer tu Administrador de etiquetas de Google Implementación aún más eficiente. He escrito mucho Acerca de JavaScript en este weblogy tengo la intención de seguir haciéndolo en el futuro. Como siempre, si JavaScript es un misterio para ti, te recomiendo encarecidamente que pruebes el Curso gratuito de Codecademy sobre JS¡Y echa un vistazo a las otras pistas de tecnología net disponibles mientras estás allí!
incógnita
El boletín informativo de Simmer
Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!
Consejo 54: 10 trucos útiles para personalizar JavaScript
Puedes implementar estos trucos en etiquetas HTML personalizadas o variables JavaScript personalizadas, ya que son los únicos contextos dentro de Google Tag Supervisor donde puedes ejecutar JavaScript arbitrario. Ten en cuenta que algunos de los trucos son solo fragmentos de código, por lo que necesitarás comprender lo suficiente cómo Google Tag Supervisor y JavaScript se combinan para poder implementarlos con éxito.
Antes de agregar cualquiera de estos a sus implementaciones, recuerde utilizar caniuse.com para comprobar la compatibilidad del navegador y el Referencia de JavaScript de MDN para encontrar formas alternativas (también conocidas como polyfills) para escribir los métodos no compatibles.
1. Métodos de cadena
Los métodos de cadena son utilidades que puedes usar para modificar cualquier cadena dada. A continuación, se muestran algunos de los más útiles, en mi opinión.
// Use .trim() to strip main and trailing whitespace from a string.
" Oh no! Main AND trailing whitespace!! ".trim();
// Outcome: "Oh no! Main AND trailing whitespace!!"
// Use .substitute() to switch characters or common expressions with one thing else.
// .substitute() with out a common expression replaces the primary occasion.
"Meals".substitute('o', 'e');
// Outcome: "Feod"
"Meals".substitute(/o/g, 'e');
// Outcome: "Feed"
// Use .toUpperCase() and .toLowerCase() to vary the case of your entire string
"MixED CaSe String".toLowerCase();
// Outcome: "blended case string"
// Use .substring() to return solely a part of the string.
"?some-query-key=some-query-value".substring(1);
// Returns: "some-query-key=some-query-value"
"id: 12345-12345".substring(4,9);
// Returns: "12345"
// Use .break up() to separate the string into its constituents
"get the second phrase of this sentence".break up(' ')(1);
// Returns "the"
Naturalmente, puedes combinarlos de formas creativas. Por ejemplo, para poner en mayúscula la primera letra de cualquier cadena, puedes hacer lo siguiente:
var str = "capitalize the primary letter of this string, please!";
str = str.substitute(/^./, str.substring(0,1).toUpperCase());
Aquí primero identificamos la primera letra de la cadena usando una expresión common, después de lo cual la reemplazamos con la primera letra de la cadena que se ha convertido a mayúscula.
2. Métodos de matriz
Los métodos de matriz son realmente poderosos en cualquier lenguaje de programación. Dominar métodos como filter() y forEach() es basic si desea que su JavaScript sea más compacto y, a menudo, más legible.
filtrar()
filter() recorre cada elemento de la matriz y devuelve una nueva matriz por cada elemento que supere la comprobación que proporcionas en la devolución de llamada. Esta es la sintaxis:
someArray.filter(perform(eachItem) {
return eachItem === someCondition;
});
Entonces eachItem es la variable donde el iterador almacena cada miembro del Array a medida que se procesa. Si la devolución de llamada retorna truesignifica que el elemento se agrega a la nueva matriz devuelta. Si devuelve falsese ha caído.
He aquí un ejemplo:
window.dataLayer = window.dataLayer || ();
window.dataLayer.push({
'occasion' : 'addMe!'
},{
'occasion' : 'doNotAddMe!'
});
var newArray = window.dataLayer.filter(perform(merchandise) {
return merchandise.occasion === 'addMe!';
});
// Returns: ({'occasion' : 'addMe!'})
El iterador comprueba cada elemento particular person en busca de la propiedad occasiony vuelve true Si esa propiedad tiene valor addMe!. Por lo tanto, la matriz devuelta solo tiene aquellos elementos que tienen el par clave-valor. "occasion" : "addMe!".
para cada()
¿Recuerdas el complicado bucle for para iterar sobre una matriz? ¡Qué asco! En su lugar, puedes usar el forEach() iterador.
forEach() Recibe cada elemento de la matriz uno por uno y luego puede hacer lo que desee con ese elemento. La sintaxis es muy easy e intuitiva y, por lo tanto, se la debe preferir al confuso bucle for.
var array = ("I", 4, 2, true, "love", (1,2,3), {chocolate: 'too'}, "you");
var newArray = ();
array.forEach(perform(merchandise) {
if (typeof merchandise === 'string') {
newArray.push(merchandise);
}
});
newArray.be part of(" ");
// Outcome: "I really like you"
Como puedes ver, es más legible que un bucle for, ya que no tienes que acceder a la matriz unique en el iterador.
mapa()
El map() itera sobre cada miembro de la matriz, nuevamente, pero esta vez el código en la devolución de llamada se ejecuta sobre cada miembro de la matriz y se devuelve una nueva matriz con los resultados. Aquí se explica cómo configurarlo:
array.map(perform(merchandise) {
return doSomething(merchandise);
});
En otras palabras, eres cartografía Cada elemento de la matriz se compara con el resultado de la función de devolución de llamada. A continuación, se muestran algunos ejemplos:
var array = (1,2,3,4,5);
array.map(perform(merchandise) {
return merchandise * 2;
});
// Outcome: (2,4,6,8,10)
var array = (" please ", " trim", " us ");
array.map(perform(merchandise) {
return merchandise.trim();
});
// Outcome: ("please", "trim", "us");
reducir()
El cut back() El método suele ser el más complejo, pero en realidad tiene un principio muy easy: se proporciona a la función un acumulador y cada miembro de la matriz se opera contra este acumulador. También se puede proporcionar un valor inicial al acumulador. Así es como se ve la estructura básica:
array.cut back(perform(accumulator, merchandise) {
accumulator.doSomethingWith(merchandise);
return accumulator;
}, initialValue);
Esta vez, definitivamente es más fácil aprender a través de ejemplos:
// Instance: calculate the sum of all even numbers within the array
var array = (1,6,3,4,12,17,21,27,30);
array.cut back(perform(accumulator, merchandise) {
if (merchandise % 2 === 0) {
accumulator += merchandise;
}
return accumulator;
}, 0);
// Returns: 52
// Instance, concatenate a string of all product IDs in array
var array = ({
"id" : "firstId",
"identify" : "T-shirts"
},{
"id" : "secondId",
"identify" : "Pants"
},{
"id" : "thirdId",
"identify" : "footwear"
});
array.cut back(perform(accumulator, merchandise) {
accumulator.push(merchandise.id);
return accumulator;
}, ()).be part of();
// Returns: "firstId,secondId,thirdId"
3. Operador ternario
El operador ternario es simplemente una forma abreviada y muy easy de ejecutar comprobaciones condicionales en JavaScript. A continuación, se muestra un ejemplo:
// BEFORE:
if (one thing) {
somethingElse();
} else {
somethingDifferent();
}
// AFTER:
one thing ? somethingElse() : somethingDifferent();
El operador ternario se utiliza para combinar una sentencia if en una expresión easy. Primero se proporciona una expresión que se evalúa como una veraz o falsedad valor, como por ejemplo me.identify() === "Simo"Luego escribe el signo de interrogación y después escribe una expresión que se ejecuta si el primer elemento se evalúa como un veraz valor. Por último, escribe los dos puntos. :después de lo cual escribe la expresión que se ejecuta si el primer elemento se evalúa como un falsedad valor.
// BEFORE:
if (doc.querySelector('#findThisId') !== null) {
return doc.querySelector('#findThisId');
} else {
return "Not discovered!";
}
// AFTER:
return doc.querySelector('#findThisId') ? doc.querySelector('#findThisId') : "Not discovered!";
// EVEN BETTER:
return doc.querySelector('#findThisId') || "Not discovered!";
Como puede ver, a veces hay formas incluso más eficientes de procesar declaraciones de JavaScript que el operador ternario. Especialmente cuando se trabaja con comprobaciones binarias simples (si existe un valor, devolverlo), puede ser mejor simplemente usar el operador ternario básico. operadores lógicos en lugar de declaraciones o expresiones complejas.
4. return {{Click on URL}}.indexOf({{Nombre de host de la página}}) > -1
Esto es muy parecido a Google Tag Supervisor. Es una variable de JavaScript personalizada easy que devuelve true si la URL del elemento en el que se hizo clic contiene el nombre de host de la página precise, y false De lo contrario, en otras palabras, devuelve true Si el enlace en el que se hizo clic es interno, y false Si aleja al usuario del sitio net.
perform() {
return {{Click on URL}}.indexOf({{Web page Hostname}}) > -1;
}
5. devuelve {{URL del clic}}.break up(‘/’).pop()
Nuevamente, una variable de JavaScript personalizada easy. Esto es especialmente útil cuando se realiza un seguimiento descargas de archivosya que devuelve el nombre de archivo actual del elemento descargado. Para ello, devuelve lo que se encuentre en la URL en la que se hizo clic después del último ‘/’.
perform() {
// Instance: https://www.simoahava.com/downloads/download_me.pdf
return {{Click on URL}}.break up('/').pop();
// Returns: download_me.pdf
}
6. Crea un GUID único y aleatorio
De vez en cuando resulta útil crear un ID aleatorio en GTM. Por ejemplo, si desea medir ID de sesióno si desea asignar un identificador único a cada visita a la página, puede lograrlo con la siguiente variable de JavaScript personalizada.
La variable crea una cadena GUID (“identificador único international”) y, aunque no se garantiza su unicidad, sigue siendo muy possible. Solo existe una probabilidad microscópicamente pequeña de colisión.
Esta solución es una adaptación gratamente aceptada de Esta publicación de StackOverflow.
perform() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.substitute(/(xy)/g, perform(c) 0, v = c == 'x' ? r : (r&0x3);
}
7. Devuelve una marca de tiempo con formato ISO
Esta es una de mis soluciones favoritas, ya que te permite convertir la hora precise del cliente en una marca de tiempo legible y adecuada. Además, incluye la diferencia horaria, por lo que sabrás exactamente en qué medida difieren las horas locales de los usuarios respecto de tu propia zona horaria. Envío esto a Google Analytics con Cada golpepara que pueda crear una línea de tiempo de eventos al analizar los datos.
Esta solución es una adaptación gratamente aceptada de Esta publicación de StackOverflow.
perform() {
var now = new Date();
var tzo = -now.getTimezoneOffset();
var dif = tzo >= 0 ? '+' : '-';
var pad = perform(num) {
var norm = Math.abs(Math.flooring(num));
return (norm < 10 ? '0' : '') + norm;
};
return now.getFullYear()
+ '-' + pad(now.getMonth()+1)
+ '-' + pad(now.getDate())
+ 'T' + pad(now.getHours())
+ ':' + pad(now.getMinutes())
+ ':' + pad(now.getSeconds())
+ '.' + pad(now.getMilliseconds())
+ dif + pad(tzo / 60)
+ ':' + pad(tzo % 60);
// Returns, for instance: 2017-01-18T11:58:32.977+02:00
}
8. .matches() relleno de polietileno
Al trabajar con el Modelo de objetos de documento (DOM), es basic poder identificar elementos. Ya tenemos un montón de elementos maravillosos Selectores CSS a nuestra disposición, pero ahora solo necesitamos un método que podamos usar para verificar si algún elemento dado coincide con uno de estos selectores.
Bueno, ahí está el Component.matches(someSelector) método que puedes usar, pero no tiene Compatibilidad estelar con navegadores, incluso con prefijosCon esta solución, siempre podrás utilizar .matches() sin tener que preocuparse por la compatibilidad del navegador. Este truco se llama relleno de polietilenoya que soluciona la falta de compatibilidad de funciones con una solución alternativa que utiliza JavaScript que tiene soporte common.
Primero, así es como funciona el método en common:
// Examine if the guardian of the clicked aspect has ID #testMe
var el = {{Click on Component}};
console.log(el.parentElement.matches('#testMe'));
// RESULT: true or false, relying on if the guardian aspect matches the selector.
Para implementar El polyfillsolicite a sus desarrolladores que lo agreguen al JavaScript del sitio lo antes posible en la secuencia de carga de la página o utilice Google Tag Supervisor.
En Google Tag Supervisor, necesitará una etiqueta HTML personalizada que se lively lo antes posible en la secuencia de carga del contenedor (es decir, que todas las páginas se activen con una prioridad de etiqueta alta).
Aquí está el código que necesitas agregar a la etiqueta HTML personalizada. Es una adaptación de Esta página de referencia de MDN.
<script>
if (!Component.prototype.matches) {
Component.prototype.matches =
Component.prototype.matchesSelector ||
Component.prototype.mozMatchesSelector ||
Component.prototype.msMatchesSelector ||
Component.prototype.oMatchesSelector ||
Component.prototype.webkitMatchesSelector ||
perform(s) {
var matches = (this.doc || this.ownerDocument).querySelectorAll(s),
i = matches.size;
whereas (--i >= 0 && matches.merchandise(i) !== this) {}
return i > -1;
};
}
script>El polyfill modifica el prototipo actual del Component objeto, del que heredan todos los elementos HTML y DOM. Después de modificar el prototipo, puede utilizar el matches() Método con confianza en todo su GTM y JavaScript del sitio.
9. Recorrido del DOM
A veces es necesario subir (o bajar) en el Modelo de objetos del documento. Por ejemplo, si está utilizando un Haga clic en / Activador de todos los elementossiempre apunta al elemento actual en el que se hizo clic, pero no siempre es necesariamente el elemento que desea rastrear. Supongamos que tiene una estructura HTML como esta:
<a href="takemeaway.html">
<button id="clickMe">
<span>Click on Me!span>
button>
a>Ahora, si utiliza un disparador Clic / Todos los elementos, el elemento que se captura en el clic es el Pero supongo que en realidad quieres usar el elemento, ya que estás más interesado en saber qué sucede después el clic. Por lo tanto, puede utilizar esta variable personalizada de JavaScript para devolver el enlace más cercano sobre el elemento en el que se hizo clic en el árbol DOM:
perform() {
var el = {{Click on Component}};
whereas (!el.matches('a') && !el.matches('physique')) {
el = el.parentElement;
}
return el.matches('a') ? el : undefined;
}
¡NOTA! Esto depende de la matches() método, ¡así que no olvides implementar el polyfill de arriba primero!
Esta variable JavaScript personalizada sube por el DOM hasta que llega al primer elemento de enlace que encuentra ('a'), después de lo cual devuelve este elemento. Si no encuentra un enlace, devuelve undefined en cambio.
10. Configure las cookies del navegador con facilidad
Las cookies son una excelente, aunque algo anticuada, forma de… almacenar información en el navegadorDado que Google Tag Supervisor funciona en el contexto de una página net, es esencialmente sin estado. Por lo tanto, cualquier información que desee conservar de una página a otra debe almacenarse en el servidor o en el propio navegador. Esto último es mucho más fácil de hacer y, con las cookies del navegador, solo es cuestión de agregar un par de líneas de código a su implementación de GTM.
Primero, necesitas una variable JavaScript personalizada. Puedes nombrarla {{Establecer cookie}}Por ejemplo.
perform() {
return perform(identify, worth, ms, path, area) {
if (!identify || !worth) {
return;
}
var d;
var cpath = path ? '; path=' + path : '';
var cdomain = area ? '; area=' + area : '';
var expires = '';
if (ms) {
d = new Date();
d.setTime(d.getTime() + ms);
expires = '; expires=' + d.toUTCString();
}
doc.cookie = identify + "=" + worth + expires + cpath + cdomain;
}
}
Esta variable de JavaScript personalizada devuelve una función que toma cinco parámetros:
-
nombre (obligatorio): el nombre de la cookie (cadena)
-
valor (obligatorio): el valor de la cookie (cadena)
-
EM: tiempo de expiración de la cookie en milisegundos. Si no se configura, se utiliza de forma predeterminada una cookie de sesión (caduca cuando se cierra el navegador).
-
camino: la ruta de la cookie. Si no se configura, se toma como valor predeterminado la ruta de la página precise.
-
dominio: el dominio de la cookie. Si no se configura, el valor predeterminado es el dominio precise.
Para utilizar la cookie, invoque la cookie con:
{{Set Cookie}}('check', 'true', 10000, '/', 'simoahava.com');
El código anterior, cuando se ejecuta en GTM, establece una cookie con el nombre "check"valor "true"tiempo de expiración de diez segundos y se establece en la raíz de la simoahava.com dominio.
Con este asistente, configurar cookies es muy fácil. Recuerda que luego puedes usar el práctico Cookie de origen variable en GTM para recuperar valores de las cookies establecidas.
Resumen
Aquí enumeré 10 trucos de JavaScript que uso (casi) todo el tiempo. Hay mucho más en JavaScript, pero con estos métodos puedes empezar a hacer que tu torpe implementación de Google Tag Supervisor sea cosa del pasado.
¿Tienes algún método, consejo o truco que te guste y que quieras compartir? Hazlo en los comentarios a continuación.