Añadir Adobe Analytics

La configuración de la extensión, que administra la configuración de biblioteca principal de AppMeasurement.js y puede configurar variables globales.

Acciones de reglas para hacer lo siguiente:

1. Configurar variables
2. Borrar variables
3. Enviar la señalización de Analytics

Ir a Extensiones > Catálogo

Localice la extensión de Adobe Analytics

Haga clic en Instalar

En Administración de biblioteca > Grupos de informes, escriba los identificadores de los grupos de informes que desee usar en cada entorno de etiquetas. Si los usuarios tienen acceso a Adobe Analytics, tenga en cuenta que cuando empiece a escribir en el cuadro, verá una lista previamente rellenada de todos los grupos de informes. (Está bien utilizar un grupo de informes para todos los entornos en este tutorial, pero en la vida real le recomendamos utilizar grupos de informes independientes, como se muestra en la imagen siguiente)

En General > Servidor de seguimiento, ingrese su servidor de seguimiento, por ejemplo tmd.sc.omtrdc.net. Introduzca el servidor de seguimiento SSL si su sitio es compatible con https://.

.

En la sección Variables globales, en Configuración adicional, establezca la variable Nombre de página con el elemento de datos Page Name. Haga clic en el para abrir el modal y elegir el elemento de datos de la página Page Name.

Haga clic en Guardar en biblioteca

.

Vaya a la sección Reglas en el panel de navegación izquierdo y luego haga clic en Agregar regla

Asigne un nombre a la regla All Pages - DOM Ready.

Haga clic en Eventos > Agregar para abrir la pantalla de Event Configuration

Seleccione Tipo de evento > DOM Ready (tenga en cuenta que el orden de la regla es "50").

Haga clic en Conservar cambios

En Acciones (Actions), haga clic en el para añadir una acción nueva.

Seleccione Extensión > Adobe Analytics

Seleccione Tipo de acción > Enviar señalización

Deje Tracking configurado como s.t(). Si desea realizar una llamada a s.tl() en una regla de evento de clic, también puede hacerlo usando la acción “Enviar señalización”.

Haga clic en el botón Conservar cambios

Haga clic en Guardar en biblioteca y compilar

Abra el sitio web de Luma en el explorador Chrome.

Haga clic en el icono de Debugger para abrir Adobe Experience Cloud Debugger

Asegúrese de que Debugger asigne la propiedad de etiqueta a su entorno de desarrollo, tal como se describe en la lección anterior

Haga clic para abrir la pestaña de Analytics.

Amplíe el nombre del grupo de informes para mostrar todas las solicitudes realizadas.

Confirme que la solicitud se ha activado con la variable y el valor del nombre de la página.

Haga clic en Elementos de datos en el panel de navegación izquierdo

Haga clic en Agregar elemento de datos

Asigne un nombre al elemento de datos Page Type.

Seleccione Tipo de elemento de datos > Variable JavaScript

Usar digitalData.page.category.type como nombre de variable de JavaScript

Compruebe las opciones Limpiar texto y Forzar minúsculas

Haga clic en Guardar en biblioteca

Haga clic en Elementos de datos en el panel de navegación izquierdo

Haga clic en Agregar elemento de datos

Asigne un nombre al elemento de datos Product Id.

Seleccione Tipo de elemento de datos > Variable JavaScript

Usar digitalData.product.0.productInfo.sku como nombre de variable de JavaScript

Compruebe las opciones Limpiar texto y Forzar minúsculas

Haga clic en Guardar en biblioteca

Vaya a la página Extensiones > Catálogo.

Busque la extensión Adobe Analytics Product String mediante los servicios de Adobe Consulting y haga clic en Instalar

Dedique un momento a leer las instrucciones.

Haga clic en Guardar en biblioteca

.

Vaya a la sección Reglas en el panel de navegación izquierdo y luego haga clic en Agregar regla

Asigne un nombre a la regla Product Details - DOM Ready - 40.

Haga clic en Eventos > Agregar para abrir la pantalla de Event Configuration

Seleccione Tipo de evento > DOM Ready

Establezca Order en 40, de modo que la regla se ejecute antes de la regla que contiene la acción Analytics > Send Beacon

Haga clic en Conservar cambios

En Condiciones, haga clic en para abrir la pantalla de Condition Configuration

1. Seleccione Tipo de condición > Comparación de valor

2. Utilice el selector de elementos de datos y seleccione Page Type en el primer campo.

3. Seleccione Contiene de la lista desplegable de operadores de comparación

4. En el siguiente tipo de campo product-page (es la parte única del valor de tipo de página extraído de la capa de datos en PDP).

5. Haga clic en Conservar cambios

   

En Acciones (Actions), haga clic en el para añadir una acción nueva.

Seleccione Extensión > Cadena de producto de Adobe Analytics

Seleccione Tipo de acción > Definir s.products

En la sección Evento de comercio electrónico de Analytics, seleccione prodView

En la sección Variables de capa de datos para datos de producto, use el selector de elementos de datos para elegir el elemento de datos Product Id

Haga clic en Conservar cambios

En Acciones (Actions), haga clic en el para añadir una acción nueva.

Seleccione Extensión > Adobe Analytics

Seleccione Tipo de acción > Establecer variables

Seleccione eVar 1 > Definir como e introduzca product detail page

Establezca event1 y deje los valores opcionales en blanco.

En Eventos, haga clic en el botón Agregar otro

Configure el evento prodView y deje los valores opcionales en blanco

Haga clic en Conservar cambios

Haga clic en Guardar en biblioteca y compilar

Abra el sitio web de Luma en el explorador Chrome.

Vaya a cualquier página de detalles del producto.

Haga clic en el icono de Debugger para abrir Adobe Experience Cloud Debugger

Haga clic en la pestaña Analytics.

Amplíe su grupo de informes.

Observe las variables de detalles de producto que ahora se encuentran en Debugger, concretamente que se ha configurado eVar1 en “página de detalles de producto”, que la variable Events se ha configurado en “event1” y “prodView”, que la variable de productos se ha configurado con el ID del producto que está viendo y que el Nombre de página (Page Name) sigue incluyendo la extensión.

Vaya a la sección Reglas en el panel de navegación izquierdo y luego haga clic en Agregar regla

Asigne un nombre a la regla Homepage - Featured Products enters Viewport.

Haga clic en Eventos > Agregar para abrir la pantalla de Event Configuration

Seleccione Tipo de evento > Entra a la ventanilla. Así se muestra un campo en el que debe introducir el selector de CSS que identificará el elemento de la página que debería activar la regla cuando entre a la vista en el navegador.

Vuelva a la página principal de Luma y desplácese hasta la sección Productos destacados.

Haga clic con el botón derecho en el espacio entre el título "PRODUCTOS DESTACADOS" y los elementos de esta sección y seleccione Inspect en el menú contextual. Así puede acercarse a lo que busca.

Justo por ahí, posiblemente justo debajo de la sección seleccionada, está buscando un elemento div con class="we-productgrid aem-GridColumn aem-GridColumn--default--12". Busque este elemento.

Haga clic con el botón derecho en este elemento y seleccione Copiar > Selector de copia

Vuelva a las etiquetas y pegue este valor del portapapeles en el campo denominado Elements matching the CSS selector.

1. Aparte, le corresponde decidir cómo identificar los selectores de CSS. Este método es poco fiable, ya que ciertos cambios en la página podrían inhabilitar dicho selector. Tenga esto en cuenta esto cuando use cualquier selector de CSS en etiquetas.

Haga clic en Conservar cambios

En Condiciones (Conditions), haga clic en el para añadir una nueva condición.

Seleccione Tipo de condición > Comparación de valor

Utilice el selector de elementos de datos y seleccione Page Name en el primer campo.

Seleccione Igual a en la lista desplegable de operadores de comparación

en el siguiente tipo de campo content:luma:us:en (es el nombre de la página principal tal como se extrae de la capa de datos; solo queremos que esta regla se ejecute en la página principal).

Haga clic en Conservar cambios

En Acciones (Actions), haga clic en el para añadir una acción nueva.

Seleccione Extensión > Adobe Analytics

Seleccione Tipo de acción > Establecer variables

Configure eVar3 como Home Page - Featured Products.

Configure prop3 como Home Page - Featured Products.

Configure la variable Events como event3.

Haga clic en Conservar cambios

En Acciones (Actions), haga clic en el para añadir otra acción nueva.

Seleccione Extensión > Adobe Analytics

Seleccione Tipo de acción > Enviar señalización

Elija la opción de seguimiento s.tl()

En el campo Nombre del vínculo, escriba Scrolled down to Featured Products. Este valor se colocará en el informe de vínculos personalizados de Analytics.

Haga clic en Conservar cambios

Haga clic en Guardar en biblioteca y compilar

Abra el sitio de Luma en el navegador Chrome y asegúrese de que se encuentra en la parte superior de la página principal.

Haga clic en el icono de depurador para abrir Adobe Experience Cloud Debugger

Haga clic en la pestaña Analytics.

Amplíe las visitas de su grupo de informes.

Observe la visita individual de vista de página normal para la página principal con el nombre de la página, etc., (pero nada en eVar3 o prop3).

Con Debugger abierto, desplácese hacia abajo por el sitio hasta que vea la sección Productos destacados

Vuelva a ver Debugger y debería haber aparecido otra visita de Analytics. Esta visita debe tener los parámetros asociados con la visita de “s.tl()” configurada, concretamente:

1. LinkType = "link_o" (lo que significa que la visita es una visita de vínculo personalizado, no una visita de vista de página).

2. LinkName = "Scrolled down to Featured Products"

3. prop3 = "Home Page - Featured Products"

4. eVar3 = "Home Page - Featured Products"

5. Events = "event3"

   

Vaya a Extensiones > Instaladas

En la extensión de Adobe Analytics, haga clic en Configurar

En Administración de biblioteca, seleccione la casilla denominada Make tracker globally accessible. Como puede ver en la ventana de ayuda, esto dota al seguimiento de un alcance global en “window.s”, lo que resulta importante cuando se hace referencia a él en el JavaScript del cliente.

Sin salir de la extensión de Analytics, desplácese hacia abajo y amplíe la sección titulada Configure Tracker Using Custom Code.

Haga clic en Abrir editor

Pegue el siguiente código en el editor de código:

/* Plugin Config */
s.usePlugins=true
s.doPlugins=function(s) {
/* Add calls to plugins here */
}

Mantenga esta ventana abierta para el paso siguiente.

Copie el siguiente código

/* Adobe Consulting Plugin: getValOnce v2.01 */
s.getValOnce=function(vtc,cn,et,ep){if(vtc&&(cn=cn||"s_gvo",et=et||0,ep="m"===ep?6E4:864E5,vtc!==this.c_r(cn))){var e=new Date;e.setTime(e.getTime()+et*ep);this.c_w(cn,vtc,0===et?0:e);return vtc}return""};

Péguelo en la ventana de código de la extensión de Analytics (si aún no la ha abierto, vuelva a hacerlo según el paso anterior), completamente por debajo de la función “doPlugins” (no dentro de ella).

Copie el siguiente código:

s.campaign = s.Util.getQueryParam("cid");

Péguelo en la función “doPlugins”. Así se busca un parámetro llamado cid en la dirección URL de la página actual y se coloca en la variable “s.campaign”.

Para llamar a la función “getValOnce”, copie el código siguiente y péguelo justo debajo de la llamada a “getQueryParam”:

s.campaign=s.getValOnce(s.campaign,'s_cmp',30);

Este código se asegurará de que no se envíe el mismo valor más de una vez durante 30 días (consulte la documentación para ver formas de personalizar este código según lo que necesite).

Guardar la ventana de código

Haga clic en Guardar en biblioteca y compilar

Abra el sitio web de Luma en el explorador Chrome.

Haga clic en el icono de Debugger para abrir Adobe Experience Cloud Debugger

Haga clic en la pestaña Analytics.

Amplíe su grupo de informes.

Puede ver que la visita de Analytics no tiene una variable de campaña.

Deje Debugger abierto, vuelva al sitio de Luma y añada ?cid=1234 a la dirección URL y, a continuación, pulse Intro para actualizar la página con esa cadena de consulta incluida.

Compruebe Debugger y confirme que hay una segunda solicitud de Analytics con una variable de campaña configurada como 1234.

Vuelva y actualice la página de Luma con la cadena de consulta aún en la dirección URL.

Compruebe la siguiente visita en Debugger; la variable de campaña no debería estar presente, ya que el complemento “getValOnce” se ha asegurado de que no se duplique y parezca que otra persona entró desde el código de seguimiento de campaña.

ADEMÁS: Puede probar esto una y otra vez cambiando el valor del parámetro cid en la cadena de consulta. La variable de campaña debe estar ahí únicamente si es la primera vez que ejecuta la página con dicho valor. Si no ve el valor de campaña en Debugger, cambie el valor de cid en la cadena de consulta de la URL y pulse Enter para volver a verlo en Debugger.