Meilleures pratiques pour le SDK Web
La vitesse de votre 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 à travers votre site. Ainsi, les performances des pages sont un élément central de nos solutions. Pour augmenter avec succès 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 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 qui est 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 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 maximiser la valeur de votre page, il est important de veiller à ce que les services axés sur le client comme Rokt soient déclenchés avant le suivi et les autres services d'arrière-plan.
Voici l'approche de meilleure pratique pour s'intégrer avec Rokt :
- Placer le chargement du script de lancement de l'intégration dans le
<head>de la page avant les autres intégrations tierces. - Déclencher le placement Rokt dès que les attributs de données sont disponibles.
Exemple
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Balises méta -->
<!-- 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 méta -->
</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 placement Rokt -->
```html
<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 des services en arrière-plan comme Google Analytics, la meilleure approche est de placer ces intégrations au bas de la page et de les charger de manière asynchrone. Cette approche vise à assurer que même si ces ressources 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 l'affichage de quoi que ce soit jusqu'à ce que toutes les ressources externes soient entièrement chargées. C'est ce qu'on appelle le chargement synchrone.
Cependant, vous pouvez modifier cette fonctionnalité pour permettre à certains éléments de se charger 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. Comme 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 le placement Rokt est affiché lorsqu'il est prêt.
Pour des intégrations plus poussées où Rokt est intégré au flux de transaction, tel que l'offre de ventes incitatives ou d'options de paiement, les clients peuvent passer Rokt en mode de chargement synchrone afin que la page ne soit affichée que lorsque le contenu Rokt est 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
Charger un script de manière asynchrone a l'avantage de ne pas ralentir la page, mais cela peut entraîner l'apparition soudaine de contenu sur une page ou un scintillement lorsque 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 d'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 le placement Rokt sera affiché lorsqu'il sera prêt.
Chargement de Rokt via un gestionnaire de balises
Nous 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 supportons des intégrations utilisant 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 de votre flux de transaction. L'iframe préparatoire précharge le SDK Web 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 en 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 des performances optimales, 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 à améliorer la performance 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 améliore les 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 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 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 la performance.
Utiliser des indices de ressources
Utiliser des 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 avec des scripts tiers peut représenter une partie 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 afficher des offres pour fournir 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 montrent des emplacements Rokt :
<link
rel="preload"
as="script"
href="https://apps.rokt.com/wsdk/integrations/launcher.js"
/>
Les indices de ressources assistent les navigateurs dans le processus de décision des origines auxquelles ils doivent se connecter et des ressources qu'ils doivent récupérer et prétraiter pour améliorer la performance 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, 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 dès que 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 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 et opérationnel. Cette approche vous permet simplement d'appeler une méthode pour obtenir des emplacements à afficher sur la page sans attendre de télécharger l'ensemble 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 logiciels malveillants ou d'intégrité
Nous ne recommandons pas l'utilisation de programmes comme JScrambler pour charger Rokt, car cela ralentit la vitesse de la page. Rokt fonctionne dans des iframes sandboxés pour minimiser toute interaction avec la page parente et offre des fonctionnalités de sécurité supplémentaires pour augmenter la confiance dans le code fonctionnant 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 alors que 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 pour rendre une page 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 du premier morceau d'information d'une ressource.
- Téléchargement/temps jusqu'au dernier octet (TTLB) : Réception du tout dernier morceau 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, voir la documentation des outils pour les développeurs de Google.