Añadir un elemento de datos, una regla y una biblioteca
En esta lección, debe crear su primer elemento de datos, regla y biblioteca.
Los elementos de datos y las reglas son los componentes básicos de las etiquetas. Los elementos de datos almacenan los atributos que desea enviar a sus soluciones de marketing y publicidad, mientras que las reglas activan las solicitudes a dichas soluciones en las condiciones adecuadas. Las bibliotecas son los archivos JavaScript que se cargan en la página para realizar todo el trabajo. En esta lección, debe usar los tres para hacer que nuestra página de muestra haga algo.
- El platform launch (lado del cliente) ahora es tags
- El lado del servidor de platform launch ahora es event forwarding
- Ahora, las configuraciones de Edge son datastreams
Objetivos de aprendizaje
Al final de esta lección, debe poder:
- Crear un elemento de datos.
- Crear una regla.
- Crear una biblioteca.
- Añadir cambios a una biblioteca.
- Validar que la biblioteca se esté cargando en el navegador web.
- Utilizar la función “Working Library” para trabajar de forma más eficiente.
Crear elementos de datos para Nombre de página.
Los elementos de datos son las versiones de etiquetas de una capa de datos. Pueden almacenar valores de su propio objeto de capa de datos, cookies, objetos de almacenamiento local, parámetros de cadena de consulta, elementos de página, etiquetas meta, etc. En este ejercicio, creará un elemento de datos para Nombre de página, que utilizará más adelante en las implementaciones de Target y Analytics.
Para crear un elemento de datos
-
En el panel de navegación izquierdo, haga clic en Elementos de datos
-
Debido a que todavía no se ha creado ningún elemento de datos en esta propiedad, aparece un vídeo breve con información adicional sobre este tema. Si lo desea, mire este vídeo.
-
Haga clic en el botón Crear nuevo elemento de datos:
-
Asigne un nombre al elemento de datos, como “
Page Name”. -
Utilice el tipo de elemento de datos de la variable JavaScript para señalar un valor de la capa de datos de la página de muestra:
digitalData.page.pageInfo.pageName. -
Marque las casillas de Forzar valor en minúsculas y Limpiar texto para estandarizar el caso y eliminar espacios superfluos
-
Deje None como la configuración de Duración del almacenamiento, ya que este valor generalmente será diferente en cada página
-
Haga clic en el botón Guardar para guardar el elemento de datos.
Creación de reglas
A continuación, utilizará este elemento de datos en una regla sencilla. Las reglas son una de las funciones más potentes de las etiquetas y le permiten especificar lo que debe suceder a medida que el visitante interactúa con el sitio web. Cuando se cumplen los criterios descritos en las reglas, la regla activa la acción que haya especificado.
Va a crear una regla que envíe el valor del elemento de datos Nombre de página a la consola del navegador.
Para crear una regla
-
En el panel de navegación izquierdo, haga clic en Reglas
-
Debido a que todavía no se ha creado ninguna regla en esta propiedad, aparece un vídeo breve con información adicional sobre el tema. Si lo desea, mire este vídeo.
-
Haga clic en el botón Crear nueva regla:
-
Asigne un nombre a la regla
All Pages - Library Loaded. Esta convención de nombres indica dónde y cuándo se activará la regla, lo que facilita la identificación y reutilización a medida que la propiedad de etiqueta madura. -
En Eventos, haga clic en Agregar. El evento indica a las etiquetas cuándo se debe activar la regla y puede ser muchas cosas, como una carga de página, un clic, un evento de JavaScript personalizado, etc.
-
Como Tipo de evento, seleccione Biblioteca cargada (Principio de página). Tenga en cuenta que cuando seleccione el Tipo de evento, las etiquetas rellenarán previamente un nombre para el evento usando su selección. Tenga en cuenta también que el orden predeterminado para el evento es 50. La ordenación es una práctica funcionalidad de las etiquetas que permite controlar de forma precisa la secuencia de acciones cuando se activan varias reglas mediante el mismo evento. Esta función se utilizará más adelante en el tutorial.
-
Haga clic en el botón Conservar cambios
-
-
Dado que esta regla debe activarse en todas las páginas, deje Condiciones en blanco. Si abre el modal Conditions, verá que las condiciones pueden agregar restricciones y exclusiones en función de una gran variedad de opciones, incluidas direcciones URL, valores de elementos de datos, intervalos de fechas, etc.
-
En Acciones, haga clic en Agregar
-
Seleccione Tipo de acción > Código personalizado, que en este momento es la única opción. Más adelante en el tutorial, al añadir extensiones, habrá más opciones disponibles.
-
Seleccione </> Abrir editor para abrir el editor de código
-
Añada lo siguiente al editor de código. Este código mostrará el valor del elemento de datos Nombre de página en la consola del navegador para que pueda confirmar que funciona:
code language-javascript console.log('The page name is '+_satellite.getVar('Page Name')); -
Guardar el editor de código.
-
En la pantalla de Configuración de acción, haga clic en Conservar cambios
-
Haga clic en Guardar para guardar la regla
En la página Reglas, debería ver la nueva regla:
Guardar los cambios en una biblioteca
Después de configurar una colección de extensiones, elementos de datos y reglas en la interfaz de recopilación de datos, debe empaquetar estas funciones y lógica en un conjunto de código JavaScript que puede implementar en el sitio web para que las etiquetas de marketing se activen cuando los visitantes accedan al sitio. Una biblioteca es el conjunto de código JavaScript que puede hacerlo.
En lecciones anteriores, hemos implementado el código de incrustación del entorno de desarrollo en la página de muestra. Cuando cargó la página de muestra, apareció un error 404 para la URL de código incrustado porque la biblioteca de etiquetas aún no se había creado ni asignado al entorno. Ahora colocará el nuevo elemento de datos y la regla en una biblioteca para que la página de muestra pueda hacer algo.
Para añadir y crear una biblioteca
-
En el panel de navegación izquierdo, haga clic en Flujo de publicación
-
Haga clic en Agregar nueva biblioteca
-
Asigne un nombre a la biblioteca, por ejemplo
Initial Setup -
Seleccione Entorno > Desarrollo
-
Haga clic en Añadir todos los recursos modificados
-
Tenga en cuenta que después de hacer clic en Agregar todos los recursos modificados, las etiquetas resumen los cambios que acaba de realizar.
-
Haga clic en Guardar y generar para desarrollo
Después de unos momentos, el punto de estado cambiará a verde indicando que la biblioteca se ha creado correctamente.
Validación del trabajo
Ahora valide que la regla funciona según lo esperado.
Vuelva a cargar la página de muestra. Si consulta la pestaña Herramientas para desarrolladores -> Red, debería ver unas 200 respuestas para su biblioteca de etiquetas.
Si consulta la Herramientas para desarrolladores -> Consola, debería ver el texto “The page name is home”.
¡Ha creado su primer elemento de datos, su primera regla y su primera biblioteca de etiquetas!
Uso de la función “Working Library”
Cuando se realizan muchos cambios en las etiquetas, resulta incómodo abrir la pestaña Publicación, agregar cambios y crear la biblioteca cada vez que quiere ver el resultado. Después de crear la biblioteca “Initial Setup”, puede utilizar la función “Working Library” para guardar rápidamente los cambios y reconstruir la biblioteca en un solo paso.
Realice un pequeño cambio en la regla “Todas las páginas: Carga de biblioteca”. En el panel de navegación izquierdo, haga clic en Reglas y luego haga clic en la regla All Pages - Library Loaded para abrirla.
En la página Edit Rule, haga clic en el menú desplegable Biblioteca de trabajo y seleccione su biblioteca Initial Setup.
Una vez seleccionada la biblioteca, debería ver que el botón Guardar tiene ahora el valor predeterminado Guardar en biblioteca. Cuando realice un cambio en las etiquetas, puede utilizar esta opción para agregar automáticamente el cambio directamente a su Working Library o reconstruirlo.
Pruébela. Abra la acción Código personalizado y agregue dos puntos después del texto “The page name is”, de modo que todo el bloque de código quede de esta manera:
console.log('The page name is: '+_satellite.getVar('Page Name'));
Guarde el código, mantenga los cambios en la acción y, a continuación, haga clic en el botón Guardar en biblioteca y crear.
Espere un momento hasta que el punto verde vuelva a aparecer junto al menú desplegable Working Library. Ahora, vuelva a cargar la página de muestra y debería ver el cambio reflejado en el mensaje de la consola (puede que tenga que borrar la caché del navegador y volver a cargar, para ver el cambio en la página):
Esta es una forma mucho más rápida de trabajar y utilizará este método para el resto del tutorial.
Siguiente: "Cambiar entornos con el Experience Cloud Debugger" >