Usar Google Tag Manager para instalar Appcues puede ser una forma rápida y sencilla de empezar a usar Appcues sin tener que enviar código nuevo. Empezar es bastante sencillo. Hay dos o tres cosas que debemos hacer:

1. Cargue el SDK de Javascript Appcues en la página.
2. Asegúrese de que se llame Appcues () .
3. Para aplicaciones de una sola página , asegúrese de que los cambios de página se rastrean adecuadamente a través de Appcues .page() o detección automática.
4. Opcionalmente, agregue una etiqueta para Appcues .group().

Cargando recursos Appcues en la página

Estos dos primeros pasos son bastante sencillos. Se debe cargar el script Appcues y llamar a `.identify()` Appcues cada vez que se cargue la página. Insertaremos la siguiente línea en una etiqueta (sustituyendo el ID de tu cuenta por `<YOUR_ACCOUNT_ID>`):

<script src="//fast.appcues.com/YOUR_ACCOUNT_ID.js"></script>

Identificación de sus usuarios

Appcues depende de la llamada Appcues ()` para pasar un ID de usuario y otras propiedades al comprobar si se muestra contenido en una página. Puedes añadir esta llamada a otra etiqueta. Si solo estás probando Appcues , puedes codificar estos valores, por ejemplo, añadiendo lo siguiente al Administrador de etiquetas:

<script>   
    Appcues.identify('testUserId', {userName: 'Test Testerson', email: 'test@test.com'});
</script>

Esto significa que todos los usuarios tendrán el mismo ID de usuario y no habrá forma de diferenciarlos, por lo que, para una implementación completa, deberá enviar un ID de usuario real. Aunque el ID de usuario es la única información de usuario necesaria para que Appcues funcione, también es recomendable enviar algunas propiedades de usuario adicionales. Para ello a través de Tag Manager, deberá aprovechar las variables de Tag Manager (consulte aquí ) y pasarlas a la llamada de identificación:

<script>   
    Appcues.identify(<USER_ID_VARIABLE>, {<USER_PROPERTY_VARIABLES>});
</script>

Seguimiento de cambios en la página

Para aplicaciones de página única, deberá detectar automáticamente los cambios de página o realizar una llamada Appcues .page() para cualquier cambio de URL.

Esto significa que cuando la URL cambia sin provocar una carga completa de la página, Appcues aún sabrá que el usuario está en una página nueva y deberá buscar contenido nuevo para mostrar.

Ejemplo de uso de Appcues .page():

Ejemplo de uso de detección automática:

<script type="text/javascript">
  window.AppcuesSettings = {
    enableURLDetection: true
  };
</script>
<script src="//fast.appcues.com/YOUR_ACCOUNT_ID.js"></script>

Agregar una etiqueta para Appcues .group()

Las propiedades del grupo describen la cuenta en la que el usuario está activo actualmente; datos como el nombre de la empresa, el administrador de la cuenta, el nivel del plan, el MRR, las opciones de funciones, el sector y muchos más. Esta información se puede enviar mediante Appcues .group() . Un usuario puede pertenecer a varios grupos, pero solo se puede identificar uno a la vez. Solo se considerará para la segmentación el grupo asociado más recientemente con el usuario.

Similar a Appcues .identify(), se requiere un ID de grupo único y se aplican las mismas restricciones de formato.

Ejemplo:

<script>
    Appcues.group("6789", {company_name: "Lendi Global",plan: "enterprise",employee_count: 12000,trial: false});
</script>

¡Y eso debería bastar! Para probar la instalación después de publicarla, inicia sesión en tu sitio, abre la consola del navegador e introduce

Appcues.debug()

Esto le proporcionará información de diagnóstico sobre la configuración de Appcues y los datos que se envían. Consulte nuestra documentación de depuración para obtener más detalles sobre esta función. Para obtener más información sobre la instalación estándar de Appcues , consulte nuestra descripción general de la instalación.

Instalación asincrónica Appcues

Una forma de instalar Appcues de forma asíncrona mediante GTM es con dos etiquetas independientes. La primera debe configurarse para que se active mediante uno de los activadores estándar de GTM, como Vista de página o Ventana cargada. La segunda debe configurarse para que se active con el evento personalizado añadido a la capa de datos de GTM en la Etiqueta 1.

Etiqueta 1:

<script>
function loadScript( url, callback ) {
  var script = document.createElement( "script" )
  script.type = "text/javascript";
  if(script.readyState) {
    script.onreadystatechange = function() {
      if ( script.readyState === "loaded" || script.readyState === "complete" ) {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  //Others
    script.onload = function() {
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName( "head" )[0].appendChild( script );
}

loadScript('//fast.appcues.com/YOUR_ACCOUNT_ID.js', function() {
  dataLayer.push({'event': 'AppcuesLoaded'});
});
</script>

Etiqueta 2:

<script type='text/javascript'>
  Appcues.identify('some_test_user'); 
</script>