Skip to main content

Advanced Analytics

8th Wall projects provide basic usage analytics, allowing you to see how many "views" you have received in the past 30 days. If you are looking for more detailed and/or historical analytics, we recommend adding 3rd party web analytics to your WebAR experience.

The process for adding analytics to a WebAR experience is the same as adding them to any non-AR website. You are welcome to use any analytics solution you prefer.

In this example, we’ll explain how to add Google Analytics to your 8th Wall project using Google Tag Manager (GTM) - making it easy to collect custom analytics on how users are both viewing and interacting with your WebAR experience.

Using GTM’s web-based user interface, you can define tags and create triggers that cause your tag to fire when certain events occur. In your 8th Wall project, fire events (using a single line of Javascript) at desired places in your code.

Analytics Pre-requisites​

You must already have Google Analytics and Google Tag Manager accounts and have a basic understanding of how they work.

For more information, please refer to the following Google documentation:

Add Google Tag Manager to your 8th Wall Project​

  1. On the Workspace page of your Tag Manager container, click your container ID (e.g. "GTM-XXXXXX") to open the "Install Google Tag Manager" box. This window contains the code that you’ll later need to add to your 8th Wall project.

GTM1

  1. Open the 8th Wall Cloud Editor and paste the top code block into head.html:

GTM2

  1. Click "+" next to Files, and create a new file called gtm.html, then paste the contents of the bottom code block into this file:

GTM3

  1. Add the following code towards the top of app.js:
import * as googleTagManagerHtml from './gtm.html'
document.body.insertAdjacentHTML('afterbegin', googleTagManagerHtml)

Configure Google Tag Manager​

  1. Locate the Google Measurement ID for your data stream.
  2. In GTM, create a GA4 Configuration tag.

Example:

GTM8

Tracking Page Views​

Page views will be automatically tracked through the GA4 Configuration tag. See the Configure Google Tag Manager for more information.

Tracking Custom Events​

GTM also provides the ability to fire events when custom actions take place inside the WebAR experience. These events will be particular to your WebAR project, but some examples might be:

  • 3D object placed
  • Image Target found
  • Screenshot taken
  • etc…

In this example, we’ll create a Tag (with Trigger) and add it to the "AFrame: Place Ground" sample project that fires each time a 3D model is spawned.

Create Custom Event Trigger​

  • Trigger Type: Custom Event
  • Event Name: placeModel
  • This trigger fires on: All Custom Events

GTM6

Create Tag​

Next, create a tag that will fire when the "placeModel" trigger is fired in your code.

  • Tag Type: Google Analytics: GA4 Event
  • Configuration Tag: (Select configuration created previously)
  • Event Name: Place Model
  • Triggering: Select "placeModel" trigger created in the previous step.

GTM9

IMPORTANT: Make sure to save all triggers/tags created and then Submit/Publish your settings inside the GTM interface so they are live. See https://support.google.com/tagmanager/answer/6107163

Fire Event Inside 8th Wall Project​

In your 8th Wall project, add the following line of javascript to fire this trigger at the desired place in your code:

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

Example - based on 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 => {
      // Create new entity for the new object
      const newElement = document.createElement('a-entity')

      // The raycaster gives a location of the touch in the scene
      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', () => {
        // Once the model is loaded, we are ready to show it popping in using an animation
        newElement.setAttribute('visible', 'true')
        newElement.setAttribute('animation', {
          property: 'scale',
          to: '7 7 7',
          easing: 'easeOutElastic',
          dur: 800,
        })

        // **************************************************
        // Fire Google Tag Manager event once model is loaded
        // **************************************************
        window.dataLayer.push({event: 'placeModel'})
      })
    })
  }
}