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 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, vidéos et textes) dès l'arrivée sur le site. Ensuite, elles récupèrent simplement les informations pertinentes pour la page lorsqu'un utilisateur navigue vers cette page. Les SPA ont généralement un temps de chargement initial du site plus long, mais des transitions de page quasi instantanées. Des exemples courants de SPA que vous utilisez tous les jours incluent Gmail, Netflix, Twitter, et la plateforme One de Rokt.
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 un SPA diffère du processus d'intégration avec des sites web multi-pages traditionnels. Différents SPAs abordent les transitions de page différemment, donc ce guide se concentre sur la manière d'utiliser le Web SDK de manière plus générale. Les développeurs doivent appliquer ces principes à leur framework de choix.
Pour les SPAs, nous offrons deux options d'intégration.
- (Recommandé) Pré-initialisez le Web SDK lorsque les clients arrivent pour la première fois sur le 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 Web SDK 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 actifs Rokt lorsque les clients arrivent pour la première fois sur le 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é lorsque le client arrive pour la première fois sur une SPA (Single Page Application). 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 emplacement à l'avance. Cela garantit que lorsque le client arrive au moment sensible de la présentation de l'emplacement, le service n'a besoin de faire que le minimum requis pour afficher l'emplacement.
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 de 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 snippet de 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 afin d'être réutilisée plus tard dans le flux de l'application. Cela peut être fait en l'assignant à un état global, en le fournissant comme un contexte React, un service Angular ou de toute autre manière appropriée à votre framework de choix.
Une Promise (promesse) est utilisée dans cet exemple pour se prémunir contre un utilisateur actualisant votre application 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 réellement créée. En stockant une promesse et en la chargeant plus tard aux 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.
Arriver 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 stade et le site doit simplement déclencher la sélection de l'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 d'ancrage pour un emplacement intégré a eu la chance d'être rendu.
Si le rendu de l'élément d'ancrage peut être retardé sur votre page, par exemple, susceptible de requêtes XHR supplémentaires qui pourraient le retarder davantage, vous pouvez attendre que l'élément d'ancrage 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 : Dans Angular, les développeurs utiliseraient ngOnDestroy(), et dans React, cela peut être 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, il peut être nécessaire d'ajouter dynamiquement le script Rokt à la page, ainsi que de s'assurer que les utilisateurs ne créent pas d'instances supplémentaires du Integration Launcher lorsqu'ils revisitent la page.
Ajouter pageInitTimestamp à l'initialisation sur une page virtuelle aide Rokt à mesurer les performances par rapport à votre transition de page SPA (Single Page Application). La valeur doit être un objet JavaScript Date qui indique le timestamp du moment où la transition de la page virtuelle a eu lieu.
Le bénéfice 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 à améliorer les performances du SDK Web, donc être capable de mesurer précisément le temps de placement à interactif (TTI) sur votre site est crucial 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 selon d'autres exemples
const launcher = await launcherPromise;
const launcher = await createLauncher({
accountId: "rokt-account-id",
pageInitTimestamp: Date,
});