Skip to content
Arc XP

Google Analytics Plugin

The Google Analytics plugin provides basic functionality to report video player events to Google Analytics. When you configure Google Analytics, the system reports a default subset of PoWa events to Google Analytics. Each event also delivers a payload of data to Google Analytics. You can use multiple tracking IDs by instantiating an extra instance of the plugin as a named tracker.

Setting up Google Analytics with Video Player

Create a support ticket to enable the plugin. Provide the following information in the ticket: 

  • Your Google Analytics ID
  • A brief summary on how you plan to use this plugin on your page
  • Notice of whether Google Analytics is already present on your page or if you plan to let the plugin enable Google Analytics

When the plugin has been added to the {org}.js, the plugin starts reporting events to Google Analytics.

Examples:

     window.addEventListener('powaRender', event => {
        const id = get(event, 'detail.id');
        const powa = get(event, 'detail.powa');


        new GoogleAnalytics({
            id,
            powa,
            gaID: '<GA ID>',
        });
});
     window.addEventListener('powaRender', event => {
        const id = get(event, 'detail.id');
        const powa = get(event, 'detail.powa');


        new GoogleAnalytics({
            id,
            powa,
            gaID: '<GA ID>',


            // default
            // set to `false` if using Google Tag Manager
            loadScript: true,


            // default `name`
            // create a "named tracker"
            // e.g. `window.ga('myTracker.send', {...})` instead of `window.ga('send', {...})`
            name: '',


            // default `eventCategory`
            // e.g. `window.ga('send', {hitType: 'event', eventCategory: 'PoWa', eventAction: 'powaRender', eventLabel: '<payload>'})`
            category: 'PoWa',


            // default error handler
            error: message => console.error(`ERROR: [PoWa][${ MODULE }] - ${ message }`),


            // default event name mapping
            eventNameTemplate: eventName => eventName,


            // default payload
            eventDataTemplate: event => {
                const videoStarts = event.videoStarts;
                const uuid = get(event, 'videoData._id');
                const title = get(event, 'videoData.headlines.basic');


                const adID = get(event, 'adMeta.adId');


                const bitrate = event.type.startsWith('playback') && event.bitrate ? `${ event.bitrate / 8000 }kB/s` : null;


                let error = event.error;
                error = error && event.type.startsWith('ad') ? error.split(':')[0] : error;


                let template = `${ videoStarts } ${ uuid } ${ title }`;
                template = adID ?    `${ template } ${ adID }` : template;
                template = bitrate ? `${ template } ${ bitrate }` : template;
                template = error ?   `${ template } ${ error }` : template;


                return template.trim();
            },


            // default events - note: when setting a custom list of events, use the VALUE, not the key
            // so instead of POWA_EVENTS.POWA_RENDER, use 'powaRender'
            // For a full list of events, you can log PoWa.EVENTS in the console
            events: [
                POWA_EVENTS.POWA_RENDER,


                POWA_EVENTS.START,


                POWA_EVENTS.AD_ERROR,
                POWA_EVENTS.AD_START,
                POWA_EVENTS.AD_SKIP,
                POWA_EVENTS.AD_COMPLETE,


                POWA_EVENTS.ERROR,
                POWA_EVENTS.PLAYBACK_0,
                POWA_EVENTS.PLAYBACK_25,
                POWA_EVENTS.PLAYBACK_50,
                POWA_EVENTS.PLAYBACK_75,
                POWA_EVENTS.PLAYBACK_100,
            ],
        });
});

Default events

Because the system reports only a subset of the events to Google Analytics by default, the following table provides a list of the most commonly reported events:

EventValueNamePayloadDescription
POWA_RENDERpowaRenderplayer loadedDefaultThe player has appeared on the page.
POWA_READYpowaReadypowaReady The player is instantiated and ready to be used.
POWA_BAR_HIDEpowaBarHidepowaBarHide The player bar got hidden.
LOADEDloadedloaded Loading of media has begun.
STARTpowaStartautoplay / initial click The player has started, either via autoplay or user interaction (initial click). From this event, the content playback flow begins. The event begins to download information about the video to play, and, if there are ads, the corresponding requests are made to play them. The content is not playing yet.
COMPLETEpowaCompletepowaComplete The content has finished playing.
FULLSCREENfullscreenfull screen / null The user entered in full screen or exited(null).
RESIZEresizeresize The player container was resized (i.e. the size of the browser window was).
MUTEDpowaMutedmute / unmute The user has muted / unmuted the video.
PAUSEpowaPausepause The user has paused the video.
PLAYpowaPlayresume The user has played the video.
SEEKEDpowaSeekedseek The user sought to a defined time.
METAmetameta The video duration, height or width of the player changed.
AD_ERRORadErroradError An ad has experienced an error or empty ad tag (i.e. no ad available).
AD_STARTadStartpre roll add An ad has started.
AD_BAR_HIDEadBarHideadBarHide The add bar was hidden (i.e. the ad ended to roll)
AD_SKIPadSkipadSkip The user has skipped the ad.
AD_COMPLETEadCompletepre roll end The ad has completed.
ERRORpowaErrorpowaError An error has occurred.
PLAYBACK_0playback0playback0 The video will begin playing. This event indicates that playback has started but content is not guaranteed to be currently viewable.
PLAYBACK_25playback25milestone 25% The video is 25% complete.
PLAYBACK_50playback50milestone 50% The video is 50% complete.
PLAYBACK_75playback75milestone 75% The video is 75% complete.
PLAYBACK_100playback100playback100 The video is complete. This event is called immediately after COMPLETE is triggered.

You can overwrite the list of PoWa events by defining the desired array of event names when instantiating the plugin.

     window.addEventListener('powaRender', event => {
        const id = get(event, 'detail.id');
        const powa = get(event, 'detail.powa');


        new GoogleAnalytics({
            id,
            powa,
            gaID: '<GA ID>',
            events: ['powaRender', 'start', 'adStart', 'adComplete', 'muted'],
        });
});

Payloads

The default payloads change slightly based on the event so that they report pertinent information.

PayloadExample
Default- ${ videoStarts } ${ UUID } ${ title }
- for example, 1 abc-123 My First Video
- for example, 2 def-456 My Second Video
Ad${ videoStarts } ${ UUID } ${ title } ${ adID }
Ad Error${ videoStarts } ${ UUID } ${ title } ${ adID } ${ error code }
Playback${ videoStarts } ${ UUID } ${ title } ${ bitrate }
Error${ videoStarts } ${ UUID } ${ title } ${ error }

You can configure the payload that is delivered on each event by defining a function when instantiating the plugin. The payload of each event from PoWa is passed to this function, and its return value (a string) is what is sent to Google Analytics.

     window.addEventListener('powaRender', event => {
        const id = get(event, 'detail.id');
        const powa = get(event, 'detail.powa');


        new GoogleAnalytics({
            id,
            powa,
            gaID: '<GA ID>',
            eventDataTemplate: event => `Starts: ${ event.videoStarts } UUID: ${ event.videoData._id } title: ${ event.videoData.headlines.basic }`,
        });
});

Event Names

In case event names in the player don’t align with your existing reporting structures, you can rename the events in your player codebase.

     window.addEventListener('powaRender', event => {
        const id = get(event, 'detail.id');
        const powa = get(event, 'detail.powa');


        new GoogleAnalytics({
            id,
            powa,
            gaID: '<GA ID>',
            eventNameTemplate: eventName => eventName === 'powaRender' ? 'render' : eventName,
        });
});