Los widgets de hoy en d铆a son una parte integral de muchos portales grandes, ya que le permiten usar dise帽os de asociaci贸n complejos al tiempo que evitan largos procedimientos de implementaci贸n. Al mismo tiempo, el an谩lisis web de widgets es interesante para todas las partes, pero en el caso de iFrame, surgen dificultades para transferir el 100% de los datos a los participantes de la asociaci贸n. 驴Cu谩les son estas dificultades y c贸mo logramos superarlas? Me gustar铆a decir en este art铆culo. En primer lugar, ser谩 interesante para todos los involucrados en el desarrollo e implementaci贸n de widgets en iFrame, as铆 como para los analistas atra铆dos.
Primero, un poco de historia. Estamos desarrollando nuestras propias soluciones para la automatizaci贸n en el campo del transporte de pasajeros, as铆 como productos para usar en sitios asociados. Uno de ellos fue el proyecto de reserva automatizada de VIP y salas de negocios en los aeropuertos del mundo y en Rusia, con el objetivo de satisfacer las necesidades de clientes comerciales y premium de varias aerol铆neas. Una base de datos 煤nica de servicios tem谩ticos en varios aeropuertos es de inter茅s principalmente para compa帽铆as asociadas con viajes a茅reos de pasajeros, agencias de viajes en l铆nea, as铆 como agencias de viajes con sitios en Internet. Se cre贸 un widget "VIP-hall" para dichas empresas, que permite a los usuarios de cualquier sitio asociado acceder a esta base de datos.
El widget se instala de forma est谩ndar a trav茅s de iFrame, el socio solo necesita colocar el c贸digo en su sitio web y configurar los par谩metros de apariencia de acuerdo con el concepto de dise帽o general. Como resultado, un m贸dulo para seleccionar y reservar salas VIP en el aeropuerto de inter茅s aparece en el sitio con acceso a servicios premium del aeropuerto, como un servicio de traslado (traslado individual desde la sala al avi贸n), una reuni贸n en la sala con un cartel, acompa帽ar a un empleado y acceso al estacionamiento para VIP clientes El proceso de reserva se lleva a cabo en unos simples pasos, dentro de los cuales el usuario puede variar el contenido del pedido (Fig. 1).
Figura 1 - La apariencia del widget en el sitioDada la variabilidad de los datos de relleno, por supuesto, surge la pregunta de seguir este proceso desde el punto de vista de la anal铆tica. Adem谩s, el an谩lisis web es interesante tanto para el
propietario del widget como para el
socio que lo configura, por lo que durante el proceso de desarrollo apareci贸 la tarea de rastrear eventos dentro del widget y enviarlos simult谩neamente en dos direcciones:
A. Desde todos los sitios en los que est谩 instalado el widget, hasta los an谩lisis web del propietario (desarrollador).
B. Desde el sitio en el que est谩 instalado un widget en particular, hasta la anal铆tica web del socio.
驴Cu谩l es la dificultad aqu铆? B谩sicamente, el socio toma un 煤nico c贸digo de widget, que no es personalizable para un sitio de socio espec铆fico, pero al mismo tiempo quiere ver informaci贸n en el an谩lisis solo en su widget. La segunda dificultad es que el desarrollador (propietario) del widget debe recibir datos de todos los sitios de socios a la vez en un contador, lo que va en contra del deseo del socio de ver solo su propia informaci贸n. Al final, solo necesita diferenciar entre los datos que el socio debe ver y los que ver谩 el propietario. El problema se resolvi贸 mediante el
Administrador de etiquetas de Google (en adelante, GTM).
Esta herramienta es ampliamente utilizada para el an谩lisis web y la gesti贸n de etiquetas en los sitios, no tiene sentido describir en detalle el principio de su funcionamiento, para comprenderlo es suficiente para familiarizarse con el concepto de GTM
de otros art铆culos . En este caso, es importante comprender que Google Tag Manager (Fig. 2) le permite consolidar los datos del sitio dentro de sus propios contenedores y distribuirlos a varios contadores de an谩lisis web utilizando las reglas especificadas.
Figura 2: la ventana "Etiquetas" de Google Tag Manager con etiquetas ya configuradas para el widgetPara comenzar, describiremos el algoritmo para resolver este problema, a fin de comprender de inmediato en qu茅 direcci贸n fuimos para lograr el resultado. Entonces
- El socio, como el propietario, quiere rastrear el widget de una o dos formas a la vez, usando Yandex.Metrica o Google Analytics.
- Una soluci贸n satisfactoria debe pasar los datos a 4 contadores: el contador de m茅tricas del propietario, el contador de Google Analytics del propietario, el contador de m茅tricas del socio y el contador de Google Analytics del socio.
- Se instala un 煤nico contenedor de Google Tag Manager dentro del widget, que recopilar谩 todos los datos y los distribuir谩 para que cada participante reciba solo la informaci贸n que necesita.
- Los identificadores de los contadores del propietario se configuran de manera predeterminada, los identificadores del socio se les deben indicar al momento de generar el c贸digo del widget en la oficina del socio para su posterior instalaci贸n en el sitio.
- Dado que la oficina del socio ya est谩 configurada para el socio, los identificadores se pueden configurar y arrojar al widget para que Tag Manager los use.
- Dentro de GTM, los identificadores se sustituyen en los c贸digos para desencadenar eventos objetivo, as铆 como la distribuci贸n de la transmisi贸n de datos por parte del propietario y los contadores asociados.
- En este caso, GTM env铆a todos los datos recopilados a los contadores del propietario, y los datos en el sitio del socio, solo a los contadores del socio, porque al sustituir identificadores, solo se rastrea el sitio especificado por el socio.
Para facilitar la comprensi贸n, damos un diagrama de flujo del proceso (Fig. 3):
Figura 3 - Diagrama del proceso de transferencia de datosPara comenzar, determinaremos que, adem谩s del c贸digo del Administrador de etiquetas de Google, el sitio tambi茅n contiene c贸digos de contador Yandex.Metrica y Google Analytics generados autom谩ticamente. En ellos, al generar c贸digo para el sitio, se reenv铆an los identificadores de contador establecidos por el socio.
Estos c贸digos no se pueden configurar en el widget, ya que las capacidades de GTM le permiten generarlos autom谩ticamente en el sitio como etiquetas apropiadas (tipo - HTML personalizado - Fig. 4), pero en este caso, fue necesario escribir en el c贸digo del widget; algunos eventos en el sitio requieren para que el contador se instale inmediatamente dentro del widget. B谩sicamente se trata de eventos de carga, la aparici贸n de preroll. Si no tiene este tipo de evento, puede generar el c贸digo de contador a trav茅s de GTM:
Figura 4: un ejemplo de transferencia del c贸digo m茅trico al sitio a trav茅s de GTMPara transferir datos a dos contadores a la vez (socio y propietario), debe establecer no dos c贸digos m茅tricos o anal铆ticos diferentes, sino crear un
c贸digo doble especial . Al momento de escribir, los c贸digos correctos se ven as铆 (Fig. 5):
Figura 5 - El uso correcto de los c贸digos duales Metric y GAA continuaci贸n, debe pasar el identificador especificado por el socio al c贸digo del contador. La dificultad aqu铆 es que el c贸digo del widget se genera autom谩ticamente para todos los sitios, mientras que los identificadores ya est谩n configurados en una oficina afiliada separada. Para el reenv铆o correcto, el programador implement贸 la siguiente soluci贸n:
Cuando se inicializa el widget, se crea un iFrame, en cuyos par谩metros se pasan los identificadores de los contadores del socio (los contadores se pasan al src iFrame, despu茅s de lo cual se analizan en el widget desde la ubicaci贸n). iFrame abre la aplicaci贸n de widgets y el enlace del ciclo de vida creado por el widget (SPA) procesa los par谩metros de entrada de los n煤meros de contador antes del montaje, y los n煤meros (identificadores) se almacenan en el almacenamiento local.
La siguiente construcci贸n se utiliza para colocar el c贸digo de Google Analytics en index.html:
<script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-15930803-13'); gtag('config', window[localStorage.getItem('partnerGA')] || 'UA-15930803-14'); </script>
Las secuencias de comandos con la variable src se insertan din谩micamente cuando se inicializan los contadores:
let script = document.createElement('script') script.setAttribute('src', `https://www.googletagmanager.com/gtag/js?id=${ga || 'UA-15930803-14'}`) document.head.insertBefore(script, document.head.firstChild)
Aqu铆, UA-15930803-14 es el contador "contador" del propietario, que se utiliza si el socio no establece el contador. Esta situaci贸n puede ocurrir si el socio no especific贸 los identificadores de los contadores en general, o si solo se especific贸 un identificador; siempre debe haber un c贸digo de reemplazo para que el sitio no encuentre errores de JavaScript asociados con la ausencia de un identificador para la operaci贸n correcta del c贸digo de transmisi贸n de cualquier evento. UA-15930803-13 en este caso es el identificador principal del Propietario, al que llegan los datos en cualquier caso y desde cualquier sitio.
De manera similar a GA, se genera el c贸digo Yandex.Metrica, que utiliza el identificador especificado de la m茅trica del Propietario, el identificador sustituto del contador del propietario de forma predeterminada y el dise帽o para transmitir el identificador del socio. El c贸digo se genera de acuerdo con el esquema que se muestra en la Fig. 5 utilizando las estructuras del ejemplo anterior.
Despu茅s de los c贸digos de contador, debe reenviar los identificadores establecidos por el socio a los identificadores del Administrador de etiquetas de Google. Dentro del contenedor, ya se utilizar谩n como variables internas, cuyos valores se pueden suministrar a los eventos generados.
Para GTM, la t茅cnica m谩s utilizada son las variables de nivel de datos (dataLayer). La capa de datos es una variable de JavaScript cuya inicializaci贸n se describe autom谩ticamente dentro del contenedor del Administrador de etiquetas de Google. Al usarlo, puede transferir eventos que ocurren en el sitio web como eventos, o establecer sus propias variables para GTM. Esto se hace usando la construcci贸n
dataLayer.push('_': '_');
Se activa despu茅s del anuncio del c贸digo GTM en el sitio. Sin embargo, en nuestro caso, la variable de nivel de datos no funcion贸, quiz谩s el problema sea la dificultad de trabajar espec铆ficamente con el iframe. Si configura la construcci贸n push () autom谩ticamente, el contenedor no recibe variables y, en este caso, quer铆amos tal implementaci贸n de la tarea. Si intenta establecer la variable de nivel de datos manualmente (por ejemplo, con cualquier clic en el sitio), el reenv铆o de la variable pasa normalmente.
Para no perder tiempo analizando el proceso, utilizamos una soluci贸n alternativa: crear variables globales de JavaScript a trav茅s de
localStorage .
La propiedad localStorage le permite almacenar variables con los valores dados sin estar vinculado a la p谩gina abierta del sitio, y los datos dentro de este repositorio no se pueden eliminar simplemente. En consecuencia, los identificadores de contador de socios se enviaron utilizando los siguientes dise帽os:
localStorage.setItem('partnerMetrika1', ''); localStorage.setItem('partnerMetrika2', 'yaCounter'); localStorage.setItem('partnerGA', 'UA--');
Aqu铆, la primera construcci贸n transmite el n煤mero m茅trico del socio en s铆, la segunda construcci贸n transmite el valor colectivo yaCounter para la conveniencia de crear la etiqueta "Evento" en el Administrador de etiquetas de Google (m谩s sobre esto m谩s adelante), y el tercero, el identificador de Google Analytics.
Esto completa la transferencia de datos y configura el propio GTM.
Primero, decidamos c贸mo funciona el Administrador de etiquetas de Google. Presenta 3 niveles de interacci贸n:
Etiqueta . Esto es parte del c贸digo que se puede alojar en un sitio con GTM instalado y se puede ejecutar como cualquier otro c贸digo, cambiando el contenido del sitio o transfiriendo datos a contadores de an谩lisis web.
La etiqueta se activa si se cumple una condici贸n en el sitio.
Disparador Esta es en realidad una condici贸n, cuyo cumplimiento hace que la etiqueta se active. Esto puede ser un evento en un sitio, un cambio en el valor de las variables o una acci贸n est谩ndar, como un clic o una visita a la p谩gina.
Variable Contiene algunos valores que se pueden transmitir de varias maneras y se utiliza como proveedor de datos para etiquetas o un marcador de condici贸n.
El contenido de las variables activa el activador, y el activador activa a su vez la etiqueta correspondiente. Los identificadores de los contadores afiliados se configuran exactamente como variables, a partir de esto vale la pena comenzar la formaci贸n de datos en el contenedor GTM.
Creamos tres variables principales del tipo "C贸digo JavaScript nativo" (Fig. 6):
Figura 6: un ejemplo de una variable que toma el identificador de m茅trica de afiliadoAqu铆 el valor de la variable = el valor que tomamos de localStorage.
Ahora, si GTM accede a la variable, recibir谩 su valor: el identificador de la m茅trica asociada. Del mismo modo, creamos variables para el n煤mero m茅trico afiliado y el identificador de Google Analytics asociado.
驴Para qu茅 se usan estas variables? Resuelven el problema de enviar datos sobre la activaci贸n de eventos en el sitio a contadores afiliados. Google Tag Manager tiene un procedimiento est谩ndar para transferir objetivos a Google Analytics, donde puede usar el valor de una variable como identificador de contador. Y para la m茅trica, se usa una etiqueta en forma de c贸digo HTML personalizado que contiene la m茅trica est谩ndar de JavaScript:
yaCounterXXXXXX.reachGoal('TARGET_NAME');
Aqu铆 TARGET_NAME es el nombre interno del evento objetivo para la m茅trica (dichos objetivos se crean en la configuraci贸n del contador a trav茅s del tipo "evento JavaScript"), y es el n煤mero del contador.
Por lo tanto, creamos etiquetas correspondientes para diferentes tipos de contadores.
Para Google Analytics:El tipo de etiqueta es "Universal Analytics", el identificador de seguimiento es de nuestra variable.
Figura 7: un ejemplo de configuraci贸n de una etiqueta que pasa datos a Google Analytics.Aqu铆, Categor铆a y Acci贸n son los valores que Google Analytics debe capturar como par谩metros para activar el objetivo. El ID de seguimiento es una variable definida previamente que toma el identificador de socio de localStorage.
Para Yandex.Metrica:El tipo de etiqueta es "HTML personalizado" utilizando construcciones de JavaScript.
Figura 8 - Un ejemplo de configuraci贸n de una etiqueta que transfiere datos a Yandex.MetricaAqu铆 {{PartnerMetrikaCounter}} es la declaraci贸n interna de la variable que toma el identificador M茅trico asociado de localStorage. Al usar el objeto de ventana, sustituimos el valor de la variable en el c贸digo ejecutable, y en la salida obtenemos yaCounterXXXXXXXX.reachGoal ('widget_loading'); donde widget_loading es el valor que Metric captura como par谩metro de respuesta del objetivo.
Solo queda establecer los desencadenantes para desencadenar las etiquetas correspondientes. Los desencadenantes en nuestro caso son, por ejemplo:
- Eventos para la carga exitosa del widget;
- Eventos de finalizaci贸n exitosa o no exitosa de un paso en un widget;
- Relleno en ciertos campos;
- Selecci贸n de condiciones A o B dentro del widget;
- Interacci贸n con formularios, botones y enlaces.
Adem谩s, en la configuraci贸n de los contadores de Metrics y Google Analytics, solo queda crear los objetivos correspondientes:
Figura 9 - Un ejemplo de establecer una meta en Yandex.Metrica
Figura 10 - Un ejemplo de establecer una meta en Google AnalyticsEl problema est谩 resuelto. Los c贸digos de contador doble sustituyen los valores establecidos por ellos para los identificadores de M茅trica y Anal铆tica del socio, y los valores de los identificadores de propietario permanecen sin cambios. Al mismo tiempo, Google Tag Manager reenv铆a la respuesta de los objetivos correspondientes a los contadores del socio solo si recibe de las variables exactamente los identificadores que el socio espec铆fico especific贸 en su sitio. Paralelamente, GTM env铆a al propietario todos los eventos de destino desde todos los sitios.
Si el socio no especific贸 uno o ambos identificadores, se utilizan los valores predeterminados: identificadores de contadores de prueba, establecidos por el propietario de antemano.