Programmatic

Another way to include an image on the page is through the tag’s API.

const d8sApi = initDimensions({ ... });

d8sApi.addImage(document.getElementById("my-image"), { 
    id: "my-shoe", 
    preset: "shoes",
    name: "front"
});

d8sApi.addVideo(...); //add video

d8sApi.addThreeD(...); //add 3d viewer

The add*() functions can be used to add additional assets to the page explicitly.

The tag also exposes events that can be accessed through a handler:

const d8sApi = initDimensions({ ... });

const unregister = d8sApi.on((event, ...args) => {
  console.log(
    `######### DIMENSIONS EVENT LISTENER CALLED - event: ${event}`,
    ...args
  );
});

This will log events from the tag about the viewers load and interaction.

Example: ​######### DIMENSIONS EVENT LISTENER CALLED - event: tag-image-load-start