Grabar iframes en Session Replay 2.0

Una de las últimas características disponibles en Yandex Metrica es la grabación de iframes en Session Replay (grabación de sesiones).

Para que puedas ver el contenido del iframe en la grabación de sesiones, es necesario que la página contenedora del iframe y la página que se muestra en el iframe tengan el mismo código de seguimiento de Yandex Metrica.

La página que se muestra en el iframe contará como una página vista en los informes de Metrica. Si no quieres que esa página se tenga en cuenta como una página individual (ya se está mostrando en el iframe y registrará como página vista la que lo contiene), puedes inicializar el código de seguimiento de Metrica en el contenido del iframe con el parámetro defer: false, para así evitar que al inicializar el código envíe la página vista por defecto.

En esta captura de pantalla se puede observar cómo las páginas mostradas dentro del iframe, sin el parámetro defer: false, se registran como página vista, sumando en el total de páginas vistas en la sesión, con un tiempo en la página de 0:00 segundos. Ya es decisión tuya si las excluyes como página vista o no.

Y en este vídeo se ve el resultado de un pequeño experimento que carga páginas en un iframe, insertando el código de seguimiento con Google Tag Manager y/o Yandex Metrica, con y sin el parámetro defer. Las páginas en iframe sin código de seguimiento de Metrica, no quedaron grabadas en Session Replay, y las que no tenían el parámetro defer se registraron como página vista en la sesión.

Plantilla de Yandex Metrica para GTM

Las plantillas personalizadas son una de las últimas características que han aparecido en Google Tag Manager. Y de haber aparecido un par de meses antes, me hubieran ahorrado una cantidad de tiempo enorme implementando Yandex.Metrica en un proyecto reciente.

La plantilla sobre la que trata este artículo es una plantilla para implementar el código de seguimiento de Yandex.Metrica a través de Google Tag Manager. Su interfaz está en español y tiene casi todas las opciones y características que tiene disponibles Metrica para su código de seguimiento:

  1. Inicialización
  2. Hit / Página vista
  3. Objetivo
  4. Enlace saliente
  5. Descarga de fichero
  6. Parámetros de sesión
  7. ID de usuario
  8. Parámetros de usuario

Unos muy buenos recursos que me han ayudado son la Custom templates quick start guide, de Google; la Custom Templates Guide For Google Tag Manager, de Simo Ahava; y la Google Tag Manager Custom Template – Yandex Metrica, de David Vallejo (en inglés, disponible también en GoogleTagManagerTemplates de GitHub, donde supongo que se irá actualizando, además de recoger en ese repositorio otras muchas plantillas).

Puedes descargar la plantilla para Yandex.Metrica con este enlace, y si necesitas ayuda para importarla en tu contenedor de GTM, puedes echar un vistazo a este tutorial de introducción a las plantillas personalizadas.

1. Inicialización

Método: init

Para inicializar el código de seguimiento de Metrica. Se pueden configurar las principales opciones y características sin tener que editar el contador en la administración de nuestra cuenta de Metrica. No obstante, hay algunas cosas que deberías dejar configuradas cuando crees el contador y otras que tendrás que hacer impepinablemente en la interfaz de Metrica.

Te recomiendo que en la configuración de tu contador dejes marcadas las opciones para la grabación de sesiones, envío de datos de comercio electrónico y divisa por defecto tal como lo necesites. Respecto a la grabación de sesiones, tienes que usar Session Replay 2.0, ya que esta plantilla no es compatible con el código anterior de Metrica. También has de indicar si quieres grabar las pulsaciones de teclado en la grabación de sesiones (siempre lo puedes desactivar de forma específica usando el CSS que indica Metrica para estos casos).

Para habilitar los informes de comercio electrónico en Metrica, tienes que habilitar esta opción en el código de seguimiento, y además incluir en el código de tu página el dataLayer (que puede ser el mismo que uses para Google Tag Manager / Google Analytics).

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
</script>

Filtros y objetivos, lógicamente, los tienes que seguir creando desde la interfaz de Metrica, así como exclusión de visitas propias o la activación y gestión de las notificaciones que puedes tener sobre el estado del sitio web configurado.

Sobre el debug de Yandex.Metrica, lo puedes activar en las opciones de inicialización, pero solo funcionará si el contenedor de GTM está en modo de vista previa.


2. Hit / Página vista

Método: hit

Para enviar páginas vistas / páginas virtuales. El único parámetro obligatorio es el de la URL de la página que envías.


3. Objetivo

Método: reachGoal

Envia información sobre la consecución de un objetivo. Previamente lo has tenido que definir en la interfaz de Metrica. Cuidado con el nombre del objetivo, ha de coincidir con lo que hayas puesto en Metrica. Importe y divisa son opcionales, en las divisas he añadido Euro, Dólar americano, Rublo y Libra esterlina (puedes añadir lo que necesites editando la plantilla o vía variable de GTM).

Si se trata de un objetivo de comercio electrónico (venta), puedes enviar el ID del objetivo usando el dataLayer, no hace falta usar reachGoal. En este caso, no se usa el nombre del objetivo, si no el ID numérico del objetivo (lo obtienes igualmente de la interfaz de Metrica).


4. Enlace saliente

Método: extLink

Si has configurado el código de seguimiento para que registre enlaces salientes, puede que no uses esta opción, aunque la tienes disponible para enviar a Metrica datos de enlaces externos que puedas usar vía ajax o técnicas similares. El único parámetro obligatorio es la URL del enlace externo. Si no pasas el título de la página, Metrica registrará document.title como valor por defecto.


5. Descarga de fichero

Método: file

Como el método anterior, si has configurado el registro de descarga de ficheros en el código de seguimiento de Metrica, puede que no necesites esta opción. En la configuración del código de seguimiento puedes añadir extensiones de fichero que quieras registrar de forma automática, si la que necesites no está incluida en las numerosas extensiones de fichero que registra Metrica por defecto.


6. Parámetros de sesión

Método: params

Los parámetros de sesión están disponibles como opciones en los métodos init, hit, reachGoal, file y extLink. Puedes usar hasta 10 niveles en los parámetros de sesión, aunque tendrás que echarle algo de imaginación para usar más de 2 niveles con la tabla que te permite crear GTM.


7. ID de usuario

Método: setUserID

Fácil. Enviar el ID de usuario interno que utilices en tu sitio web. Puedes enviarlo en cualquier momento durante una sesión para asociar el clientID de Metrica con el ID de usuario que especifiques.


8. Parámetros de usuario

Método: userParams

Metrica permite pasar parámetros de usuario y recomienda pasar datos de usuario que no cambien de una sesión a otra y que no contengan datos personales como el nombre del usuario. Para comprender un poco mejor la diferencia entre parámetros de usuario y parámetros de sesión, puedes echar un ojo a esta página donde explican cómo se procesan y almacenan los datos.

¿Y el resto de métodos?

Del resto de métodos (getClientID, addFileExtension y notBounce), el único que no está disponible en esta plantilla es getClientID. Los otros dos, addFileExtension y notBounce he decidido incluirlos como opciones en la configuración para la inicialización del código de seguimiento y se ejecutan, en caso de estar configurados, en el momento de inicializar el código de Yandex Metrica.

Cómo hacer debug en Yandex Metrica

Si trabajas con Yandex Metrica, es posible que necesites comprobar rápidamente si tu código de seguimiento funciona correctamente, especialmente si mandas parámetros de usuario o parámetros de sesión. Una forma sencilla de hacerlo es añadir esta variable a la URL del sitio con el que estés trabajando:

?_ym_debug=1 // si no tienes variables en la URL
&_ym_debug=1 // si tienes otras variables en la URL

Así, verás en la consola del navegador el resultado de la comunicación con Metrica:

En esta captura de pantalla, tomada en la cuenta demo de Yandex Metrica, se ve cómo envía parámetros de sesión para indicar si el usuario tiene el menú lateral recogido o desplegado (luego todos estos parámetros están disponibles en los informes). En la primera de las líneas que se ve en la captura, comprobamos el pageview que envía al cargar la página.

Yandex Metrica cumple 10 años

Yandex Metrica, el producto para analítica web de Yandex, está de cumpleaños. Como dicen en la página que dedican a esta ocasión, ya son 10 años ayudando a crecer a los negocios online.

Por cierto, en esa página, además de los hitos más relevantes que han sucedido en este tiempo, te proponen un test de conocimientos sobre analítica para que descubras qué tipo de analista eres. ¿Te animas a hacerlo?

La nueva grabación de sesiones de Yandex Metrika

Hace ya unos cuantos meses que Yandex anunciaba una beta (cerrada, inicialmente) de su Webvisor (herramienta incluida en Yandex Metrika que graba las sesiones de los usuarios que visitan nuestro sitio web). Y aunque sigue como beta, hace tiempo que dejó de estar cerrada, tenía pendiente escribir algo sobre este nuevo Webvisor 2.0

Bueno, no es más que mi impresión personal después de haber estado usándola durante estos últimos meses. Y la impresión es que ha mejorado muchísimo. En algunos de mis proyectos no se llegaba a reproducir bien la sesión, sobre todo en proyectos que usan ventanas modales y contenido dinámico basado principalmente en jQuery y Ajax. Pero parece que Yandex se ha puesto las pilas y la mejora, como decía, es más que notable, tanto en la interfaz como en la reproducción de la sesión.

Para usar la nueva versión del Webvisor, tienes que actualizar la configuración de Session Replay y actualizar también el código de seguimiento en tu sitio web (es prácticamente el mismo, solo cambian tres líneas). Con esta nueva versión ya no es necesario configurar la forma en que Metrika graba las páginas.

Configuración del Webvisor “clásico”

 

Configuración del Webvisor 2.0

Si eres de los que usa Yandex Metrika por los mapas, análisis de formularios o grabación de sesiones y aún no te has pasado a Webvisor 2.0, te recomiendo que lo hagas sin dudarlo.

Invalid response status: 307 con PayPal IPN Listener

Si usas la librería PayPal IPN Listener (https://github.com/Quixotix/PHP-PayPal-IPN) en algún proyecto, es posible que te haya dejado de funcionar la comunicación con PayPal y que encuentres en el log de errores una línea como esta:

[28-Jun-2018 18:12:04 Europe/Madrid] Invalid response status: 307

En junio de 2018 PayPal hizo efectivos una serie de cambios en sus servicios, y además de necesitar una URL para tu IPN que responda bajo HTTPS, tendrás que hacer este cambio para resolver el problema del 307.

En el fichero ipnlistener.php tendrás que modificar las líneas 71 y 72 (si no son estas mismas, por ahí andarán) por estas:

const PAYPAL_HOST = 'ipnpb.paypal.com';
const SANDBOX_HOST = 'ipnpb.sandbox.paypal.com';

Al menos en mi caso, el problema era este. La URL por defecto es www.paypal.com, pero PayPal recomienda usar ipnpb.paypal.com, e intuyo que ese 307 es la redirección de www a ipnpb.

Un consejo adicional para que nos apliquemos los que aún usamos PayPal IPN Listener es que actualicemos código, pues este recurso tiene ya unos cuantos años y tiene pinta de haber sido abandonado. ¿Qué alternativa a PayPal IPN Listener recomendarías?

Usar Internet Explorer en Mac

Si diseñas o desarrollas en entorno web y trabajas con Mac, seguro que te has encontrado con el problema de probar tu trabajo con Internet Explorer, ese navegador que casi siempre ha ido por libre en estos temas.

Casi con toda probabilidad has terminado usando Parallels o VMware, instalando alguna versión de Windows y a partir de ahí, a probar con Explorer (la versión que venga por defecto o alguna actualización que ya corre por tu cuenta).

Si has pasado por esto, una de las formas (si no la más) sencilla es descargarte una imagen para Parallels o VMware directamente desde el sitio web de Microsoft (Developer technologies).

Microsoft Virtual Machines

Como ves en la imagen, tienes disponibles varias versiones de Windows e Internet Explorer, incluso Edge. Solo has de elegir la que quieras usar, elegir tu plataforma (para Mac, Parallels o VMware), y lo tienes hecho. Y legal, no tendrás que pedir a nadie una copia de Windows. Estas máquinas virtuales expiran a los 90 días, pero ahí tienes tiempo más que suficiente para probar tu proyecto en ese entorno.

¡Comparte otras opciones si has usado algo alternativo!

 

 

Yandex.Disk se integra con Microsoft Office Online

Yandex Disk — Microsoft Office OnlineGran sorpresa la que me encuentro al entrar en Yandex Disk, y es que se ha integrado con la suite de Microsoft Office Online, permitiendo crear documentos de Word, Excel y PowerPoint directamente desde nuestra cuenta de Yandex Disk.

Más allá de la simpatía que pueda tener por Yandex, lo cierto es que siempre me ha gustado Yandex Disk, por los 10GB gratuitos que ofrece desde el principio, por los precios de ampliación que tiene, y porque la evolución que ha llevado en el último año —en lo que respecta funciones y servicios integrados— lo ha puesto en algunos aspectos a la altura de algunas herramientas (comerciales y gratuitas) similares.

Yandex Disk — Microsoft Excel

Poder importar, crear, editar y compartir ficheros de Office desde Disk, es un paso enorme.

Si no tienes cuenta de Yandex Disk, no esperes a probarla. Su cliente web es fantástico, tiene versión para escritorio y también para dispositivos móviles (iOS, Android, Windows)… ¡y para Smart TV también!

 

Comercio electrónico mejorado con Yandex Metrika

metrika-ecommerce-reports

Yandex sigue actualizando su herramienta de analítica web (Yandex Metrika), y en esta ocasión añade funciones e informes de comercio electrónico mejorado (Enhanced Ecommerce), algo que ya ofrecía Google Analytics, pero que desde finales de septiembre también tenemos en Metrika.

Me parece una actualización bastante buena de Metrika, por un par de motivos:

  1. No tenemos que recurrir a Analytics para obtener esta información
  2. Su funcionamiento se basa en el dataLayer que usa Google Tag Manager

Creo que Yandex acierta con este planteamiento. Si ya tienes implementado el comercio electrónico mejorado en tu sitio con Google Tag Manager, enviar estos mismos datos a Metrika es tan simple como marcar la opción correspondiente en la configuración del contador.

metrika-ecommerce-datalayer

Ahora tenemos una nueva categoría de informes, dentro de la cual encontramos todo lo relacionado con el comercio electrónico mejorado (enhanced ecommerce). Es posible (y obvio) que no muestre información, pues esta característica se añadió a finales de septiembre. En mis contadores veo dos fechas diferentes, 23 y 24 de septiembre, para la disponibilidad de estas métricas, algo secundario.

metrika-ecommerce-reports-detail

De momento, la información sobre esta nueva función de Metrika está disponible solo en ruso (https://yandex.ru/support/metrika/data/e-commerce.xml), la ayuda en inglés aún no se ha actualizado y muestra lo que ya son las opciones obsoletas de comercio electrónico en Yandex Metrika.

Un paso más para seguir “invitando” a la gente a adaptar Metrika como herramienta de analítica web, algo que es más que recomendable si Rusia es tu mercado objetivo.

Yandex se hace mayor de edad

Yandex cumple 18 añosEn Yandex están de cumpleaños. Tal día como hoy, hace 18 años, se anunciaba el motor de búsqueda de Yandex (yandex.ru). Un 23 de septiembre de 1997, la empresa CompTek anunciaba su puesta en marcha.

Puedes ver la nota de prensa de Yandex (aquí) o echar un vistazo a cómo pintaba el buscador ruso por aquellos años, usando la herramienta waybackmachine de archive.org (la captura más antigua que tienen es de diciembre de 1998… vaya cómo cambia con los años).