Retrieving Recommendations from PIPE

The purpose of this tutorial is to show you how to retrieve recommendations from Pipe (via pipe-api).

Prerequisites

This tutorial is the next steps of data collection with pipe.js.

Getting recommendation from API endpoint

If you want you can query an API endpoint which will retrieve a counter related to the cookie_id and the session_id with the last event collected. In order to simplify the overall process of AJAX calls, we will include jquery.

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

Now just create a div with a specific id. That div will be useful to create a new player element that will be set with the data returned by the API, and it will be able to send back the right recommendation_id on each pipe.js request. Also, let's just create a simple button bound to the API you call to retrieve the data.

<button onclick="apiCall()">Recommendation API call </button>

<div id="recommended-video-block"></div>

<script>
    function apiCall() {
        $.ajax({
            method: 'GET',
            url: "https://peach.ebu.io/api/v1/zzebu/tutorial_endpoint",
            data: {}
        }).done(function( data ) {
            var results = data.result;

            if(!$('#recommended-video').length) {
                var video = $('<video />', {
                    id: 'recommended-video',
                    src: data.result.items[0].id,
                    controls: true
                });
                video.attr('data-recommendation-id', data.result.id);
                video.appendTo($('#recommended-video-block'));

                var myVideo =  document.getElementById("recommended-video");

                myVideo.addEventListener("play", function (evt) {
                    playing(evt);
                });

                myVideo.addEventListener("pause", function (evt) {
                    paused(evt);
                });
            }
        });
    }
</script>

The code above is basically how we use the results returned by the API to build a brand new player containing the recommendation id and the url of the recommended video. Data sent to collect API through this player will now contain the correct data.

A note on loaded/displayed recommendations

When a recommendation is loaded, in this case for example at the moment we get the url of the recommended video from the API, you can collect that information sent to pipe.js sending a _pipe('collect', 'rec_video_loaded', data); (or rec_audio_loadedis available for audio contents) request, knowing that the data parameter should contain

data = {
    "recommendation_id": this.recommendationId, // the recommendation_id for this content
    "items": JSON.parse(this.items) //an json type object with all recommended items
};

Also when the client display the recommendation section on your website (for example scrolling down the view), you can also send a specific request to pipe : _pipe('collect', 'rec_video_displayed', data); (same remark than for loaded event) with data which will have the same format than stated above.

Final notes

If you followed this tutorial entirely you should now be able to collect with pipe.js, following our best practices. You noticed anything missing, wrong or not working? Do not hesitate to contact us and we will be pleased to answer your request.

The code for this tutorial is available in the repository. Also you can access a slightly enhanced version of the page directly here.