4. Install the Logger

Add the Metalitix Logger to your A-Frame experience

Add the Metalitix Logger to your experience using HTML or NPM.

Run the below command if you have npm installed.

npm install @metalitix/metalitix-aframe

Copy and paste the below script tag into the <head></head> of your A-Frame project.

<script src="https://cdn.metalitix.com/logger/a-frame/latest/a-frame.js"></script>

Run the Metalitix Logger in your experience by using the Metalitix A-Frame component or executing the Javascript class.

Add a metalitix-logger attribute to your AFrame scene (a-scene). The attribute accepts apiKey and sceneId parameters. You will find the apiKey within your project settings in the Metalitix dashboard while the sceneId is the 3D model of the experience (an a-entity or Object3D).

<a-scene
     id="aframe-scene"
     metalitix-logger="
          apiKey: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx;
          sceneId: my-scene-model;
">
     <a-camera id="my-camera"></a-camera>
     <a-entity id="my-scene-model">
          <!-- This is the scene model or the parent for the scene's models. -->
     </a-entity>
     ...
</a-scene>

Instantiate the MetalitixLogger by passing in the apiKey from your project settings found in the Metalitix dashboard. Then, start the logger session by calling startSession() and passing in the A-Frame scene (a-scene) and your own scene (a-entity or Object3D). Your own scene is the 3D model of the experience or the parent for your scene's models.

<a-scene id="aframe-scene">
     <a-camera id="my-camera"></a-camera>
     <a-entity id="my-scene-model">
          <!-- This is the scene model or the parent for the scene's models. -->
     </a-entity>
</a-scene>
...
<script>
     ...
     const apiKey = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
     const logger = new MetalitixLogger(apiKey);
     ...
     const aframeScene = document.getElementById('aframe-scene');
     const mySceneModel = document.getElementById('my-scene-model');
     logger.startSession(aframeScene, mySceneModel);
</script>

You must call startSession() after the A-Frame scene has been initialized because the logger needs access to the A-Frame scene's camera and renderer.

If the active camera changes in the A-Frame scene, the logger will automatically account for this.

The camera and your scene object should not be parents or children of each other.

Metalitix will record camera movement relative to your scene object's transformations. So, it is not necessary to manually calibrate the scene in the Metalitix dashboard. If you do not pass a scene object, then recorded camera movement will be in world coordinates and manual calibration may be necessary.

Metalitix is now configured to gather analytics on your project! 🎉 To test, engage with your experience to create a session. Then, navigate to the Sessions tab within your project on the Metalitix dashboard. Within a few minutes, you will see your session appear at the top of the table. It will be marked as Active until the session ends. When a session no longer says Active, its data will appear on the Metrics tab. Heatmap data, on the other hand, is calculated in real-time for small projects and every 24 hours for large projects.

Previous3. Allowing Domains NextAdvanced Features

Last updated 4 months ago