Tracking User Engagement using Google Analytics

The 3DRT Player files 1.3.8 and newer support Google Analytics custom event tracking, so you can see how users of your website do interact with any 360° product rotation displayed on your site:

Tracked Events for Backpack 360& rotation that was displayed on homepage. — Tracked Events for Backpack 360° rotation that was displayed on the homepage.

Enabling events tracking in the WordPress Plugin

You can enable tracking for all products globally in the plugin settings page:

As described on the WordPress 360 plugin manual page, you can use short-code settings to fine-tune your google analytics events tracking. Most useful is the label parameter, using which you can differentiate which rotation on your site was accessed the most:
[360 width="100%" height="375px" src="weddingring" ga_label="Wedding Ring @ HomePage"]

Enabling events tracking in the 3DRT Setup Utility

For enabling events tracking using the 3DRT Setup Utility, switch to the Advanced Settings > Analytics tag and enter your values:

Enabling tracking in HTML Code

Follow the information below on how to add google events tracking support to your existing html pages:

Code for events tracking
Tracking is enabled by adding the line “gaData”:{“isEnabled”:”true”}’ into the data-rotate-tool attribute with few options:

<div 
  id='sampleRotation' 
   data-rotate-tool='{
     "path":"",
     "gaData":{"isEnabled":"true","label":"Tissot Watches #1234 on Homepage","trackingId":"UA-XXXXXX-X"}' >
</div>
<script
  type="text/javascript"
  src="rotatetool.js">
</script>

<div

id='sampleRotation'

data-rotate-tool='{

"path":"",

"gaData":{"isEnabled":"true","label":"Tissot Watches #1234 on Homepage","trackingId":"UA-XXXXXX-X"}' >

</div>

<script

type="text/javascript"

src="rotatetool.js">

</script>

Using this setup the rotatetool will report the #default events to your Google Analytics profile.

Available “gaData” options

isEnabled [“true”|”false”] (optional)
Turn Events tracking on/off.

label [string] (optional but useful!)
The event label, useful for identifying your product and its location on webpage. A good choice would be a label like this: “Backpack, item #1234 : Homepage”. If not set, the productId value is used. If this is not set, the div #id (id of div element into which the 360 product is inserted) value is used.

trackingId [“UA-XXXXXX-X”] (optional)
This is your Google Analytics Tracking Id. It is optional and used only if a previous Google Analytics code is not found in the webpage where the 3DRT is inserted (the rotatetool.js generates the GA script tag using the provided trackingId, if no previous ga function is found).

category [“YOFLA_360”] (optional)
The event category. Defaults to YOFLA_360 if not set.

enabledEvents [array] (optional)
If not set the #default events are used. You can override the default events (limit, or extend) by specifying your own set of events you wish to track like this:

"gaData":{"enabledEvents":["3drt_button_play_pause_click","3drt_button_fullscreen_click"]}'

1	"gaData":{"enabledEvents":["3drt_button_play_pause_click","3drt_button_fullscreen_click"]}'

The above code will track only the play/pause button click and fullscreen button click.

See this page for list of all available events.

Default events

By default, these events are sent to your GA profile. These events are:
RotateTool.CLICK_OBJECT,
RotateTool.BUTTON_PLAY_PAUSE_CLICK,
RotateTool.BUTTON_ARROW_LEFT_CLICK,
RotateTool.BUTTON_ARROW_RIGHT_CLICK,
RotateTool.BUTTON_FULLSCREEN_CLICK,
RotateTool.BUTTON_ZOOMSLIDER_CLICK,
RotateTool.BUTTON_ROTATE_CLICK,
RotateTool.BUTTON_PAN_CLICK,
RotateTool.HOTSPOT_HOVER,
RotateTool.HOTSPOT_OPEN,
RotateTool.ZOOM_START