¿Has creado un Extensión de Chrome¿Y ahora te mueres por saber cómo interactúan los usuarios con él? Quizás quieras ver qué funciones se están (o no) utilizando, o quizás simplemente estés interesado en saber si la gente realmente las está usando.
En este artículo, te mostraré cómo configurar Administrador de etiquetas de Googlepara que funcione en la zona de pruebas restringida de la extensión de Chrome. Necesitarás hacer algunos ajustes, pero aún así es perfectamente factible.
Este artículo se inspiró en el de Mike Pantoliano. pregunta en la comunidad de Google+ de Google Tag Supervisor. Gracias Mike!
incógnita
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
Consejo 47: Cómo hacer que Google Tag Supervisor funcione en una extensión de Chrome
Esta solución requiere que su extensión tenga un página emergente. En otras palabras, la extensión debe tener HTML actual que el navegador muestre cuando la activa.
1. Implemente el contenedor del Administrador de etiquetas de Google
Lo primero que deberá hacer es crear un nuevo archivo JavaScript. Puedes hacerlo con cualquier editor de texto. Dentro del archivo, agregue el siguiente código:
(perform(w,d,s,l,i){w(l)=w(l)||();w(l).push({'gtm.begin':
new Date().getTime(),occasion:'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,doc,'script','dataLayer','GTM-XXXXX');
Probablemente reconozca esto como la parte de JavaScript del fragmento de contenedor regular de Google Tag Supervisor.
Estamos usando un archivo JavaScript separado para cargar la biblioteca contenedora, porque el uso de JavaScript en línea es totalmente desaconsejado en las extensiones de Chrome (bueno, casi universalmente de hecho).
Hay dos cosas que deberás modificar en este script.
Primero, necesitas cargar explícitamente el gtm.js biblioteca que utiliza el protocolo HTTPS. Puedes ver este cambio en la línea que tiene j.src="https://www.googletagmanager...". Entonces, lo primero que debe hacer es asegurarse de escribir explícitamente https: en el lugar que le corresponde, en lugar del protocolo relativo predeterminado que utiliza el fragmento.
Lo segundo que debes hacer es cambiar el GTM-XXXXX para que coincida con el recipiente que utilizará. Cosas normales de GTM.
Una vez que haya terminado, guarde el archivo como gtm.js y guárdelo en la carpeta de extensión.
2. Cargue el archivo en su HTML emergente
A continuación, abra el archivo HTML donde está cargada la ventana emergente. Añade el gtm.js archivo que acaba de crear como referencia y colóquelo en . Why? As a result of it doesn’t make sense to load asynchronous libraries wherever else however in particularly because you don’t want to fret about stuff like Search Console verification.
<head>
...
<script kind="textual content/javascript" src="popup.js">script>
<script kind="textual content/javascript" src="gtm.js">script>
head>
<physique>
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-W92WQQ" top="0" width="0" fashion="show:none;visibility:hidden">iframe>
noscript>
...Si realmente quieres, puedes quedarte con el bloque que carga GTM para usuarios sin JavaScript, pero nuevamente estoy luchando por encontrar un caso de uso en el que quieras activar algunos píxeles cuando las personas usan tu extensión de Chrome.
Este cambio en el marcado simplemente ejecuta el JavaScript en el archivo. gtm.jslo que significa que cuando el navegador procesa este HTML, la biblioteca de Google Tag Supervisor también se carga en la extensión.
3. Modificar manifest.json
A continuación, debe agregar un Política de seguridad de contenido a tu extensión manifiesto.json archivo. Básicamente, le estás diciendo a la extensión que las solicitudes a ciertos puntos finales están bien, y la extensión no necesita entrar en pánico cuando se realizan esas solicitudes. Una extensión de Chrome tiene el potencial de hacer todo tipo de cosas viles, por lo que este nivel de seguridad adicional definitivamente está justificado.
En el CSP, deberá indicarle a Chrome que solicita https://www.google-analytics.com y https://www.googletagmanager.com debe permitirse. Si está activando etiquetas a otros puntos finales, también debe incluir aquí sus nombres de host. Solo recuerde que todas las comunicaciones deben realizarse a través de HTTPS, o su extensión informará un error cuando intente cargarla en su navegador.
{
"manifest_version": 2,
"title": "...",
"model": "...",
"content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com; object-src 'self'",
"description": "...",
...
}
4. Modifica tus etiquetas GTM
Finalmente, deberá realizar algunas modificaciones necesarias en las etiquetas de Google Tag Supervisor.
Por cada etiqueta de Google Analytics activada en el contenedor, debe realizar el siguiente cambio.
Agregar checkProtocolTask : false a campos para configurar
Desplácese hacia abajo para Campos para configurary agregue un nuevo campo:
Nombre del campo: checkProtocolTask
Valor: FALSO
Normalmente, Google Analytics requiere que la solicitud a GA se origine desde HTTP o HTTPS. Si las solicitudes provienen de otro lugar, se cancela el proceso. Al configurar el tarea nombrado checkProtocolTask a falso, podemos evitar que se realice esta verificación, ya que la extensión usa la configuración personalizada chrome-extension:// protocolo.
A continuación, en las etiquetas de vista de página, realice el siguiente cambio.
Agregar una costumbre web page a campos para configurar
Desplácese hacia abajo para Campos para configurary agregue un nuevo campo:
Nombre del campo: página
Valor: /alguna-ruta-de-página-personalizada/
Debido a que la página de extensión no tiene una URL adecuada (al menos en el sentido típico), GA no puede descifrar el parámetro Ubicación del documento para la ruta de la página. La ruta de la página es una dimensión obligatoria en todas las solicitudes de Google Analytics, por lo que deberá agregarla manualmente a cada etiqueta que se energetic.
Estas dos modificaciones deben implementarse para que el seguimiento funcione. Para las etiquetas que no son de Google Analytics, es posible que deba realizar modificaciones similares (o adicionales) para habilitarlas en las Extensiones de Chrome.
¡Y eso es todo!
Resumen
¡Espero que esta guía te haya sido útil! Comprender toda la amplitud de seguridad que implementan las extensiones de Chrome puede resultar abrumador, por lo que quizás esto ilumine algunas de las peculiaridades de trabajar en un entorno de espacio aislado.
Si sigue estos pasos, debería poder acumular datos en Google Analytics sobre cómo los usuarios interactúan con su extensión. Sin embargo, recuerde que el HTML solo se representa cuando se hace clic en la ventana emergente para abrirla, y cada vez que el usuario vuelve a hacer clic en la ventana emergente para abrirla, se envía una nueva página vista. ¡Así que puedes usar las páginas vistas como un proxy bastante confiable para las tasas de apertura de extensiones!
En una nota ligeramente relacionada, se me ocurrió que es imposible usar una extensión de Chrome como fantasma para bloquear otras extensiones (debido a la zona de pruebas). Entonces, incluso si el usuario ha bloqueado Google Analytics y Google Tag Supervisor desde su navegador, no se aplicaría a la extensión. ¡Esto es algo que quizás quieras dejar claro en la declaración de privacidad de tu extensión de Chrome!