Meilleures pratiques du SDK Web
La vitesse de votre site web est essentielle pour votre entreprise et notre technologie est axée sur l'amélioration de l'expérience de vos clients sur votre site. En tant que tel, la performance des pages est un principe fondamental de nos solutions. Pour augmenter avec succès l'engagement et maximiser les taux de conversion, il existe plusieurs approches que nous adoptons 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 pour 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 de la 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 meilleur parti de votre page, il est important de s'assurer que les services axés sur le client, comme Rokt, sont déclenchés avant les services de suivi et autres services en arrière-plan.
Voici l'approche des meilleures pratiques pour l'intégration avec Rokt :
- Placer le chargement du script de lancement de l'intégration dans la
<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>
<!-- Méta 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 méta tags -->
</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 -->
```markdown
<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 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'un en-tête et d'un corps. Tout 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, le navigateur 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 de s'afficher jusqu'à ce que toutes les ressources externes soient entièrement chargées. C'est ce qu'on appelle le chargement synchrone.
Cependant, vous pouvez changer cette fonctionnalité pour faire en sorte que certains éléments se chargent sans attendre que toutes les ressources externes soient chargées. Cela s'appelle le chargement asynchrone.
Le script Rokt se charge asynchrone comme dans l'exemple dans ajouter Rokt à votre site. Cela accélère le chargement global d'une page. Puisque le navigateur n'attend pas que les ressources Rokt soient entièrement chargées avant d'afficher la page au client, l'expérience du client n'est pas interrompue et le placement de Rokt est montré quand prêt.
Pour des intégrations plus profondes où Rokt est essentiel au flux de transaction, comme offrir des ventes additionnelles ou des options de paiement, les clients peuvent basculer Rokt en chargement synchrone afin que la page ne soit affichée qu'une fois le contenu Rokt entièrement chargé.
Chargement synchronisé
Voici à quoi une page pourrait ressembler lorsque les ressources sont chargées de manière synchronisée :
<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 a l'avantage de ne pas ralentir la page, mais cela peut entraîner l'apparition de contenu sur une page ou un clignotement lors du chargement du contenu original de la page.
Voici à quoi une page pourrait ressembler 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 d'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 terminé 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 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.
Si vous décidez de charger Rokt via un gestionnaire de balises, nous supportons les 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 que Rokt fournit pour garantir que vos clients bénéficient de la meilleure expérience possible. Pour plus d'informations sur les outils d'expérimentation de Rokt, contactez votre responsable de compte.
Utiliser l'iframe préparative
Pour optimiser à la fois le temps d'interaction de Rokt et les performances de votre page, nous recommandons notre solution d'iframe préparative : 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éparative 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 entraîne 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éparative.
Pour des performances optimales, assurez-vous de mettre à jour vers la dernière version de l'Integrateur Rokt avant de mettre en œuvre l'iframe préparative.
Utilisez la dernière version du Rokt Integration Launcher
Nous travaillons continuellement à améliorer la performance 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 des 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 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 Web SDK 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 des astuces de ressources
Utiliser des astuces 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, notamment 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 la demande d'affichage d'un emplacement Rokt effectuée plus tard, Rokt peut rapidement rendre des offres pour fournir l'expérience optimale à vos clients.
Pour mettre en œuvre l'astuce 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 astuces de ressources aident les navigateurs dans le processus de décision sur 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, la négociation 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 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 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 Web SDK est déjà prêt et opérationnel. Cette approche vous permet d'appeler simplement une méthode pour faire apparaître des placements sur la page sans attendre de télécharger l'ensemble du Web SDK 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 protections contre les logiciels malveillants ou des scripts 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 isolées pour minimiser les interactions avec la page parent et offre des fonctionnalités de sécurité supplémentaires pour augmenter la confiance dans le code exécuté sur votre site. Consultez la documentation sur la sécurité du Web SDK 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 de la façon dont une page s'affiche 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 s'afficher (par exemple, image) ou d'exécuter (par exemple, script).
- Document complet : Un signal que la page web a terminé de charger toutes ses ressources.
Pour plus d'informations, consultez la documentation des outils pour les développeurs de Google.