How to integrate THRON Player into native mobile applications

Business Case:

KPI to be measured

Bookmark this resource Follow

Ask a question

Was this article helpful? 0 out of 0 found this helpful

THRON Content Experience has been conceived to be run on web browsers; Android and iOS platforms offer a tool which is called webView, that allows you to include THRON Content Experience into native mobile applications. This approach, with respect to the implementation of a native player offers the following advantages:

  • It can be integrated into native applications very quickly and with minimum initial effort.
  • It allows for the display of any available content type, present and future, without the need for intervention on native app's code.
  • Content Intelligence data collection is natively integrated.

However, you should take into account that, when using webView, not all the standard browser-related operations are allowed. In fact:

  • On iOS there is a limited access to file system. This prevents the proper download of attachments via THRON Player.
  • The use of fullscreen is not guaranteed.
  • The lack of standard support from vendors prevents you from being able to guarantee the proper functioning across any available device.
  • Domain and referrer are not available into native applications. For this reason, content intelligence data related to views from native application will not expose such parameters.


In this article we are going to describe how to integrate THRON Content Experience into native applications. We are not going to provide instructions related to native code implementations since those are details that depend on the willing of the integrator. For an easier integration it is advisable to read this article that illustrates how to generate an embed code for the THRON Content Experience.

 

Implementation steps

 

We are going to need to:

  • Structure the HTML embed code for the Player;
  • Identify some placeholders for clientId, contentId and pkey or session token that will enable access to content;
  • Replace such placeholders with their actual values;
  • Have this HTML code to be uploaded into the webView.


Specific attention must be put into the pkey or the session token, their use depends on the type of application:

  • If the application is meant to deliver content to users authenticated via THRON credentials, then content display should be enabled via their session token. This allows you to avoid pkey generation that would enable public access to content.
  • If the application is meant to deliver content to external users you must enable a pkey (possibly a folder-related pkey).


Back to the HTML code, to give you an example, we are going to use the following code to embed a THRON Content Experience with fullscreen, user profiling and disabled controls.

More specifically:

  • Fullscreen display takes place using css
  • Contact profiling is not mandatory, content intelligence data will still be collected, even if users stay anonymous
  • Disabling controls is not mandatory, but according to operative system and the use of webView, fullscreen might not be available.
  • Tracking management is iframe based since it emulates the native mobile environment.
  • In the sample code, the text between brackets "<>" must be replaced with the actual value of the variable/parameter.

 

<!DOCTYPE html>
<html>
<head>
    <title>THRON Player</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        div#player {
            /** Needed for PDF contents on iOS to correctly enable scrolling */
            -webkit-overflow-scrolling: touch;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
<div id="player"></div>
<script src="https://<CLIENTID>-cdn.thron.com/shared/ce/bootstrap/1/scripts/embeds-min.js"></script>
<script>
    var options = {
        clientId: "<CLIENTID>",
        xcontentId: "<TOKENID>",
        useIframeTracking : true, //Necessario per l'intelligence, perchè il player non è in un sito web.
        sessId: "<TOKEN>",
        loginAs: {
                    loginType: "THRONUSER",
            loginValue: "<USERNAME>",
            contactName: "<NAME> <SURNAME>"
                }
            };
            var player = THRONContentExperience("player", options);
        
    var onBeforeInit = function(playerInstance){
        var schema = window.THRONSchemaHelper.getSchema()
      
        window.THRONSchemaHelper.removeElementsById(schema, "IMAGE", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "IMAGEGALLERY", ["fullscreenButton"]);
       
        window.THRONSchemaHelper.removeElementsById(schema, "VIDEO", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "VIDEOGALLERY", ["fullscreenButton"]);
        
        window.THRONSchemaHelper.removeElementsById(schema, "AUDIO", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "AUDIOGALLERY", ["fullscreenButton"]);
        
        window.THRONSchemaHelper.removeElementsById(schema, "URL", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "PAGELET", ["fullscreenButton"]);
        
        window.THRONSchemaHelper.removeElementsById(schema, "OTHER", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "OTHER_DOCUMENT", ["fullscreenButton"]);
               
        var paramsAug = {bars: schema};
        playerInstance.params(paramsAug);
    };
    player.on("beforeInit", onBeforeInit);
                
</script>

More in detail, the block:

 

loginAs: {
            loginType: "THRONUSER",
            loginValue: "<USERNAME>",
            contactName: "<NAME> <SURNAME>"
          }

 

enables contact profiling, whereas the block:

 

var onBeforeInit = function(playerInstance){
        var schema = window.THRONSchemaHelper.getSchema()
        
        window.THRONSchemaHelper.removeElementsById(schema, "IMAGE", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "IMAGEGALLERY", ["fullscreenButton"]);
        
        window.THRONSchemaHelper.removeElementsById(schema, "VIDEO", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "VIDEOGALLERY", ["fullscreenButton"]);
        
        window.THRONSchemaHelper.removeElementsById(schema, "AUDIO", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "AUDIOGALLERY", ["fullscreenButton"]);
        
        window.THRONSchemaHelper.removeElementsById(schema, "URL", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "PAGELET", ["fullscreenButton"]);
        
        window.THRONSchemaHelper.removeElementsById(schema, "OTHER", ["fullscreenButton"]);
        window.THRONSchemaHelper.removeElementsById(schema, "OTHER_DOCUMENT", ["fullscreenButton"]);
               
        var paramsAug = {bars: schema};
        playerInstance.params(paramsAug);
    };

 

allows for the fullscreen button to be disabled on any available content type.

We advise against uploading via webView an external page that includes the embed code. Even if it's possible, that would penalize the performance and the overall user experience of the native application. Moreover this avoids the passage on the internet of parameters related to the session or to the content itself, thus resulting in a safer implementation.

Was this article helpful?
0 out of 0 found this helpful

Have any question?

Open a ticket
Comments