Third party integration

Optimizely

To add a Vilynx variation to your Optimizely account, open your Optimizely Console, create a new variation and add the optimizely param to your Gallery script. Example:

function () {

    var fileRef = document.createElement('script');

    fileRef.setAttribute("type", "text/javascript");
    fileRef.setAttribute("src", "//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js");
    fileRef.setAttribute("data-publickey", "YOUR_USER_ID");
    fileRef.setAttribute("data-optimizely", "true");

    document.body.appendChild(fileRef);

};

In order to compare the same events on the control page (A) and the variation (B) it’s necessary to include the Gallery library in the control but set the optimizelyoff param in the setup. The previous example will look like this in the control page:

function () {

    var fileRef = document.createElement('script');

    fileRef.setAttribute("type", "text/javascript");
    fileRef.setAttribute("src", "//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js");
    fileRef.setAttribute("data-publickey", "YOUR_USER_ID");
    fileRef.setAttribute("data-optimizely", "true");
    fileRef.setAttribute("data-optimizelyoff", "true");

    document.body.appendChild(fileRef);

};

Once this is done, you only need to register the events that you want to track:

  • Summary Play: register a new goal as usual and under events, select Custom Event, with this event to track: 'summary_play'.
  • Summary Click: register a new goal as usual and under events, select Custom Event, with this event to track: 'summary_click'.
  • Clicks: register a new click event. Make sure that the click event is assigned to the <a> element, not the <img>. To verify this, please click on Advanced and make sure you're tracking the 'a', or 'a#yourlinkid'.

Other analytic tools

You can use the hooks system to integrate any other analytics tool that provides a JS API. To track the Gallery events, follow the next two steps:

  1. Add the ongalleryload param: On your Gallery script configuration add the ongalleryload attribute to set the name of the custom function that you wish to execute before the script starts to scan your page.

Example:

function () {

    var fileRef = document.createElement('script');

    fileRef.setAttribute("type", "text/javascript");
    fileRef.setAttribute("src", "//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js");
    fileRef.setAttribute("data-publickey", "YOUR_USER_ID");
    fileRef.setAttribute("data-ongalleryload", "window.galleryTracking.customFunctionOnLoad");

    document.body.appendChild(fileRef);

};

The function that you passed as a parameter will be executed when Gallery loads. In the example above, it would be window.galleryTracking.customFunctionOnLoad.

  1. Tracking events: The Vilynx Gallery has a hooks system that allows you to execute a list of callbacks to track 3 key events: video_play, summary_play and thumbnail_shown. These callbacks are set inside window.galleryTracking.customFunctionOnLoad as follows:
window.galleryTracking = {
    customFunctionOnLoad: function () {
        // You need to pass your function (window.myAnalytics.track() in this example) as first argument for any event you want to track:

        // To track every click on a preview
        window.vilynxGallery.addOnTrackVideoPlay(
        function () {
            window.myAnalytics.track('on_preview_click');
        }
        );

        // To track previews played (for at least 500ms)
        window.vilynxGallery.addOnTrackSummaryPlay(
        function () {
            window.myAnalytics.track('on_preview_play');
        }
        );

        // (Mobile only) To track when a preview element enters the viewport
        window.vilynxGallery.addOnTrackThumbnailShown(
        function () {
            window.myAnalytics.track('on_enter_viewport');
        }
        );
    }
};

Example The following example should help you understand the complete integration of the two steps described above.

window.myAnalytics = {
    // Your custom function must contain the code that will be executed when the event is triggered
    track: function (eventTrack) {
        // As a simple example: let's get some feedback
        console.info('Tracking event: ' + eventTrack);
    }
};

window.galleryTracking = {
    // customFunctionOnLoad will be passed to Vilynx Gallery script tag, and will be called once the gallery plugin is ready
    customFunctionOnLoad: function () {
        // You need to pass your function (window.myAnalytics.track() in this example) as first argument for any event you want to track:

        // To track every click on a preview
        window.vilynxGallery.addOnTrackVideoPlay(
        function () {
            window.myAnalytics.track('on_preview_click');
        }
        );

        // To track previews played (for at least 500ms)
        window.vilynxGallery.addOnTrackSummaryPlay(
        function () {
            window.myAnalytics.track('on_preview_play');
        }
        );

        // (Mobile only) To track when a preview element enters the viewport
        window.vilynxGallery.addOnTrackThumbnailShown(
        function () {
            window.myAnalytics.track('on_enter_viewport');
        }
        );
    }
};

// The Vilynx Gallery plugin can be inserted with JS or can be in the DOM when the document loads. But the customFunctionOnLoad function must exist when the gallery is loaded
var galleryScript = document.createElement("script");

// ongalleryload will be called when the gallery plugin is successfully loaded.
galleryScript.setAttribute("data-ongalleryload", "window.galleryTracking.customFunctionOnLoad");

// publickey is required to identify you as a vilynx user.
galleryScript.setAttribute("data-publickey", "YOUR_USER_ID");

galleryScript.setAttribute("src", "//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js");

document.body.appendChild(galleryScript);

Comscore

A tracking pixel is a little piece of code containing a 1x1 pixel image that you can use to track any important activity on your website. This is done by making a server call to a third party like Comscore in the form of a URL.

The endpoint URL requested by Comscore includes a querystring with a variety of parameters. Most common are the “c-parameters” which represent different pieces of information, for example:

<!-- Begin Comscore Tag -->
    <noscript>
        <div>
            <img src="https://sb.scorecardresearch.com/p?c1=2&c2={{Client ID}}&c4={{Page URL}}" height="1" width="1" alt="*">
        </div>
    </noscript>
<!-- End Comscore Tag -->

Some of these fields are required, so you should make sure to pass all the mandatory labels. Don't forget to include your C2 Value provided by Comscore, also known as the client ID, as well as the timestamp for when the pixel tracking request is created as a Comscore parameter!

Example Vilynx can help you send your data to Comscore using the hook system described in the Other analytics tools integration section.

After implementing the code below, the Comscore tracking pixels will be added to each preview and fired when the user starts watching any preview.

The same can be done for the three key events tracked by Vilynx: on_preview_click, on_preview_play and on_enter_viewport.

window.vlx_comscore = {
    // trackingPixelOnLoad will be passed to Vilynx Gallery script tag, and will be called once the gallery plugin is ready.
    trackingPixelOnLoad: function () {

        // The tracking pixel URL will be called when the user watches a preview for 500ms or more.
        window.vilynxGallery.addOnTrackSummaryPlay(
        function () {
            var cs_data = {
                cs_hostname: 'https://sb.scorecardresearch.com/b',
                c1: '2',
                c2: 'CLIENT_ID',// Your own client ID from comScore as the c2 parameter.
                c3: 'CAMPAIGN_ID',
                c4: '*null', // Unused mandatory labels must still be passed with the literal string value *null.
                ns__t: Date.now() // Timestamp for when the pixel is created.
            };

            // Add the hostname and the custom or mandatory labels to the tracking pixel URL:
            var pixelUrl = cs_data.cs_hostname + '?c1=' + cs_data.c1 + '&c2=' + cs_data.c2 + '&c3=' + cs_data.c3 + '&c4=' + cs_data.c4 + '&ns__t=' + cs_data.ns__t;

            // comScore api call via tracking pixel.
            var noscript = document.body.querySelector('[vlx-id="vlx_cs"]'),
            trackingPixel;

            if (!noscript) {
                noscript = document.createElement('NOSCRIPT');
                noscript.setAttribute('vlx-id', 'vlx_cs');
                document.body.appendChild(noscript);

                // Create an <img> tag from the comScore domain.
                trackingPixel = document.createElement('IMG');
                noscript.appendChild(trackingPixel);
            } else if (noscript.firstChild) {
                trackingPixel = noscript.firstChild;
            }

            // On the img request, the pixelUrl is updated with new data every time the summary_play event is triggered.
            trackingPixel.setAttribute('src', pixelUrl);
        }
        );

    }
};

// The Vilynx Gallery plugin can be inserted with JS or can be in the DOM when the document loads. But the trackingPixelOnLoad function must exist when the gallery is loaded.
var galleryScript = document.createElement("script");

// ongalleryload will be called when the gallery plugin is successfully loaded.
galleryScript.setAttribute("data-ongalleryload", "window.vlx_comscore.trackingPixelOnLoad");

// publickey is required to identify you as a Vilynx user.
galleryScript.setAttribute("data-publickey", "YOUR_USER_ID");

galleryScript.setAttribute("src", "//static.vilynx.com/gallery/vpg.{{galleryVersion}}.min.js");

document.body.appendChild(galleryScript);