English (US) Italiano Português do Brasil

Scripts Dynamic Yield

S’abonner

Ajoutez les scripts Dynamic Yield à la balise <head> de votre site, sur n’importe quelle page. Une fois les scripts implémentés, le suivi de l’activité de vos visiteurs sera assuré et les campagnes Dynamic Yield pourront être diffusées sur votre site.

Implémentation

  1. Sur la console Dynamic Yield, allez dans Paramètres › Paramètres généraux.
  2. Copiez/collez l’extrait de code immédiatement après la balise <head> d’ouverture de chaque page de votre site.

    script_dashboard.png

Exemple de balise <head> complète avec le script, les balises prefetch et preconnect, et le contexte de la page. Veillez à respecter cet ordre :

Code
<head>

//Prélecture et préconnexion DNS
<link rel="preconnect" href="//cdn.dynamicyield.com">

<link rel="preconnect" href="//st.dynamicyield.com">

<link rel="preconnect" href="//rcom.dynamicyield.com">

<link rel="dns-prefetch" href="//cdn.dynamicyield.com" />

<link rel="dns-prefetch" href="//st.dynamicyield.com" />

<link rel="dns-prefetch" href="//rcom.dynamicyield.com" />

...

...

…

//Contexte DY

<script type="text/javascript">

 window.DY = window.DY || {};

 DY.recommendationContext = { type: "PRODUCT", data: ["SKU123"] };

</script>

//Scripts DY

<script src="//cdn.dynamicyield.com/api/[SECTION_ID]/api_dynamic.js" type="text/javascript"></script>

<script src="//cdn.dynamicyield.com/api/[SECTION_ID]/api_static.js" type="text/javascript"></script>

</head>

Meilleures pratiques

  • Méthode d’implémentation : intégrez le script Dynamic Yield directement dans le code de votre site, et non avec un gestionnaire de balises, afin d’éviter le scintillement.
  • Synchronicité : évitez de configurer les scripts pour qu’ils s’exécutent de manière asynchrone. Des comportements inattendus peuvent se produire, affectant les variations affichées, les temps de chargement, le scintillement, etc. Dynamic Yield offre un taux élevé de redondance des serveurs et une grande rapidité de chargement, de sorte qu’il n’est pas nécessaire de procéder à un chargement asynchrone pour accélérer le chargement du contenu. Toutes les autres opérations réalisées après le chargement des scripts sont exécutées de manière asynchrone.

Ajout des balises prefetch et preconnect

Comme les scripts Dynamic Yield sont servis à partir d’un nom d’hôte différent de celui de votre site web, le navigateur doit résoudre le DNS. Placez une balise dns-prefetch avant le script pour réduire la durée de résolution DNS.

Les balises de préconnexion permettent au navigateur d’établir des connexions avant qu’une requête HTTP ne soit envoyée au serveur. Cela élimine la durée de latence aller-retour et fait gagner du temps aux utilisateurs. Certains navigateurs (comme Explorer, Safari d’iOS) ne prennent pas en charge les balises de préconnexion et les ignorent.

Ces appels sont inclus par défaut dans le script fourni dans la page Paramètres › Paramètres généraux qui doit être copié sur toutes les pages de votre site.

Centre de données aux États-Unis :

<link rel="preconnect" href="//cdn.dynamicyield.com">
<link rel="preconnect" href="//st.dynamicyield.com">
<link rel="preconnect" href="//rcom.dynamicyield.com">
<link rel="dns-prefetch" href="//cdn.dynamicyield.com">
<link rel="dns-prefetch" href="//st.dynamicyield.com">
<link rel="dns-prefetch" href="//rcom.dynamicyield.com">
<script type="text/javascript" src="//cdn.dynamicyield.com/api/[YOUR SITE ID]/api_dynamic.js"></script>
<script type="text/javascript" src="//cdn.dynamicyield.com/api/[YOUR SITE ID]/api_static.js"></script>

Centre de données en UE :

<link rel="preconnect" href="//cdn-eu.dynamicyield.com">
<link rel="preconnect" href="//st-eu.dynamicyield.com">
<link rel="preconnect" href="//rcom-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//cdn-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//st-eu.dynamicyield.com">
<link rel="dns-prefetch" href="//rcom-eu.dynamicyield.com">
<script type="text/javascript" src="//cdn-eu.dynamicyield.com/api/[YOUR SITE ID]/api_dynamic.js"></script>
<script type="text/javascript" src="//cdn-eu.dynamicyield.com/api/[YOUR SITE ID]/api_static.js"></script>

Architecture des scripts et détails avancés

Nous exécutons actuellement plusieurs sections de code sur le site web des clients afin de réaliser ce qui suit :

  • Collecte de données
  • Collecte de paramètres
  • Prise de décision
  • Exécution d’expériences (y compris les balises et les actions)
  • Recommandations

Cette section décrit tous les scripts exécutés sur votre page web, la chronologie de leur exécution et leurs dépendances.

Remarque : st.dynamicyield.com, async-px.dynamicyield.com et cdn.dynamicyield.com sont remplacés par st-eu.dynamicyield.com, async-px-eu.dynamicyield.com et cdn-eu.dynamicyield.com si vous utilisez le centre de données Dynamic Yield de l’EU.

Flux d’exécution

Screen Shot 2023-08-28 at 16.18.07.png

  1. L’implémentation d’api_static et d’api_dynamic sur la page assurera le rendu des campagnes sur votre site.
  2. L’action par défaut pour l’injection de la collection ajoutera un appel à st.dynamicyield.com/st — renvoie les données relatives à l’utilisateur et à la section et ajoute un appel pour charger notre script de collecte.
  3. Le script de collecte est chargé -  dy-coll-nojq-min.js 
  4. Le script de collecte lancera un appel async-px.dynamicyield.com pour signaler les points d’extrémité de la collecte au serveur.

Scripts sur la page

Scripts de l’expérience

  • api_static.js
    1. Chargé depuis le CDN avec un cache d’une heure
    2. Rend toutes les expériences disponibles et sert des variations basées sur leur ciblage
    3. Attend que toutes les données dynamiques soient chargées sur la page avant d’exécuter toutes les expériences. Une fois chargé, tous les appels API seront activés pour les campagnes.
    4. 69,8 ko après gzip (dernière mise à jour : nov. 2020)
  • api_dynamic.js
    • Chargé depuis le CDN avec un cache de 5 minutes
    • Contient tous les paramètres de la campagne Dynamic Yield
    • La taille du fichier varie en fonction du nombre d’expériences actives

Script de collecte asynchrone
Le script d’implémentation appelle notre serveur et configure toutes les données de l’utilisateur et du site sur la page, puis charge dy-coll-min.js à partir du CDN. Le script effectue toutes les opérations de collecte de données et expose l’API sur la page.

Processus de collecte des données

Opérations de collecte
Lorsque notre script de collecte statique est exécuté, nous effectuons les actions suivantes sur la page :

  1. Activation de tous les récepteurs de la page
  2. Calcul de la définition du segment - évaluation JavaScript personnalisée par section pour définir le segment de la page en cours.
  3. Calcul des variables du site - évaluation du code JavaScript des variables du site et sauvegarde des résultats dans une variable locale
  4. Calcul des valeurs des objectifs
  5. Initialisation du QManager - gère les appels DY.API
  6. Enregistrement sur le serveur de ce qui reste des exécutions précédentes
  7. Marquage et exécution des expériences FrontPage
  8. Ajout des auditeurs pour toutes les unités surveillées sur la page
  9. Exécution des détecteurs pour identifier la page actuelle et l’ensemble des caractéristiques de l’utilisateur
  10. Enregistrer les données de la page sur le serveur
  11. Enregistrer les impressions sur le serveur (1 seconde après que dom soit prêt)
  12. Enregistrer les impressions réelles sur le serveur (toutes les 10 secondes)
  13. Enregistrement des clics sur les unités surveillées (à chaque clic sur une unité)
  14. Enregistrement des événements dynamiques - sur la base des exécutions de DY.API

Collecte de données - appels réseau

L’objectif de ces appels est de collecter les données. Toutes les réponses à ces demandes sont vides. Ces demandes n’affectent pas l’exécution ni le rendu des pages

  • async-px.dynamicyield.com/uia – rapport d’informations sur les pages et les utilisateurs
  • async-px.dynamicyield.com/imp — signale toutes les unités surveillées sur la page — peut être exécuté plusieurs fois dans une application à page unique et signale le delta
  • async-px.dynamicyield.com/dpx – signale les appels d’événements dynamiques et leurs propriétés
  • async-px.dynamicyield.com/var – rapport sur l’impression de la variation
  • async-px.dynamicyield.com/ac – rapport sur la variation des clics
  • async-px.dynamicyield.com/id – identifie l’utilisateur avec son UID et le type d’UID - nécessaire pour l’omni-canal
  • async-px.dynamicyield.com/rcomEvent – interactions de recommandation côté client – JSON avec les données PRIMP, WRIMP, CLICK
  • async-px.dynamicyield.com/batch - une demande en lot contenant des impressions, des décisions et d’autres rapports internes de Dynamic Yield.