Applications monopage
Si votre site web est construit comme une application monopage (SPA), suivez ces directives pour une intégration fluide.
Qu'est-ce qu'une application monopage ?
Une application monopage est une application web (ou un site web) qui facilite les transitions de page en réécrivant dynamiquement une seule page web. Cela améliore les performances et donne à l'application web une sensation plus native.
De plus, les SPA chargent toutes les ressources du site (à l'exception des éléments comme les images, les vidéos et le texte) lors de l'arrivée sur le site. Ensuite, elles récupèrent simplement les informations pertinentes pour la page lorsqu'un client navigue vers cette page. Les SPA ont généralement un temps de chargement initial du site plus long, mais des transitions de page presque instantanées. Des exemples courants de SPA que vous utilisez tous les jours incluent Gmail, Netflix, Twitter et Rokt’s One Platform.
En revanche, les applications multipages classiques déchargent chaque page entre les navigations et rechargent toutes les ressources lorsque vous arrivez sur la page suivante.
Si votre site n'est pas une application monopage, suivez nos instructions d'intégration standard.
Options d'intégration
Si votre SPA est construit avec React, vous pouvez suivre ces instructions.
Le processus d'intégration de Rokt avec une SPA diffère du processus d'intégration avec des sites Web multi-pages traditionnels. Différentes SPA abordent les transitions de page de manière différente, donc ce guide se concentre sur l'utilisation plus générale du SDK Web. Les développeurs doivent appliquer ces principes dans le cadre de leur choix.
Pour les SPA, nous offrons deux options d'intégration.
- (Recommandé) Pré-initialisez le SDK Web lorsque les clients arrivent pour la première fois sur la SPA, puis déclenchez la sélection de placement et d'offre une fois que le client atteint l'endroit où les placements sont rendus.
- Initialisez le SDK Web sur la vue où les placements sont rendus. Assurez-vous d'inclure le timestamp pour la transition de page virtuelle.
- Pour cette option, nous recommandons également d'utiliser l'iframe préparatif pour précharger les ressources Rokt lorsque les clients arrivent pour la première fois sur la SPA, car cela améliorera le temps de chargement des placements. Les deux options sont décrites plus en détail ci-dessous.
Pré-initialisation de Rokt
Premier lancement du SDK Web
Le Lanceur d'Intégration du SDK Web doit être initialisé lorsqu'un client arrive pour la première fois sur une SPA. Le service peut être réutilisé tout au long du parcours du client sur le site.
Lors de la première initialisation, le Lanceur d'Intégration prépare tout ce dont il a besoin pour afficher un placement à l'avance. Cela garantit qu'au moment sensible de la présentation du placement, le service n'a besoin de faire que le minimum requis pour afficher le placement.
Pour initialiser le service, vous devez charger l'intégration Rokt sur votre page et créer une instance du Lanceur d'Intégration.
Chargement de l'intégration
Conformément à l'exemple d'application multipage, le Lanceur d'Intégration Rokt peut être chargé sur votre page en incluant la balise script Rokt dans le <head> du site web.
<head>
<script
async
crossorigin="anonymous"
id="rokt-launcher"
fetchpriority="high"
src="https://apps.rokt.com/wsdk/integrations/launcher.js"
type="module"
></script>
</head>
Alternativement, vous pouvez ajouter le code suivant dans la logique JavaScript déjà livrée à votre application.
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;
target.appendChild(script);
Création d'une instance du lanceur d'intégration
Si vous copiez l'exemple ci-dessous, assurez-vous que rokt-account-id est remplacé par l'ID unique de votre compte. Vous pouvez obtenir votre rokt-account-id auprès de votre gestionnaire de compte ou dans One Platform.
const launcherPromise = new Promise((resolve, reject) => {
script.onload = () =>
resolve(window.Rokt.createLauncher({ accountId: "rokt-account-id" }));
script.onerror = (error) => reject(error);
});
La référence à la promesse du lanceur doit être stockée pour être réutilisée ultérieurement dans le flux de l'application. Cela peut être fait en l'assignant à un état global, en le fournissant comme un React Context, un Angular Service ou de toute autre manière appropriée à votre framework de choix.
Une Promise est utilisée dans cet exemple pour se prémunir contre le rafraîchissement de votre application par un utilisateur sur une page où le lanceur est utilisé. Ce scénario pourrait provoquer une condition de concurrence dans laquelle l'instance du lanceur est utilisée par la page avant que l'instance ne soit effectivement créée. En stockant une promesse et en la chargeant plus tard dans les endroits où l'instance du lanceur d'intégration est censée être utilisée, nous pouvons garantir qu'elle sera prête à chaque fois.
Arrivée sur une page avec un emplacement
Lorsque le client arrive sur une page avec un emplacement, elle doit se charger de manière transparente. Le service Integration Launcher doit être en cours d'exécution à ce moment-là et le site doit simplement déclencher la sélection d'une offre.
La sélection peut être déclenchée lorsque la page avec un emplacement se charge. Le Rokt Web SDK fournit une période de grâce pour s'assurer que l'élément HTML ancre pour un emplacement intégré ait eu la possibilité d'être rendu.
Si le rendu de l'élément ancre peut être retardé sur votre page, par exemple en cas de demandes XHR supplémentaires qui pourraient le retarder davantage, vous voudrez peut-être attendre que l'élément ancre soit rendu avant de déclencher une sélection.
La plupart des frameworks ont un hook de cycle de vie indiquant que la vue a été rendue.
Par exemple : Dans Angular, les développeurs utiliseraient ngAfterViewInit(), et dans React, les développeurs peuvent utiliser le hook useEffect() ou la méthode componentDidMount().
async function afterPageElementsHaveRendered() {
const launcher = await launcherPromise;
const selection = await launcher.selectPlacements({
attributes: {
email: "j.smith@example.com",
},
identifier: "checkout.page",
});
}
Quitter une page avec un placement
Avant de quitter une page avec des placements Rokt, le site partenaire doit déclencher une méthode sur le service Rokt pour supprimer les placements sur la page actuelle et effectuer le nettoyage.
La plupart des frameworks ont un hook de cycle de vie indiquant qu'une page est sur le point d'être quittée. Par exemple : En Angular, les développeurs utiliseraient ngOnDestroy(), et en React, cela peut se faire sous la forme d'un argument de retour du hook useEffect() ou componentWillUnmount().
async function beforeNavigatingAwayFromPage() {
selection.close();
}
Initialiser Rokt sur une page virtuelle
L'intégration suit les mêmes étapes que l'exemple principal. Cependant, cela peut nécessiter que vous ajoutiez dynamiquement le script Rokt à la page, ainsi que de vous assurer que les utilisateurs ne créent pas d'instances supplémentaires du Integration Launcher lorsqu'ils revisitent la page.
L'ajout de pageInitTimestamp à l'initialisation sur une page virtuelle aide Rokt à mesurer la performance par rapport à la transition de page SPA. La valeur doit être un objet Date JavaScript qui indique le horodatage du moment où la transition de la page virtuelle a eu lieu.
L'avantage de fournir cette information est que nous pouvons mesurer avec précision le temps qu'il faut à un client pour commencer à visualiser une page jusqu'à ce que le contenu Rokt soit rendu. Nous travaillons continuellement pour améliorer la performance du SDK Web, donc pouvoir mesurer avec précision le temps de rendu interactif (TTI) sur votre site est essentiel pour surveiller et améliorer les temps de chargement et optimiser l'expérience de vos clients, maximisant ainsi la valeur que Rokt peut fournir.
// Étapes d'intégration comme dans d'autres exemples
const launcher = await launcherPromise;
const launcher = await createLauncher({
accountId: "rokt-account-id",
pageInitTimestamp: Date,
});