Écrire des scripts d'organisation

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>

Chemins de variables d'organisation disponibles

Ajoutez un fallback lorsque c'est nécessaire, par exemple centerLanguage || 'English' ou locale || 'en_US'.

Pour aller plus loin