Passer au contenu principal

Analyse avancée

les projets de 8th Wall fournissent des analyses d'utilisation de base, vous permettant de voir combien de "vues" vous avez reçues au cours des 30 derniers jours. Si vous recherchez des analyses plus détaillées et/ou historiques, nous vous recommandons d'ajouter des analyses web tierces à votre expérience WebAR.

Le processus d'ajout d'analyses à une expérience WebAR est le même que pour tout autre site web non-AR. Vous pouvez utiliser la solution analytique de votre choix.

Dans cet exemple, nous vous expliquons comment ajouter Google Analytics à votre projet 8th Wall à l'aide de Google Tag Manager (GTM) - ce qui facilite la collecte d'analyses personnalisées sur la façon dont les utilisateurs visualisent et interagissent avec votre expérience WebAR.

Grâce à l'interface utilisateur Web de GTM, vous pouvez définir des tags et créer des déclencheurs qui déclenchent l'activation de votre tag à l'adresse lorsque certains événements se produisent. Dans votre projet 8th Wall, déclenchez des événements (à l'aide d'une seule ligne de Javascript ) aux endroits souhaités dans votre code.

Analytique Pré-requis​

Vous devez déjà avoir des comptes Google Analytics et Google Tag Manager et avoir une compréhension de base de leur fonctionnement.

Pour plus d'informations, veuillez consulter la documentation Google suivante :

Ajoutez Google Tag Manager à votre projet 8th Wall​

  1. Sur la page Espace de travail de votre conteneur Tag Manager, cliquez sur l'identifiant de votre conteneur (par exemple "GTM-XXXXXX") pour ouvrir la boîte de dialogue "Installer Google Tag Manager". Cette fenêtre contient le code que vous devrez ajouter ultérieurement à votre projet 8th Wall.

GTM1

  1. Ouvrez le Cloud Editor 8th Wall et collez le bloc de code top dans head.html:

GTM2

  1. Cliquez sur "+" à côté de Fichiers, et créez un nouveau fichier appelé gtm.html, puis collez lebas du contenu du bloc de code bas dans ce fichier :

GTM3

  1. Ajoutez le code suivant au début du fichier app.js :
import * as googleTagManagerHtml from './gtm.html'
document.body.insertAdjacentHTML('afterbegin', googleTagManagerHtml)

Configurer Google Tag Manager​

  1. Localisez l'identifiant de mesure de Google pour votre flux de données.
  2. Dans GTM, créez une balise GA4 Configuration.

Exemple :

GTM8

Suivi des pages vues​

Les pages vues seront automatiquement suivies par le biais de la balise de configuration GA4. Pour plus d'informations, consultez le site Configure Google Tag Manager .

Suivi des événements personnalisés​

GTM permet également de déclencher des événements lorsque des actions personnalisées ont lieu à l'intérieur de l'expérience WebAR . Ces événements sont propres à votre projet WebAR, mais en voici quelques exemples :

  • placement d'un objet 3D
  • Image Cible trouvée
  • Capture d'écran réalisée
  • etc..

Dans cet exemple, nous allons créer une balise (avec Trigger) et l'ajouter au projet d'exemple "AFrame : Place Ground" qui se déclenche à chaque fois qu'un modèle 3D est créé.

Créer un déclencheur d'événement personnalisé​

  • Type de déclencheur : Événement personnalisé
  • Nom de l’événement : placeModel
  • Ce déclencheur se déclenche sur : Tous les événements personnalisés

GTM6

Créer un tag​

Ensuite, créez un tage qui se déclenchera lorsque le déclencheur "placeModel" sera activé dans votre code.

  • Type de tag : Google Analytics : GA4 Événement
  • Configuration Tag : (Sélectionnez la configuration créée précédemment)
  • Nom de l’événement : Modèle de lieu
  • Déclenchement : Sélectionnez le déclencheur "placeModel" créé à l'étape précédente.

GTM9

IMPORTANT: Veillez à enregistrer tous les déclencheurs/étiquettes créés, puis Submit/Publish vos paramètres dans l'interface GTM pour qu'ils soient pris en compte. Voir https://support.google.com/tagmanager/answer/6107163

Évènement à l'intérieur du projet 8th Wall​

Dans votre projet 8th Wall, ajoutez la ligne de javascript suivante pour déclencher ce trigger à l'endroit souhaité dans votre code :

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

Exemple - basé sur 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 => {
      // Créer une nouvelle entité pour le nouvel objet
      const newElement = document.createElement('a-entity')

      // Le raycaster donne une localisation du touch dans la scène
      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', () => {
        // Une fois le modèle chargé, nous sommes prêts à le faire apparaître à l'aide d'une animation
        newElement.setAttribute('visible', 'true')
        newElement.setAttribute('animation', {
          property : 'scale',
          to : '7 7 7',
          easing : 'easeOutElastic',
          dur : 800,
        })

        // **************************************************
        // Déclenche l'événement Google Tag Manager une fois le modèle chargé
        // **************************************************
        window.dataLayer.push({event: 'placeModel'})
      })
    })
  }
}