Les avantages du nouveau TAG d’intégration Javascript

Les tags d’intégration fournis par Qualifio Manager permettent de placer vos campagnes dans le code source d’une page HTML. Soit directement dans la page si vous passez par un éditeur de code, soit dans votre CMS s’il permet de visualiser votre article en « mode source ».

Depuis quelques semaines, un nouveau TAG d’intégration javascript a été mis à disposition dans Qualifio Manager

Il se présente sous la forme d’un layer (DIV) qui marque l’emplacement du jeu et d’un script, qui chargera le jeu dans cet emplacement :

<div id="qualifio_insert_place_001"></div><script type="text/javascript">(function(b,o,n,u,s){var
a,t;a=b.createElement(u);a.async=1;a.src=s;t=b.getElementsByTagName(u)[0];t.parentNode.insertBefore(a,t);o[n]=o[n]||[]}) (document,window,'_qual_async','script','//player.qualifio.com/kit/qualp.2.min.js');_qual_async.push(['createIframe', 'qualifio_insert_place_001', 'player.qualifio.com', '12', '8AFCAD60-E5C3-2018-6B54-722B05F05688', '100%', '1200', '']);</script>

Ce TAG ne nécessite aucun setup particulier. Pour rappel, dans la version précédente, pour l’intégration d’un tag JS, il fallait placer un fichier crossDomainEnabler.html sur le site accueillant les jeux. Ce n’est plus nécessaire aujourd’hui.

Quels sont les avantages de ce nouveau tag ?

  1. Le jeu se charge de manière asynchrone (le chargement du jeu ne sera en aucun cas un événement bloquant pour le chargement d’autres éléments de la page qui l’accueille) ;
  2. Si le jeu est associé à un template responsive, l’espace de jeu se redimensionnera en fonction du contenu, tant en largeur qu’en hauteur (il est néanmoins recommandé de définir une hauteur de jeu par défaut pour les anciens navigateurs tels que IE8) ;
  3. L’écran actif est mémorisé en session (si vous fermez votre navigateur accidentellement ou que vous quittez le jeu et que vous revenez ensuite sur la page accueillant le jeu, vous retrouvez votre jeu à l’endroit où vous l’avez laissé) ;
  4. Il est toujours possible d’appeler une fonction dans la page accueillant le jeu (instruction adserver pour rafraîchir le contenu des bannières publicitaires par exemple) ;
  5. Il est toujours possible de placer plusieurs jeux différents dans une même page ;
  6. La possibilité de savoir d’où proviennent vos participants; dès qu’un participant à une campagne Qualifio intégrée au moyen d’un tag Javascript provient d’une URL possédant des balises UTM [Source, Medium, Name, Term, Content], ces valeurs seront automatiquement ajoutées dans la ligne de sa participation dans le reporting Qualifio.
  7. Il est toujours possible de passer des paramètres ou des valeurs par défaut pour le formulaire d’identité en complétant le TAG (par exemple pour le préremplissage des champs du formulaire au départ d’un e-mail):

<div id="qualifio_insert_place_001"></div><script type="text/javascript">(function(b,o,n,u,s){var a,t;a=b.createElement(u);a.async=1;a.src=s;t=b.getElementsByTagName(u)[0];t.parentNode.insertBefore(a,t);o[n]=o[n]||[]}) (document,window,'_qual_async','script','//player.qualifio.com/kit/qualp.2.min.js');
_qual_async.push(['createIframe', 'qualifio_insert_place_001', 'player.qualifio.com', '12', '8AFCAD60-E5C3-2018-6B54-722B05F05688', '100%', '1200', '&var1=xxxx&var2=yyyy']);</script>

Pour éviter toute confusion, nous recommandons d’URL encoder les valeurs passées.

Pour terminer, si les variables passées sont des CRM Variables, le formulaire sera pré-rempli avec les valeurs passées. Exemple :

<div id="qualifio_insert_place_001"></div><script type="text/javascript">(function(b,o,n,u,s){var a,t;a=b.createElement(u);a.async=1;a.src=s;t=b.getElementsByTagName(u)[0];t.parentNode.insertBefore(a,t);o[n]=o[n]||[]}) (document,window,'_qual_async','script','//player.qualifio.com/kit/qualp.2.min.js');
_qual_async.push(['createIframe', 'qualifio_insert_place_001', 'player.qualifio.com', '12', '8AFCAD60-E5C3-2018-6B54-722B05F05688', '100%', '1200', '&firstname=Jack&lastname=Russel&email=jack@qualifio.com']);</script>

Quels sont les inconvénients de ce nouveau tag ?

A vrai dire, il n’y en a pas.

Cependant, certains CMS ne permettent pas le copier/coller de Tags Javascript dans un article ou ils ont été volontairement limités.

Pour ce faire, nous avons deux alternatives :

1. Le TAG iFrame

C’est un TAG HTML et non plus TAG Javascript.

Avantages :

  • Il est possible de placer plusieurs jeux dans une même page ;
  • Il est possible de passer des arguments dans l’appel du jeu :

<iframe src="http://player.qualifio.com/12/v1.cfm?id=8AFCAD60-E5C3-2018-6B54-722B05F05688&firstname=Jack&lastname=Russel&email=jack@qualifio.com" id="qualifio68224" width="100%" height="1200" scrolling="auto" frameborder="0" hspace="0" vspace="0"></iframe>

Désavantages :

  • Il est responsive en largeur s’il est associé à un template responsive mais pas en hauteur ;
  • Le jeu ne peut interagir avec des fonctions Javascript présentes dans la page accueillant le jeu ;
  • Pas de récupération de la phase de jeu en cours en cas de fermeture de navigateur

2. La Webview

C’est le lien qui mène directement au jeu. C’est au CMS de détecter la zone de jeu et de l’adapter en fonction de son contenu. Ce mode est généralement utilisé pour les applications mobiles.

Avantage :

Il est possible de passer des arguments dans l’appel du jeu :

http://player.qualifio.com/12/v1.cfm?id=8AFCAD60-E5C3-2018-6B54-722B05F05688&firstname=Jack&lastname=Russel&email=jack@qualifio.com

Désavantages :

  • Le jeu ne peut interagir avec des fonctions présentes dans la page accueillant le jeu mais c’est moins important s’il s’agit de l’utiliser dans une application mobile ;
  • Pas de mémorisation de la phase de jeu en cours ;
  • Pas de récupération de la phase de jeu en cours en cas de fermeture de navigateur.
qualifio

Qu’est-ce que Qualifio ?

Qualifio est la plateforme de référence dans le marketing interactif et la collecte de données. Elle vous permet de créer et de publier facilement des contenus viraux (quiz, jeux-concours, enquêtes et 50+ autres formats) sur tous vos canaux.En savoir plus