Les organisations qui souhaitent que les participants puissent passer le test en ligne directement sur leur site web peuvent le faire en intégrant le test dans une iframe. L'intégration d'une iframe nécessite une configuration supplémentaire par rapport à l'ajout d'un lien vers votre test en ligne.
Dans cet article :
- Pour activer l’intégration
- Extraits de code iFrame
- Transmission de paramètres URL à une iframe
- Intégration d’une couche de communication iframe
Pour activer l’intégration
La première étape pour intégrer votre test en ligne est d'activer l'intégration dans votre portail web SHOEBOX. Cette opération ne peut être effectuée que par un utilisateur de type administrateur.
- Connectez-vous au Portail de gestion des données SHOEBOX.
- Dans la barre latérale, survolez l’onglet « Paramètres ».
-
Sous la rubrique « SHOEBOX Online », cliquez sur « Avancé ».
- Dans le coin supérieur droit de la page, cliquez sur « Modifier ».
- Dans la section « Intégrer le test », activez l’interrupteur.
- Dans le champ « URL de la page web », entrez l’URL de la page qui contiendra l’iframe.
- À des fins de test : Les adresses IP et localhost peuvent être utilisées pour tester votre implémentation avant la mise en production.
- Pour une implémentation en production : Pour améliorer le référencement SEO, incluez l’URL complète de la page qui contiendra l’iframe.
-
Cliquez sur « Ajouter ».
- Dans le coin supérieur droit de la page, cliquez sur « Enregistrer ».
Avec cette fonction activée, vous pouvez intégrer le test en ligne sur la page web fournie.
Extraits de code iFrame
Pour activer le redimensionnement dynamique de votre iframe intégrée, vous devrez ajouter l'extrait de code suivant (qui comprend un script pour un redimensionnement réactif de l'iframe) au code HTML de la page web où l'iframe sera intégrée. Pour plus d'informations sur la bibliothèque iFrame Resizer, consultez la page Github du développeur.
Extrait de code
<script src="https://shoeboxonline.com/contents/iframeResizer.min.js"></script>
...
<iframe id="shoeboxonlineiframe" src="https://shoeboxonline.com/<YOUR_SITE_HERE>?" scrolling="no"></iframe>
...
<script> iFrameResize({}, '#shoeboxonlineiframe') </script>
Pour ajouter l’extrait de code à votre page web
- Copiez l’extrait de code fourni ci-dessus et collez-le dans la page web qui hébergera votre test SHOEBOX Online.
-
Dans l’extrait, remplacez le texte <YOUR_SITE_HERE> par l’URL de votre test SHOEBOX Online. Vous pouvez trouver cette URL sur la page « Configuration du test » dans votre Portail de gestion des données SHOEBOX.
-
Dans la section <head> de la page web, ajoutez la balise <meta> suivante spécifiant l’attribut viewport (cela rendra votre page parente adaptée aux mobiles) :
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> -
Sous la balise <meta>, ajoutez une balise <style> qui spécifie la largeur de l’iframe pour les écrans mobiles et de bureau. Pour un exemple, voir l’image ci-dessous.
- Après avoir complété les étapes ci-dessus, votre page web devrait afficher une iframe réactive contenant votre test SHOEBOX Online.
Transmission de paramètres URL à une iframe
Si vous utilisez des paramètres URL tels que refid, refSource, ou paramètres UTM mais souhaitez intégrer le test en ligne sur votre site web, vous devrez ajouter un peu de code pour que l’iframe ait connaissance de ces paramètres.
Bien qu’il existe plusieurs méthodes que votre développeur web pourrait utiliser pour transmettre les paramètres URL à l’iframe, nous avons fourni un exemple d’extrait de code utilisant javascript.
Instructions et extraits de code
- Sous l’appel <iframe>, placez l’extrait fourni ci-dessous.
- Assurez-vous que la valeur de l’« id » dans l’appel <iframe> et l’« elementId » dans l’extrait de code ci-dessous sont identiques.
L’extrait de code transmettra tous les paramètres URL à l’iframe. Vous n’avez pas besoin de définir explicitement les paramètres URL utilisés.
<script>
// ID de l’iframe qui intègre SHOEBOX Online const elementId = 'shoeboxonlineiframe'
// Ajoutez des chaînes pour restreindre les paramètres de requête de la page parente qui seront transmis à l’iframe.
// Laissez vide pour permettre tous les paramètres de requête.
const allowedParams = [ ]
const embedSrc = new URL(document.getElementById(elementId).src)
const embedParams =new URLSearchParams(embedSrc.search)
const parentParams = new URLSearchParams(window.location.search)
parentParams.forEach ( (value, key) => { if (!allowedParams.length | | allowedParams.includes(key) ) { embedParams.set (key, value) }} )
embedSrc.search = embedParams.toString( ) document.getElementById(elementId).src = embedSrc.toString( )
</script>Intégration d’une couche de communication iframe
Si vous utilisez un test en ligne intégré et souhaitez recevoir des informations sur les interactions des participants pendant le test, vous pouvez le faire en configurant une couche de communication iFrame. Les informations recueillies peuvent être utilisées pour exploiter des outils de suivi de campagne ou pour orienter les participants qui abandonnent à des endroits spécifiques du test.
Pour configurer la couche de communication iframe
Pour recevoir des données d’une iframe intégrée, ajoutez l’extrait suivant pour configurer un écouteur d’événements sur le site web de votre organisation.
<script type="text/javascript">
window.addEventListener("message", (event) => {
// Faisons-nous confiance à l’expéditeur de ce message ?
var authorizedOrigins = ['https://shoeboxonline.com', 'https://www.shoeboxonline.com'];
if (authorizedOrigins.indexOf(event.origin) < 0) return;
// Ignorer les événements du redimensionneur d’iframe
if(event.data?.includes("iFrameSizer")) return;
var sboPayload = JSON.parse(event.data);
// Ici, vous pouvez exploiter la charge utile et envoyer des données à vos outils d’analyse !
}, false);
</script>Une fois cela en place, l’écouteur d’événements commencera à vérifier activement les événements se produisant dans l’iframe, et vous enverra des données basées sur les événements qui surviennent lorsqu’un participant interagit avec le test en ligne.
Exemples d’événements
Vue de page : Envoyé lorsqu’un client consulte une page spécifique.
{'eventType': 'screen-view','eventData':
{'screenName': 'splash-screen'
}}Liste des écrans suivis
| Page/Modal | Nom de l’écran |
|---|---|
| Écran d’accueil | splash-screen |
| Premiers pas - Comment ça fonctionne | getting-started |
| Démographie - Avant de commencer | demographics |
| Capture de contact - pré-test | pre-test-contact-capture |
| Questionnaire | questions |
| Configuration - casque, volume, audio | setup |
| Test de tonalité pure | estimate-threshold |
| Résultats | results |
| Modal de la déclaration de confidentialité | privacy-statement-modal |
| Modal de sélection de la langue | select-language-modal |
| Lien « Impossible d’entendre l’audio » dans la configuration audio | cannot-hear-audio-modal |
| « Entendre l’audio dans les deux oreilles » dans la configuration audio | hear-audio-in-both-ears-modal |
| Aide pour régler le volume de l’appareil dans la configuration audio | set-device-volume-modal |
| Volume maximal atteint dans le test de tonalité pure | puretone-max-limit-reached-modal |
| « Comment mon résultat est-il calculé ? » sur la page des résultats | how-my-result-is-calculated-modal |
Screener complété : Envoyé lorsqu’un client a complété un screener. Cela vous indiquera également :
- Le resultUUID, qui est un identifiant unique pour le résultat du participant.
- La langue sélectionnée par le participant.
{'eventType': 'screener-completed','eventData':
{'resultUUID': '5b636abf-0e16-4084-b77a-eae79e589f7d', 'language': 'en'
}}Résultats téléchargés : Envoyé après que le screener a réussi à télécharger les résultats sur le serveur. Cela vous indiquera également :
- Le resultUUID, qui est un identifiant unique pour le résultat du participant.
- La langue sélectionnée par le participant.
{eventType: 'results-uploaded',eventData:
{resultUUID: '5b636abf-0e16-4084-b77a-eae79e589f7d',language: 'en'
}}Appel à l’action sur le résultat cliqué : Indique lorsqu’un client a cliqué sur le bouton d’appel à l’action sur une page de résultat. Cela vous indiquera également :
- Le resultUUID, qui est un identifiant unique pour le résultat du participant.
- L’URL du bouton d’appel à l’action (CTAURL), qui est l’URL vers laquelle le bouton d’appel à l’action de votre organisation pointe.
- Le texte du bouton d’appel à l’action (CTAtext), qui est le texte affiché sur le bouton d’appel à l’action de votre organisation.
{'eventType': 'result-cta-clicked','eventData':
{'resultUUID': '5b636abf-0e16-4084-b77a-eae79e589f7d',
'CTAURL': 'https://myctalink.com?someParameter=10'
'CTAtext': 'Achetez un appareil auditif maintenant !'
}}