Exemples de scripts

Ce guide est le complément développeur de l'article d'administration sur la configuration des scripts. Utilisez-le lorsque vous écrivez ou relisez le JavaScript qui s'exécute dans OmniLab Pages.

Où le script s'exécute

Les scripts d'organisation s'exécutent dans l'environnement OmniLab Pages côté participant, pas dans OmniLab Studio. Avant l'exécution des scripts actifs, OmniLab initialise window.omnilab et peut exposer à la page à la fois les données de groupe et des données de contact basiques.

window.omnilab?.contact?.externalId
window.omnilab?.contact?.email
window.omnilab?.group
window.omnilab?.group?.configuration?.variables
window.omnilab?.group?.uniqueKey
window.location.pathname

Les valeurs de contact ne sont disponibles que lorsque le participant est déjà connu dans ce parcours.

Votre code doit contenir de vraies balises script

OmniLab attend que le champ de code du script contienne un ou plusieurs blocs <script>...</script> valides. Les scripts inline et les chargeurs de scripts externes sont tous deux pris en charge.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "omnilab_view",
  organisation_key: window.omnilab?.group?.uniqueKey,
  page: window.location.pathname,
});
</script>

<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-AB12C3D"></script>

Contexte et comportement de déclenchement

Si le déclencheur courant est REGISTRATION, OmniLab garde tout de même les autres scripts actifs disponibles et ajoute les scripts ciblés sur l'inscription pour cette étape. En pratique, utilisez un script REGISTRATION séparé pour les événements de conversion plutôt que de surcharger le script de vue de page de base.

Cas d'usage sûrs

• Chargeurs d'analytics comme GTM, un tag de base de pixel, ou un bootstrap de dataLayer
• Comportement par organisation basé sur window.omnilab.group.configuration.variables
• Pushs d'événements légers à la visite ou à l'inscription
• Améliorations DOM mineures qui ne dépendent pas de sélecteurs fragiles et ne bloquent pas l'interaction

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "omnilab_view",
  organisation_key: window.omnilab?.group?.uniqueKey,
  country: window.omnilab?.group?.configuration?.variables?.country,
  locale: window.omnilab?.group?.configuration?.variables?.locale || "en_US",
  page: window.location.pathname,
  surface: "OmniLab Pages",
});
</script>

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "registration_complete",
  external_id: window.omnilab?.contact?.externalId,
  email: window.omnilab?.contact?.email,
  organisation_key: window.omnilab?.group?.uniqueKey,
});
</script>

Ce qu'il faut éviter

• Remplacer ou surcharger la logique métier d'OmniLab
• Le travail synchrone bloquant qui retarde le chargement de la page ou empêche la participation
• Les réécritures DOM fragiles qui dépendent de noms de classes ou de détails de layout instables
• Collecter des données personnelles supplémentaires sans base légale claire ni revue
• Les grosses bibliothèques côté client non essentielles au parcours participant

Workflow de test local

1. Construisez et relisez le script dans un environnement de staging.
2. Testez la diffusion en iframe et hors iframe si le script dépend du conteneur.
3. Si le déclencheur est REGISTRATION, complétez un parcours d'inscription complet et inspectez la console et le panneau réseau du navigateur.
4. Après que les admins ont enregistré le script, republiez la campagne concernée avant de valider l'expérience en production.

Passation aux admins

Lorsque vous remettez un script à un admin, fournissez :

• le nom du script
• le contexte visé (ALL, IFRAME_ONLY, ou NON_IFRAME_ONLY)
• le déclencheur visé (VISIT ou REGISTRATION)
• si le script doit démarrer actif ou inactif
• une instruction de retour arrière et un résultat de test en staging

Exemples complets de scripts

Chargeur de base Google Tag Manager

Utilisez ceci lorsque votre équipe veut disposer de GTM avant de déclencher d'autres événements.

<script>
(function (w, d, s, l, i) {
  w[l] = w[l] || [];
  w[l].push({
    'gtm.start': new Date().getTime(),
    event: 'gtm.js',
  });
  var f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l != 'dataLayer' ? '&l=' + l : '';
  j.async = true;
  j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-AB12C3D');
</script>

Événement de vue avec variables d'organisation

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'view_page',
  country: window.omnilab?.group?.configuration?.variables?.country,
  region: window.omnilab?.group?.configuration?.variables?.region,
  language:
    window.omnilab?.group?.configuration?.variables?.centerLanguage || 'English',
  locale:
    window.omnilab?.group?.configuration?.variables?.locale || 'en_US',
  page: window.location.pathname,
  page_type: 'Experience',
  organisation_key: window.omnilab?.group?.uniqueKey?.toUpperCase(),
  surface: 'OmniLab Pages',
});
</script>

Événement d'inscription avec dataLayer.push

Utilisez ceci lorsque vous voulez émettre un événement de type conversion après l'inscription.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'registration_complete',
  organisation_key: window.omnilab?.group?.uniqueKey?.toUpperCase(),
  country: window.omnilab?.group?.configuration?.variables?.country,
  locale:
    window.omnilab?.group?.configuration?.variables?.locale || 'en_US',
  page: window.location.pathname,
  registration_status: 'complete',
});
</script>

Déclencheur d'inscription Meta Pixel

Utilisez ce pattern lorsque le pixel Meta de base est déjà présent et que vous devez seulement déclencher un événement depuis OmniLab Pages.

<script>
if (typeof window.fbq === 'function') {
  window.fbq('track', 'CompleteRegistration', {
    organisation_key: window.omnilab?.group?.uniqueKey,
    country: window.omnilab?.group?.configuration?.variables?.country,
    locale:
      window.omnilab?.group?.configuration?.variables?.locale || 'en_US',
    page: window.location.pathname,
  });
}
</script>

Signal d'inactivité borne, limité à certaines campagnes

Utilisez ce script quand des campagnes borne doivent se réinitialiser après le départ d'un visiteur. C'est aussi le pattern de référence pour tout script qui doit s'exécuter sur certaines campagnes seulement : la liste d'autorisation est une correspondance de sous-chaîne sur l'URL complète, et un lien public de campagne fonctionne comme entrée.

<script>
(function () {
  const TRIGGER_STRINGS = ['summer-experience-kiosk', 'back-to-school-2026-kiosk'];

  const shouldActivate = TRIGGER_STRINGS.some((trigger) =>
    window.location.href.includes(trigger)
  );
  if (!shouldActivate) return;

  const IDLE_TIMEOUT = 10000;
  let timer;

  function sendIdle() {
    window.parent.postMessage({ type: 'omnilab:idle', timestamp: Date.now() }, '*');
    reset();
  }

  function reset() {
    clearTimeout(timer);
    timer = setTimeout(sendIdle, IDLE_TIMEOUT);
  }

  ['click', 'mousedown', 'mousemove', 'keydown', 'scroll', 'touchstart', 'touchmove'].forEach(
    (e) => document.addEventListener(e, reset, { passive: true })
  );

  reset();
})();
</script>

Installez-le en IFRAME_ONLY sur le déclencheur VISIT, et remettez à l'administrateur la liste des campagnes couvertes en même temps que le code — cette liste devra s'allonger à chaque nouvelle campagne borne. Le signal se répète toutes les 10 secondes tant que l'écran reste inactif. Le traiter est le rôle de l'application de la borne, pas le vôtre — la responsabilité de ce script s'arrête au postMessage. Intégration borne contient le contrat de réception à transmettre à celui qui développe la borne.

Pixels publicitaires

Déposer ici le pixel de votre plateforme publicitaire est ce qui lui permet de voir le trafic de campagne — pour construire une audience similaire à partir des personnes qui ont participé, et exclure celles qui ont déjà converti.

<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '<VOTRE-PIXEL-ID>');
fbq('track', 'PageView');
</script>

Google Ads et TikTok suivent la même forme : collez le tag de base fourni par la plateforme, sur le déclencheur de chargement de page. Déclenchez l'événement de conversion depuis un script distinct lié à l'inscription plutôt que d'ajouter des conditions au tag de base.

Si vous utilisez déjà un tag manager, chargez plutôt le conteneur et gérez les pixels dedans — un script dans OmniLab, tous vos tags gérés là où votre équipe les gère déjà.

Bandeau cookies

Chargez votre propre outil de consentement exactement comme sur votre site, sur le déclencheur de chargement de page :

<script src="https://cdn.example-consent-tool.com/loader.js" data-site-id="<VOTRE-SITE-ID>"></script>

Faites ensuite en sorte que vos autres scripts attendent sa réponse au lieu de se déclencher quoi qu'il arrive. La plupart des outils de consentement exposent un callback ou une variable globale à tester — suivez la documentation de cet outil, et testez le refus, pas seulement l'acceptation.

Lire des variables d'organisation dans votre script

Seuls deux chemins sont garantis pour chaque organisation :

window.omnilab?.group?.configuration?.variables est un magasin clé/valeur libre : un administrateur peut créer n'importe quelle clé sous Paramètres de l'organisation, et aucune n'est pré-remplie pour vous. country, locale et region dans les exemples ci-dessus sont des clés qu'une organisation a choisi de configurer — ce ne sont pas des champs intégrés que toutes les organisations possèdent. Vérifiez auprès de la personne qui configure l'organisation quelles clés existent réellement avant de les référencer, et prévoyez toujours un fallback pour une clé susceptible d'être absente, par exemple variables?.locale || 'en_US'.

Pour aller plus loin