Intro

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


Credentials

SDK JS (beta)SDK JS (live)

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

Token partner Beta : On request

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

Token partner Live : On request







With 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.



<script src = "https://www.qiota.com/assets/getQiota.js" ></script>
<script type = "text/javascript" >
var q_token = " YourToken " ; // required
var q_content_class = " .YourClassForAllArticleContent " ; // required
var q_logged = "YourGlobalVariable" ; // true or false, not required
var q_subscribed = "YourGlobalVariable" ; // true or false, not required
setupQiota( function ( response ){
if ( response ){
return ;
}
})
< / script>



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 <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://www.qiota.com/assets/getQiota.js" ></script>
...




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.

...
<script type = "text/javascript" >
var q_token = " YourToken " ;
var q_logged = " true/false " ;
var q_subscribed = " true/false " ;
var q_ressource_uri = " your_absolute_path/article_to_unlock.php " ;
var q_id_article = " id of article " ;




//also is possible to put a custom var to pass at script example
//category of articles, tags, email
setupQiota( function ( response ){
// If there was a problem calling qiota return with error message
// This could happen if there is a network error or if the authorization
is invalid.
if ( ! response ){
console .log (response)
return ; }
})
< / script>
...

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.