Bonnes pratiques pour le Web SDK
La vitesse du site web est extrêmement importante pour votre entreprise et notre technologie est axée sur l'amélioration de l'expérience de vos clients sur votre site. Par conséquent, les performances des pages sont un élément essentiel de nos solutions. Pour augmenter efficacement l'engagement et maximiser les taux de conversion, nous adoptons plusieurs approches pour réduire au minimum les temps de chargement des pages.
Intégrations tierces et performances
Il est important de comprendre l'emplacement et la priorité de chargement de tous les outils et services que vous utilisez sur votre page. Toute intégration tierce ajoutée à une page web aura un impact sur le temps de chargement global.
L'intégration Rokt est spécifiquement conçue pour améliorer l'expérience de vos clients et générer une valeur supplémentaire à partir de votre page. D'autres intégrations tierces couramment utilisées sont davantage axées sur le suivi et l'analyse, et n'ont pas d'impact direct sur l'expérience client.
Pour garantir que vous tirez le maximum de valeur de votre page, il est important de veiller à ce que les services axés sur le client, tels que Rokt, soient déclenchés avant le suivi et les autres services en arrière-plan.
La meilleure pratique pour intégrer Rokt consiste à inclure le code d'intégration directement dans le contenu de la page, en le plaçant dans la balise <head> de la page avant les autres intégrations tierces.
Voici la meilleure approche pour intégrer Rokt :
- Placer le chargement du script de lancement de l’intégration dans l’élément
<head>de la page, avant les autres intégrations tierces. - Déclencher le placement de Rokt dès que les attributs contextuels sont disponibles.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<!-- Part #1 - Load the Web SDK -->
<script type="module">
window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
const target = document.head || document.body;
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
script.fetchpriority = "high";
script.crossOrigin = "anonymous";
script.async = true;
script.id = "rokt-launcher";
script.addEventListener('load', () => resolve());
script.addEventListener('error', (error) => reject(error));
target.appendChild(script);
});
</script>
<!-- Other scripts and meta tags -->
</head>
<body>
<!-- Your HTML content here -->
<!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
<script type="module">
await window.RoktLauncherScriptPromise;
const launcher = await window.Rokt.createLauncher({
accountId: "rokt-account-id",
sandbox: true,
});
await launcher.selectPlacements({
attributes: {
email: "",
firstname: "",
lastname: "",
confirmationref: "",
billingzipcode: "",
amount: "",
paymenttype: "",
ccbin: "",
mobile: "",
country: "",
language: "",
currency: "",
billingaddress1: "",
billingaddress2: "",
age: "",
gender: "",
cartItems: JSON.stringify(cartItems),
},
});
</script>
<!-- Your HTML content here -->
</body>
</html>
Pour les services de fond comme Google Analytics, la meilleure approche est de placer ces intégrations en bas de la page et de les charger de manière asynchrone. Cette approche vise à garantir que même si ces ressources se chargent lentement, elles n'affectent pas l'expérience client.
Asynchrone vs synchrone
Une page web se compose d'une tête et d'un corps. Tout ce qui se trouve dans le corps est rendu par le navigateur et la tête est utilisée pour charger des ressources externes telles que des scripts et des feuilles de style. Lorsque la page se charge dans un navigateur, le navigateur commence à lire le HTML de haut en bas. La section de la tête a une caractéristique spéciale qui empêche l'affichage de quoi que ce soit tant que toutes les ressources externes ne sont pas entièrement chargées. C'est un chargement synchrone.
Cependant, vous pouvez modifier cette fonctionnalité pour que certains éléments se chargent sans attendre que toutes les ressources externes soient chargées. C'est ce qu'on appelle un chargement asynchrone.
Le script Rokt se charge de manière asynchrone comme dans l'exemple de l'ajout de Rokt à votre site. Cela accélère le chargement global d'une page. Étant donné que le navigateur n'attend pas que les ressources Rokt soient entièrement chargées avant d'afficher la page au client, l'expérience client n'est pas interrompue et l'emplacement Rokt est affiché lorsque tout est prêt.
Pour des intégrations plus approfondies où Rokt est essentiel au flux de transaction, comme l'offre de ventes incitatives ou d'options de paiement, les clients peuvent passer à un chargement synchrone de Rokt afin que la page ne soit affichée qu'une fois que le contenu Rokt est entièrement chargé.
Chargement synchrone
Voici à quoi peut ressembler une page lorsque les ressources sont chargées de manière synchrone :
<html>
<head>
<script src="a.js" />
<script src="b.js" />
<script src="c.js" />
<script src="d.js" />
<script src="e.js" />
</head>
<body>
Votre contenu
</body>
</html>
Lorsque toutes les ressources sont synchrones, les éléments se chargent dans l'ordre :
Chargement asynchrone
Le chargement d'un script de manière asynchrone présente l'avantage de ne pas ralentir la page, mais cela peut entraîner l'apparition soudaine de contenu sur une page ou des clignotements lorsque le contenu de la page d'origine se charge.
Voici à quoi peut ressembler une page lorsque un script est chargé de manière asynchrone :
<html>
<head>
<script src="a.js" />
<script async src="rokt.js" />
<script src="c.js" />
<script src="d.js" />
<script src="e.js" />
</head>
<body>
Votre contenu
</body>
</html>
Lorsqu'un script est asynchrone, il se charge simultanément avec les autres scripts :
Dans ce cas, Rokt n'empêche pas le chargement des autres ressources, car le script Rokt et les autres ressources de la page peuvent se charger en même temps. Cela accélère le chargement global d'une page. Étant donné que le navigateur n'attendra pas que les ressources Rokt aient fini de se charger avant d'afficher la page au client, l'expérience n'est pas interrompue et l'emplacement Rokt sera affiché lorsqu'il sera prêt.
Chargement de Rokt via un gestionnaire de balises
Nous vous recommandons de lancer le SDK Rokt en le plaçant directement dans le HTML de votre page pour offrir à vos clients la meilleure expérience possible.
Si vous décidez de charger Rokt via un gestionnaire de balises, nous prenons en charge les intégrations avec Google Tag Manager, Tealium, Segment et la plateforme Adobe Experience.
Chargement de Rokt via les moteurs d'expérimentation
Nous vous recommandons d'utiliser les outils d'expérimentation fournis par Rokt pour garantir à vos clients la meilleure expérience possible. Pour plus d'informations sur les outils d'expérimentation de Rokt, contactez votre gestionnaire de compte.
Utilisation de l'iframe préparatoire
Pour optimiser à la fois le temps d'interaction de Rokt et les performances de votre page, nous vous recommandons notre solution d'iframe préparatoire : une iframe sécurisée, facile à mettre en œuvre et flexible, placée à une étape antérieure de votre flux de transaction. L'iframe préparatoire précharge le Web SDK en téléchargeant et mettant en cache les ressources Rokt afin qu'elles soient faciles à récupérer au moment d'afficher l'emplacement. En téléchargeant le SDK par sections, nous réduisons la bande passante réseau requise sur les pages essentielles à l'expérience de vos clients. Le préchargement permet une expérience améliorée pour les clients et de meilleurs résultats de performance pour vous.
Pour plus d'informations, consultez l'exemple d'intégration de l'iframe préparatoire ici.
Pour de meilleures performances, assurez-vous de mettre à jour vers la dernière version du Rokt Integration Launcher avant de mettre en œuvre l'iframe préparatoire.
Utilisez la dernière version du Rokt Integration Launcher
Nous travaillons continuellement pour améliorer les performances du Web SDK et optimiser l'expérience des clients visitant votre site. Par conséquent, le Rokt Integration Launcher sera toujours lié à la dernière version pour garantir la meilleure expérience pour vos clients. Utilisez l'URL qui pointe vers la dernière version du Rokt Integration Launcher, qui est :
https://apps.rokt.com/wsdk/integrations/launcher.js
La mise à jour vers la dernière version du Rokt Integration Launcher entraîne des améliorations de temps de chargement pour certains partenaires. Dans les versions précédentes du Web SDK, deux domaines distincts étaient utilisés : wsdk.rokt.com pour servir les ressources statiques, et apps.rokt.com pour la communication API avec les systèmes backend de Rokt. Ces deux domaines ont maintenant été unifiés en un seul domaine à apps.rokt.com.
Les intégrations basées sur les versions précédentes du Web SDK nécessitent deux résolutions de domaine (une pour wsdk.rokt.com et une pour apps.rokt.com). L'unification vers un seul domaine supprime l'une de ces résolutions, ce qui améliore les performances.
Utiliser des indications de ressources
L'utilisation d'indications de ressources est un moyen rapide et facile d'améliorer les temps de démarrage de l'intégration Rokt. L'établissement de la connexion aux scripts tiers peut représenter une part importante des temps de chargement, en particulier lorsque le domaine tiers est sécurisé, comme c'est le cas avec Rokt.
La balise preload informe le navigateur qu'une ressource est nécessaire pour cette page et qu'elle doit être récupérée dès que possible. Une fois que la demande d'affichage d'un emplacement Rokt est effectuée plus tard, Rokt peut rapidement afficher des offres pour offrir une expérience optimale à vos clients.
Pour mettre en œuvre l'indication de ressource preload, incluez le code suivant dans la section <head> de toutes les pages qui affichent des emplacements Rokt :
<link
rel="preload"
as="script"
href="https://apps.rokt.com/wsdk/integrations/launcher.js"
/>
Les indications de ressources aident les navigateurs dans le processus de décision concernant les origines auxquelles ils doivent se connecter et les ressources qu'ils doivent récupérer et prétraiter pour améliorer les performances de la page.
DNS-prefetchindique une origine qui peut être utilisée pour récupérer les ressources requises et qui doit être résolue le plus tôt possible. Obtenez plus d'informations sur w3.org.Preconnectindique une origine qui peut être utilisée pour récupérer les ressources requises afin que les navigateurs puissent initier une connexion précoce, ce qui inclut la recherche DNS, l'établissement de la connexion TCP et la négociation TLS facultative. Obtenez plus d'informations sur w3.org.Preloadindique une ressource qui sera utilisée dans le cadre de la navigation en cours et qui doit être récupérée le plus tôt possible. Obtenez plus d'informations sur w3.org.
Assurez-vous que le lien référencé dans preload correspond à l'URL pointant vers le script Rokt dans le code d'intégration de votre page.
Précharger le script Rokt (pour les applications à page unique)
Si votre site est une application à page unique (SPA), nous vous recommandons de précharger le script Rokt sur la vue avant que Rokt n'apparaisse. Cette étape d'initialisation ne nécessite aucune donnée client et permet au script Rokt de se charger en arrière-plan de la page.
Lorsque votre client atteint la page où Rokt doit apparaître, le SDK Web est déjà prêt à être utilisé. Cette approche vous permet simplement d'appeler une méthode pour obtenir des emplacements à afficher sur la page sans attendre le téléchargement complet du SDK Web avant d'afficher une offre. Consultez l'exemple d'application à page unique pour plus d'informations sur l'intégration SPA recommandée.
Chargement de Rokt via des scripts de protection contre les logiciels malveillants ou d'intégrité
Nous ne recommandons pas d'utiliser des programmes tels que JScrambler pour charger Rokt, car cela ralentit la vitesse de la page. Rokt s'exécute dans des iframes sandbox pour minimiser les interactions avec la page parente et offre des fonctionnalités de sécurité supplémentaires pour renforcer la confiance dans le code s'exécutant sur votre site. Consultez la documentation sur la sécurité du Web SDK ici pour en savoir plus sur ces fonctionnalités et notre approche en matière de sécurité.
Phases de la requête réseau
Les pages Web se chargent à travers une série de phases lorsque le navigateur demande et reçoit toutes les ressources différentes qui composent cette page (images, fichiers CSS, fichiers JavaScript, etc.). Les cinq étapes de base de la façon dont une page est rendue sont énumérées ci-dessous :
- Recherche DNS : Trouve l'adresse Web de la ressource demandée (par exemple,
apps.rokt.com). - Connexion initiale : Établissement d'une communication réussie avec l'adresse de cette ressource.
- Temps de première octet (TTFB) : Réception de la première partie d'information d'une ressource.
- Téléchargement/temps du dernier octet (TTLB) : Réception de la toute dernière partie d'information des ressources, permettant ainsi à la ressource de se rendre (par exemple, image) ou de s'exécuter (par exemple, script).
- Document complet : Un signal indiquant que la page Web a terminé de charger toutes ses ressources.
Pour plus d'informations, consultez la documentation des outils de développement de Google