Intro

There are 3 possible types of integration of the Qiota solution : by GTM, by ClientSide, by ServerSide


Include the getQiota.js script on each page of your site—it should always be loaded directly from our CDN rather than included in a bundle or hosted yourself.


Credentials


SDK JS (beta)SDK JS (live)

https://beta.qiota.com/assets/getQiota.js

Token partner Beta : On request

https://static.qiota.com/assets/getQiota.js

Token partner Live : On request


Integration


Asynchronous and deferred loading of getQiota.js


Asynchronous loading of JavaScript is generally recommended, as it can improve the user experience of your site by not blocking DOM rendering during script loading. 

You can  load getQiota.js using the async or defer attribute on the script tag. Note, however, that with asynchronous loading any API calls will have to be made only after the script execution has finished.


It is a good practice to use asynchronous Syntax to load the scripts. This helps to optimize the user experience on the website that are using the SDK. This approach reduces chances of the SDK library interfering with the hosting website. Here's the simple graph to show the difference between Asynchronous and Traditional Syntax.


Asynchronous:

 |----A-----|
    |-----B-----------|
        |-------C------|
                   

Synchronous:

  |----A-----||-----B-----------||-------C------|


Async Integration

<script type="text/javascript">
  var qiota = document.createElement('script');
  qiota.src = 'https://static.qiota.com/assets/getQiota.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]||document.getElementsByTagName('script')[0].parentNode).insertBefore(qiota, null);

  qiota.addEventListener('load', function(event) {
    window.q_token = 'YourToken'; // required
    window.q_consent = true or false; // depends from choice by user
    window.q_logged = true or false; // true or false in boolean, required
    window.q_subscribed = true or false; // true or false in boolean, required
    window.q_ressource_uri = 'https://www.hostname.com/article_to_unlock.php';  // required

    setupQiota(function (response) {
      if (!response) {
        console.log('Qiota error :', response);
        return;
      }
      console.log('Qiota init :', response);
    });
  });
</script>



Sync Integration



The <script> tag

Adding the <script> tag loads Qiota’s JavaScript file. This is required on each page that is

supposed to use a Qiota widget on! You may include this either within your <head> tag or

inside the <body> part of your HTML, before the end of the page.



...
<script src="https://static.qiota.com/assets/getQiota.js"></script>
...
<script type="text/javascript">
var q_token = 'YourToken'; // required
var q_consent = true or false; // depends from choice by user
var q_logged = true or false; // true or false in boolean, required
var q_subscribed = true or false; // true or false in boolean, required
var q_ressource_uri = 'https://www.hostname.com/article_to_unlock.php';  // required

setupQiota( function ( response ){
  if ( response ){
   return;
  }
});
</script>
...






GTM (Google Tag Manager)


The integration of Qiota module with GTM is quite simple. Once you have your credentials,

you can log into your GTM account and create a custom tag , for example QiotaTag .


In this custom tag you have to insert the javascript code below.


var qiota = document.createElement('script');
qiota.src = 'https://static.qiota.com/assets/getQiota.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]||document.getElementsByTagName('script')[0].parentNode).insertBefore(qiota, null);

qiota.addEventListener('load', function(event) {
  window.q_token = 'YourToken'; // required
  window.q_consent = true or false; // depends from choice by user
  window.q_logged = true or false; // true or false in boolean, required
  window.q_subscribed = true or false; // true or false in boolean, required
  window.q_ressource_uri = 'https://www.hostname.com/article_to_unlock.php';  // required

  setupQiota(function (response) {
    if (!response) {
      console.log('Qiota error :', response);
      return;
    }
    console.log('Qiota init :', response);
  });
});


In the Trigger on GTM you must add 2 filters:

1. the control to exclude the Page Hostname qiota.com ,

2. your own control to call the custom QiotaTag only on article pages. There is more

technical to do this with GTM for example by verifying the presence of an HTML ID, the

content type or custom variable, etc




NOTE : In any case it is important not to call the QiotaTag with a trigger on all pages of the

site.

Pre-requirement : the contents of the site must be opened also the content reserved to the

subscribers. The Qiota script will be in charge of blocking and opening according to the

settings defined in the dashboard.

The advantages of this solution is very fast integration without developpers.

The incovenient of this solution is a not optimal security of the opening of the contents and a

loading time which can be long.



Client Side


The getQiota.js JavaScript file allows you to render a Qiota widget on the client side.



The <div> tags


The <div> tag creates a widget. It contains a button, custom fields, and content to inform the

user of paywall condtion. It will also check if the user is logged in to Qiota, and provide

links/buttons for signing up..



...
<div class="qiota"> </div>
...




The widget will appear exactly where this <div> tag is included on your page. When the

getQiota.js file is loaded, this <div> tag will get populated with a paywall content.



Data to pass into your script tag


These options will help you build a custom widget on your site. With these options, you can

create your own Qiota “Log In” button to use on your site. You should integrate this script

before the end body tag.


window.q_token = 'YourToken';
window.q_logged = true or false ;
window.q_subscribed = true or false ;
window.q_ressource_uri = 'your_absolute_path/article_to_unlock.php' ;
window.q_id_article = 'id of article' ;


The first time the client calls the Qiota system, the Qiota system checks whether the token is

authorized and whether the content access right is still valid (Example: the user has already

purchased the content and wants to read it again after a few days).

Now, to unlock the content, you can call the API by curl by server side ( See the

documentation section to know how to unlock the content Call json API with CURL - unlock

the content ), o r you can stil use client side solution with getQiota.js (S ee the documentation

section Tag block for the content to unlock )



Tag block for content to unlock


To unlock the content by client side it’s very simple, you need to put your content that you

want protect by paywall into div block like this exemple :

...
<div class= "qiota_reserve" >
  <!-- your content here whit HTML elements -->
</div>
...


At this point you can collect, track, and store the information and install a cookie with a TTL

of the duration received in parameter by qiota.

This approach, as described in the paragraph For better User Experience and lower data

volumes , optimizes browsing performance and HTTP requests.

Otherwise you can redirect the referer URL by passing the "uid" parameter in GET, the Qiota

script checks to see if the access by cookie is still valid.

Server Side





Call API with CURL


If you want to use a server side solution you need to have a 2 separates calls to your system

to get the content. The first call for the content not protected and second to get the content to

unlock


Unlock the content


The client calls the Qiota API via the method Post to unlock content :

Response json format


{
  "msg":{
    "token":"authorized",
    "access_expired":"false",
    "idArticle":12,
    "uri":"/article/test/hello1.php",
    "expirationDate":"2017-01-15T15:52:27.000+01:00",
  }
}



Example PHP - [ server side]

The process consists of asking the Qiota system if the content is still available, because the

expiration date of content may be passed or the user does not have credits.

The php code in this example call via Curl to the data webservice. Next, it retrieves the

response to grant access to content.


<?php
$post = [
'token' => "TokenCode" ;
'referer' => $_GET [ 'q_ressource_uri' ];
'uid' => $_GET [ 'uid' ];
];
$ch = curl_init ();
curl_setopt ( $ch , CURLOPT_URL , 'http://beta.qiota.com/data' );
curl_setopt ( $ch , CURLOPT_RETURNTRANSFER , true );
curl_setopt ( $ch , CURLOPT_POSTFIELDS , http_build_query ( $post ));
$response = json_decode ( curl_exec ( $ch ), true );
if ( $response [ 'msg' ][ 'access_expired' ] == "false" &&
$response [ 'msg' ][ 'token' ] == "authorized" ) {
echo "Content unlocked ! With PHP by Qiota " ;
// Call your system to get the content
// Here you can also create a Cookie session with expirationDate, URI,
IdAricle values returned from Qiota and other specific Client data
}
?>



For better User Experience and lower data volumes


Once the Qiota system responds with credentials from backend in JSON format or from

client side, you should integrate the information in a Cookie client session with the value of

expirationDate as stated in the Qiota message.

This integration improves user experience because you can call the Qiota User Workflow

only once checked the presence and validity of a Cookie, previously created, has failed.

The second advantage of this integration is to reduce the volumes of data transferred over

http protocol between the client and the Qiota system.