Documentación Experience Platform Tutorial web

Información general

Last update: Mon Nov 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Temas:
Tags

Creado para:

Beginner
Intermediate
Developer

Implementar el Experience Cloud de en sitios web con etiquetas es el punto de partida perfecto para desarrolladores de front-end o especialistas en marketing técnico que deseen aprender a implementar las soluciones de Adobe Experience Cloud en su sitio web.

Cada lección contiene ejercicios prácticos e información fundamental para ayudarle a implementar Experience Cloud y comprender su valor. Se proporcionan sitios de muestra para completar el tutorial, lo que le permite aprender las técnicas subyacentes en un entorno seguro. Después de completar este tutorial, debe estar preparado para empezar a implementar todas las soluciones de marketing a través de las etiquetas en su propio sitio web.

INFO

Este tutorial utiliza extensiones y bibliotecas específicas de la aplicación (AppMeasurement.js para Adobe Analytics, at.js para Adobe Target). Si desea implementar el SDK web de Adobe Experience Platform, consulte la Implementar Adobe Experience Cloud con SDK web tutorial.

Tras completar esta formación, debe ser capaz de:

Creación de una propiedad de etiqueta
Instalación de una propiedad de etiquetas en un sitio web
Añadir las siguientes soluciones de Adobe Experience Cloud:
- Servicio de ID de Adobe Experience Platform
- Adobe Target
- Adobe Analytics
- Adobe Audience Manager
Crear reglas y elementos de datos para enviar datos a las soluciones de Adobe.
Validar la implementación con Adobe Experience Cloud Debugger.
Publicar cambios mediante entornos de desarrollo, ensayo y producción

NOTE

Adobe Experience Platform Launch se está integrando en Adobe Experience Platform como un conjunto de tecnologías de recopilación de datos. Se han implementado varios cambios terminológicos en la interfaz que debe tener en cuenta al utilizar este contenido:

El platform launch (lado del cliente) ahora es tags
El lado del servidor de platform launch ahora es event forwarding
Las configuraciones de Edge ahora son datastreams

NOTE

También hay tutoriales de varias soluciones similares disponibles para SDK web y Mobile SDK.

Requisitos previos

En estas lecciones, se da por hecho que dispone de un Adobe ID y de los permisos necesarios para completar los ejercicios. Si no es así, es posible que deba ponerse en contacto con el administrador de Experience Cloud para solicitar acceso.

Para las etiquetas, debe tener permiso para desarrollar, aprobar, publicar, gestionar extensiones y entornos. Para obtener más información sobre los permisos de usuario de etiquetas, consulte la documentación.
Para Adobe Analytics, debe conocer su servidor de seguimiento y qué grupos de informes desea utilizar para completar este tutorial.
Para Audience Manager, debe conocer su subdominio de Audience Manager (también conocido como "nombre de socio", "ID de socio" o "subdominio de socio")

Además, se da por hecho que está familiarizado con los lenguajes de desarrollo front-end como HTML y JavaScript. No necesita ser un experto en estos lenguajes para completar las lecciones, pero obtendrá más información si puede leer y comprender el código con comodidad.

Acerca de las etiquetas

La función de etiquetas de Adobe Experience Platform es la nueva generación de funcionalidades de administración de etiquetas de sitios web y SDK móvil de Adobe. Las etiquetas ofrecen a los clientes una alternativa sencilla para implementar y gestionar todas las soluciones de análisis, marketing y publicidad necesarias para potenciar las importantes experiencias del cliente. Las etiquetas no suponen ningún coste adicional. Está disponible para cualquier cliente de Adobe Experience Cloud.

Las etiquetas para sitios web le permiten administrar de forma centralizada todo el código JavaScript relacionado con las soluciones de análisis, marketing y publicidad utilizadas en los sitios con versión escritorio y móviles. Por ejemplo, si implementa Adobe Analytics, las etiquetas administran la biblioteca JavaScript de AppMeasurement, rellenan variables y activan solicitudes.

El contenido del contenedor se minimiza, incluido el código personalizado. Todo es modular. Si no necesita un elemento, este no se incluye en la biblioteca. El resultado es una implementación rápida y compacta.

Las etiquetas también son una plataforma que permite a los proveedores externos crear extensiones para facilitar la implementación de sus soluciones mediante etiquetas. Una extensión es un paquete de código (JavaScript, HTML y CSS) que amplía la interfaz de etiquetas y la funcionalidad del cliente. Podríamos equiparar las etiquetas con un sistema operativo y las extensiones con las aplicaciones que usa para realizar sus tareas.

Acerca de las lecciones

En estas lecciones, debe implementar Adobe Experience Cloud en un sitio web de venta minorista ficticio denominado Luma. El sitio de Luma tiene una capa de datos y una funcionalidad enriquecidas que permiten crear una implementación realista. Debe crear su propia propiedad de etiquetas, en su propia organización de Experience Cloud, y asignarla a nuestro sitio de Luma alojado mediante el Experience Cloud Debugger.

Obtención de las herramientas

Ya que se utilizan varias extensiones específicas del navegador, le recomendamos que complete el tutorial utilizando el navegador web Chrome.
Añada el Adobe Experience Platform Debugger Extensión de a su explorador Chrome

Copie el código de página HTML de ejemplo

accordion

Código de página HTML de muestra

code language-html

<!doctype html>
<html lang="en">
<head>
    <title>Tags: Sample HTML Page</title>
    <!--Preconnect and DNS-Prefetch to improve page load time. REPLACE "techmarketingdemos" WITH YOUR OWN AAM PARTNER ID, TARGET CLIENT CODE, AND ANALYTICS TRACKING SERVER-->
    <link rel="preconnect" href="//dpm.demdex.net">
    <link rel="preconnect" href="//fast.techmarketingdemos.demdex.net">
    <link rel="preconnect" href="//techmarketingdemos.demdex.net">
    <link rel="preconnect" href="//cm.everesttech.net">
    <link rel="preconnect" href="//techmarketingdemos.tt.omtrdc.net">
    <link rel="preconnect" href="//techmarketingdemos.sc.omtrdc.net">
    <link rel="dns-prefetch" href="//dpm.demdex.net">
    <link rel="dns-prefetch" href="//fast.techmarketingdemos.demdex.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.demdex.net">
    <link rel="dns-prefetch" href="//cm.everesttech.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.tt.omtrdc.net">
    <link rel="dns-prefetch" href="//techmarketingdemos.sc.omtrdc.net">
    <!--/Preconnect and DNS-Prefetch-->
    <!--Data Layer to enable rich data collection and targeting-->
    <script>
    var digitalData = {
        "page": {
            "pageInfo" : {
                "pageName": "Home"
                }
            }
    };
    </script>
    <!--/Data Layer-->
    <!--jQuery or other helper libraries-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--/jQuery-->
    <!--Tags Header Embed Code: REPLACE THE NEXT LINE WITH THE EMBED CODE FROM YOUR OWN DEVELOPMENT ENVIRONMENT-->
    <script src="//assets.adobedtm.com/launch-EN93497c30fdf0424eb678d5f4ffac66dc.min.js" async></script>
    <!--/Tags Header Embed Code-->
</head>
<body>
    <h1>Tags: Sample HTML Page</h1>
    <p>This is a very simple page to demonstrate basic implementation concepts of Tags</p>
    <p>See <a href="https://docs.adobe.com/content/help/es-ES/experience-cloud/implementing-in-websites-with-launch/index.html">Implementing the Experience Cloud in Websites with Tags</a> for the complete tutorial</p>
</body>
</html>

Obtenga un editor de texto en el que pueda realizar cambios en la página HTML de ejemplo. (Si no tiene uno, le recomendamos que pruebe Brackets).
Marcar el sitio de Luma.

NOTE

Puede que le resulte más fácil completar este tutorial con el sitio Luma abierto en Chrome, mientras lee este tutorial y completa los pasos de la interfaz de recopilación de datos en un explorador diferente.

¡Empecemos!

Siguiente: "Crear una propiedad de etiqueta" >

recommendation-more-help

45774420-d03e-4a6b-94b5-cd639ae825b2