Meilleures pratiques pour le SDK Web (Héritage)
Cette page s'applique à la version précédente du SDK Web de Rokt. Pour en savoir plus sur la version actuelle, consultez le Guide de démarrage actuel.
La vitesse du site web est d'une importance vitale pour votre entreprise et notre technologie est axée sur l'amélioration des expériences de vos clients sur votre site. En tant que tel, la performance des pages est un principe fondamental de nos solutions. Pour réussir à augmenter l'engagement et maximiser les taux de conversion, nous adoptons plusieurs approches pour maintenir les temps de chargement des pages au minimum.
Intégrations tierces et performance
Il est important de comprendre le placement 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 de Rokt est spécifiquement conçue pour améliorer l'expérience de vos clients et générer une valeur ajoutée à 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 vous assurer de tirer le maximum de valeur de votre page, il est important de garantir que les services axés sur le client comme Rokt soient déclenchés avant les services de suivi et autres services en arrière-plan.
Voici la meilleure approche pour intégrer Rokt :
- Placer le chargement du script de lancement de l'intégration dans la balise
<head>de la page avant les autres intégrations tierces. - Déclencher le placement de Rokt dès que les attributs de données sont disponibles.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<!-- Partie #1 - Charger le SDK Web -->
<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>
<!-- Autres scripts et balises meta -->
</head>
<body>
<!-- Votre contenu HTML ici -->
<!-- Partie #2 - Dès que les attributs de données sont disponibles, exécutez le script ci-dessous pour afficher un emplacement Rokt -->
<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>
<!-- Votre contenu HTML ici -->
</body>
</html>
Pour les services en arrière-plan comme Google Analytics, la meilleure approche consiste à placer ces intégrations en bas de la page et à 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'un en-tête et d'un corps. Tout ce qui se trouve dans le corps est rendu par le navigateur et l'en-tête est utilisé pour charger des ressources externes telles que des scripts et des feuilles de style. Lorsque la page se charge dans un navigateur, celui-ci commence à lire le HTML de haut en bas. La section de l'en-tête a une caractéristique spéciale qui empêche quoi que ce soit d'apparaître jusqu'à ce que toutes les ressources externes soient entièrement chargées. C'est le chargement synchrone.
Cependant, vous pouvez modifier cette fonctionnalité pour faire en sorte que certains éléments se chargent sans attendre que toutes les ressources externes soient chargées. Cela est connu sous le nom de chargement asynchrone.
Le script Rokt se charge asynchrone comme dans l'exemple de l'ajout de Rokt à votre site. Cela accélère le chargement global d'une page. Puisque le navigateur n'attend pas que les ressources Rokt soient complètement chargées avant d'afficher la page au client, l'expérience utilisateur n'est pas interrompue et le placement Rokt est affiché lorsqu'il est prêt.
Pour des intégrations plus profondes où Rokt est essentiel au flux de transaction, comme proposer des ventes incitatives ou des options de paiement, les clients peuvent passer Rokt en chargement synchrone afin que la page ne soit affichée qu'une fois le contenu Rokt entièrement chargé.
Chargement synchrone
Voici à quoi pourrait 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 il peut provoquer l'apparition soudaine de contenu sur une page ou un scintillement où le contenu original de la page se charge.
Voici à quoi pourrait ressembler une page lorsqu'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 d'autres scripts :
Dans ce cas, Rokt ne bloque 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 soient complètement chargées avant d'afficher la page au client, l'expérience n'est pas interrompue, et le placement 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 Adobe Experience Platform.
Chargement de Rokt via des moteurs d'expérimentation
Nous 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.
Utiliser l'iframe préparatoire
Pour optimiser à la fois le temps d'interaction de Rokt et les performances de votre page, nous recommandons notre solution d'iframe préparatoire : une iframe sécurisée, facile à mettre en œuvre et flexible, placée à une étape antérieure dans votre flux de transaction. L'iframe préparatoire précharge le Web SDK en téléchargeant et en mettant en cache les ressources Rokt afin qu'elles soient faciles à récupérer lorsqu'il est temps d'afficher le placement. En téléchargeant le SDK par sections, nous réduisons la bande passante réseau requise sur les pages critiques pour l'expérience de vos clients. Le préchargement se traduit par 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.
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.
Utiliser la dernière version du Rokt Integration Launcher
Nous travaillons continuellement à améliorer les performances du SDK Web et à optimiser l'expérience pour les clients visitant votre site. Par conséquent, le Rokt Integration Launcher sera toujours fixé à la dernière version pour garantir la meilleure expérience à 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 du temps de chargement pour certains partenaires. Dans les versions précédentes du SDK Web, deux domaines distincts étaient utilisés : wsdk.rokt.com pour la diffusion des 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 SDK Web nécessitent deux résolutions de domaine (une pour wsdk.rokt.com et une pour apps.rokt.com). L'unification en un seul domaine supprime l'une de ces résolutions, ce qui améliore les performances.
Utiliser les indices de ressources
Utiliser les indices de ressources est un moyen rapide et facile d'améliorer les temps de démarrage pour l'intégration Rokt. Établir la connexion aux scripts tiers peut représenter une part significative 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 rendre les offres pour offrir l'expérience optimale à vos clients.
Pour implémenter l'indice de ressource preload, incluez le code suivant dans la section <head> sur toutes les pages qui affichent des emplacements Rokt :
<link
rel="preload"
as="script"
href="https://apps.rokt.com/wsdk/integrations/launcher.js"
/>
Les indices de ressources aident les navigateurs dans le processus de décision concernant les origines auxquelles ils devraient se connecter, et quelles ressources ils devraient 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 anticipée, ce qui inclut la recherche DNS, la poignée de main TCP, et la négociation TLS optionnelle. Obtenez plus d'informations sur w3.org.Preloadindique une ressource qui sera utilisée dans le cadre de la navigation actuelle 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 sur votre page.
Précharger le script Rokt (pour les applications monopage)
Si votre site est une application monopage (SPA), nous 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 à l'emploi. Cette approche vous permet d'appeler simplement une méthode pour afficher les emplacements sur la page sans attendre de télécharger l'intégralité du SDK Web avant d'afficher une offre. Consultez l'exemple d'application monopage pour plus d'informations sur l'intégration SPA recommandée.
Chargement de Rokt via des scripts de protection contre les malwares ou d'intégrité
Nous ne recommandons pas d'utiliser des programmes comme JScrambler pour charger Rokt, car cela ralentit la vitesse de la page. Rokt s'exécute dans des iframes isolés pour minimiser toute interaction avec la page parente et offre des fonctionnalités de sécurité supplémentaires pour renforcer la confiance dans le code exécuté sur votre site. Consultez la documentation de sécurité du SDK Web pour en savoir plus sur ces fonctionnalités et notre approche de la sécurité.
Phases de requête réseau
Les pages Web se chargent à travers une série de phases lorsque le navigateur demande et reçoit toutes les différentes ressources qui composent cette page (images, fichiers CSS, fichiers JavaScript, etc.). Les cinq étapes de base de la manière dont une page se rend sont listées ci-dessous :
- Recherche DNS : Trouve l'adresse Web de la ressource demandée (par exemple,
apps.rokt.com). - Connexion initiale : Communication réussie avec l'adresse de cette ressource.
- Temps jusqu'au premier octet (TTFB) : Réception de la première information d'une ressource.
- Téléchargement/temps jusqu'au dernier octet (TTLB) : Réception de la toute dernière 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.