Saltar al contenido principal

Analítica avanzada

los proyectos de 8th Wall proporcionan análisis de uso básico, que le permiten ver cuántas "visitas" ha recibido en los últimos 30 días. Si busca análisis más detallados y/o históricos, le recomendamos que añada analíticas web por parte de terceros a su experiencia WebAR .

El proceso para añadir analíticas a una experiencia WebAR es el mismo que para añadirlas a cualquier sitio web no WebAR . Puede utilizar la solución analítica que prefiera.

En este ejemplo, le explicaremos cómo añadir Google Analytics a su proyecto 8th Wall utilizando Google Tag Manager (GTM), lo que facilita la recopilación de análisis personalizados sobre cómo los usuarios ven y interactúan con su experiencia WebAR.

Utilizando la interfaz de usuario basada en web de GTM, puedes definir etiquetas y crear desencadenantes que hagan que tu etiqueta se lance cuando se produzcan determinados eventos. En su proyecto 8th Wall, lance eventos (utilizando una sola línea de Javascript ) en los lugares deseados de su código.

Requisitos previos para analítica​

Debes tener ya cuentas de Google Analytics y Google Tag Manager y tener conocimientos básicos de su funcionamiento.

Para más información, consulte la siguiente documentación de Google:

Añade Google Tag Manager a su proyecto 8th Wall​

  1. En la página de área de trabajo de su contenedor Tag Manager, haga clic en el ID de su contenedor (por ejemplo, "GTM-XXXXXX") para abrir el cuadro "Instalar Google Tag Manager". Esta ventana contiene el código que tendrá que añadir más adelante a su proyecto de 8th Wall.

GTM1

  1. Abra el editor de la nube del 8th Wall y pegue el bloque de código arriba**head.html**:

GTM2

  1. Haga clic en "+" junto a archivos, y cree un nuevo archivo llamado gtm.html, luego pegue el contenido del bloque de código inferior en este archivo:

GTM3

  1. Añada el siguiente código en la parte superior de app.js:
import * as googleTagManagerHtml from './gtm.html'
document.body.insertAdjacentHTML('afterbegin', googleTagManagerHtml)

Configurar Google Tag Manager​

  1. Localice el ID de medición de Google para su flujo de datos.
  2. En GTM, cree una etiqueta de congiguración GA4.

Ejemplo:

GTM8

Seguimiento de las visitas a la página​

Las visitas a la página se rastrearán automáticamente a través de la etiqueta de configuración GA4. Consulte la página Configurar Google Tag Manager para obtener más información.

Seguimiento de eventos personalizados​

GTM también ofrece la posibilidad de lanzar eventos cuando se producen acciones personalizadas dentro de la experiencia WebAR . Estos eventos serán únicos de su proyecto WebAR, pero algunos ejemplos podrían ser:

  • Objeto 3D colocado
  • Objetivo de imagen encontrado
  • Captura de pantalla realizada
  • etc.

En este ejemplo, crearemos una etiqueta (con activador) y la añadiremos al proyecto de ejemplo "AFrame: Place Ground" que se lanza cada vez que se genera un modelo 3D.

Crear activador de eventos personalizado​

  • Tipo de activador: Evento personalizado
  • Nombre del evento: placeModel
  • Este activador se lanza en: todos los eventos personalizados

GTM6

Crear etiqueta​

A continuación, cree una etiqueta que se lanzará cuando se dispare el activador "placeModel" en su código.

  • Tipo de etiqueta: Google Analytics: evento GA4
  • Etiqueta de configuración: (Seleccione la configuración creada anteriormente)
  • Nombre del Evento: Lugar Modelo
  • Activación: Seleccione el disparador "placeModel" creado en el paso anterior.

GTM9

IMPORTANTE: Asegúrese de guardar todos los activadores/etiquetas creados y, a continuación, Envíe/Publique sus ajustes dentro de la interfaz GTM para que estén activos. Consulte https://support.google.com/tagmanager/answer/6107163

Lanzar eventos dentro del proyecto de 8th Wall​

En su proyecto de 8th Wall, añada la siguiente línea de javascript para lanzar este activador en el lugar deseado de su código:

window.dataLayer.push({event: 'placeModel'})

Ejemplo - basado en https://www.8thwall.com/8thwall/placeground-aframe/master/tap-place.js​
export const tapPlaceComponent = {
  init: function() {
    const ground = document.getElementById('ground')
    ground.addEventListener('click', event => {
      // Crear una nueva entidad para el nuevo objeto
      const newElement = document.createElement('a-entity')

      // El raycaster da una localización del toque en la escena
      const touchPoint = event.detail.intersection.point
      newElement.setAttribute('position', touchPoint)

      const randomYRotation = Math.random() * 360
      newElement.setAttribute('rotation', '0 ' + randomYRotation + ' 0')

      newElement.setAttribute('visible', 'false')
      newElement.setAttribute('scale', '0.0001 0.0001 0.0001')

      newElement.setAttribute('shadow', {
        receive: false,
      })

      newElement.setAttribute('class', 'cantap')
      newElement.setAttribute('hold-drag', '')

      newElement.setAttribute('gltf-model', '#treeModel')
      this.el.sceneEl.appendChild(newElement)

      newElement.addEventListener('model-loaded', () => {
        // Una vez cargado el modelo, estamos listos para mostrarlo emergiendo mediante una animación
        newElement.setAttribute('visible', 'true')
        newElement.setAttribute('animation', {
          property: 'scale',
          to: '7 7 7',
          easing: 'easeOutElastic',
          dur: 800,
        })

        // **************************************************
        //Lanzar el evento Google Tag Manager una vez cargado el modelo
        // **************************************************
        window.dataLayer.push({event: 'placeModel'})
      })
    })
  }
}