Ce que votre page doit gérer
Les quatre choses dont votre page est responsable une fois une expérience OmniLab intégrée : hauteur, drawers, headers et permissions.
Gérez les quatre points qui relèvent de votre page une fois l'expérience intégrée, pour que le résultat paraisse voulu plutôt qu'enfermé dans une boîte. Cette page s'adresse à votre développeur web.
Tout ce qui est à l'intérieur de l'iframe appartient à OmniLab. Tout ce qui concerne le comportement de l'iframe dans votre page vous appartient.
La hauteur
L'expérience n'a pas de hauteur fixe. Un formulaire est court, un jeu remplit l'écran, un panneau de récompense se situe entre les deux — et l'iframe doit suivre, sinon le visiteur se retrouve avec une barre de défilement dans la page et votre footer flotte au milieu.
L'expérience indique à votre page comment elle veut être dimensionnée, et la réponse dépend du type de page :
| Elle annonce | Ce que votre page doit faire |
|---|---|
| Dimensionnement par le contenu | Suivre la hauteur rapportée par l'expérience au fil des changements |
| Dimensionnement par le viewport | Donner à l'iframe une hauteur issue de votre mise en page, et ignorer ce qu'elle rapporte |
Les jeux utilisent le dimensionnement par le viewport, car ils remplissent l'espace qu'on leur donne. Les pages d'accueil et les listes utilisent le dimensionnement par le contenu.
Ne dimensionnez pas un jeu d'après ce qu'il rapporte
Un jeu mesure l'espace qu'on lui a donné : réinjecter cette mesure comme hauteur de l'iframe crée une boucle sans entrée extérieure, et l'iframe se fige à sa taille initiale. OmniLab cesse totalement de rapporter une hauteur dans ce mode pour cette raison précise — une page qui en attend une avant d'afficher le jeu attendra donc indéfiniment. Donnez à l'iframe une vraie hauteur dès le départ.
Le tag réutilisable gère les deux modes à votre place. Si vous écrivez la page à la main, votre développeur a besoin du détail technique.
Les drawers qui s'ouvrent dans l'expérience
Les expériences ouvrent des drawers — une récompense, un formulaire, une étape de connexion. Un drawer vit dans l'iframe : il ne peut donc apparaître que là où se trouve l'iframe. Sur une page longue, cela peut être loin de là où regarde le visiteur.
Le tag réutilisable résout ce point : il indique à l'expérience quelle partie de l'iframe est réellement à l'écran, pour que le drawer s'y ouvre. Écrits à la main, les drawers s'ouvrent quand même, mais se replient sur une présentation simple en pleine hauteur.
Les headers sticky
Si votre site a un header fixé en haut de l'écran, un drawer peut s'ouvrir dessous. Le tag réutilisable repère seul un header standard et garde les drawers à l'écart. Indiquez-lui explicitement le vôtre s'il est inhabituel — voir Référence du tag JavaScript.
Autoriser le navigateur à le charger
Si votre site envoie une politique de sécurité de contenu — c'est le cas de la plupart — elle doit autoriser deux choses, sinon l'intégration est bloquée sans rien d'affiché pour l'expliquer :
- l'adresse depuis laquelle le script OmniLab se charge
- l'adresse depuis laquelle l'expérience elle-même est servie
Votre équipe web trouve les valeurs exactes dans Référence du tag JavaScript. Soulevez le sujet tôt : sur beaucoup de sites, la politique est gérée par une autre équipe que la page, et cette validation prend plus de temps que le développement.
C'est la raison la plus fréquente pour laquelle une intégration qui marchait sur une page de test échoue sur le vrai site — la page de test n'avait pas de politique, le vrai site en a une.
Les permissions navigateur
Les permissions sont accordées à votre page, pas à OmniLab. Si l'expérience utilise la caméra — jeu de scan, envoi de ticket de caisse — votre page doit l'autoriser sur l'iframe, et votre site doit être servi en connexion sécurisée. Rien ne s'affiche au visiteur si la page ne l'autorise jamais, et la panne ressemble à un jeu cassé plutôt qu'à une permission manquante.
Avant de considérer que c'est terminé
- Ouvrez la page sur un téléphone, pas seulement dans une fenêtre de bureau étroite.
- Ouvrez un drawer et faites défiler : la page derrière doit rester immobile.
- Si l'expérience utilise la caméra, testez la demande de permission sur un vrai appareil.
- Observez l'iframe quand l'expérience passe d'une étape à l'autre : elle doit se redimensionner sans à-coups ni espace vide.
Pour aller plus loin
URLs et paramètres d'intégration
Construisez l'adresse que charge votre page, et contrôlez quelle expérience apparaît, dans quelle langue et quelle variante.
Référence du tag JavaScript
Installez le tag OmniLab réutilisable, configurez ses options, et traitez les messages qu'une expérience intégrée envoie à votre page.