Passer au contenu

Cette page a été traduite automatiquement et peut contenir des inexactitudes. Pour signaler une erreur de traduction, utilisez le module de commentaires en bas de la table des matières, à droite de la page.

Insérer automatiquement des bannières avec le ciblage Web

Pour les placements web, vous pouvez éventuellement configurer le ciblage Web dans les paramètres du placement afin d’indiquer où la bannière doit apparaître sur la page. Lorsque le ciblage Web est configuré, le SDK Web de Braze insère automatiquement les bannières à l’emplacement spécifié, sans appel explicite à insertBanner(). Pour plus d’informations, consultez Ciblage Web pour les bannières. Pour en savoir plus sur les bannières et leurs placements, consultez À propos des bannières et Gérer les placements.

Important

Web Targeting for Banners est actuellement en accès anticipé. Contactez votre Braze account gestionnaire si vous souhaitez participer à l’accès anticipé.

Conditions préalables

Comme l’insertion par ciblage Web ajoute du HTML à votre page, elle nécessite la même activation que insertBanner :

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true, // required for Web Targeting auto-insert
});

Sans allowUserSuppliedJavascript: true, l’insertion automatique n’a aucun effet et le SDK enregistre une erreur.

Déclencher l’insertion par ciblage Web

Lorsqu’elle est appelée, la méthode insertWebTargetingBanners() tente d’utiliser les informations de ciblage Web de chaque bannière, si elles existent, pour trouver l’emplacement prévu pour cette bannière sur la page et l’y insérer automatiquement. Appelez cette méthode peu après l’initialisation du SDK, puis après chaque synchronisation des bannières effectuée par le SDK Web.

Si le SDK Web ne trouve pas l’emplacement d’insertion ciblé pour une bannière disposant d’informations de ciblage Web, il réessaie en continu de l’insérer. Le ciblage Web peut ainsi cibler des parties de votre page qui n’apparaissent qu’après le chargement initial. Vous pouvez désactiver ce mécanisme de nouvelles tentatives lors de l’initialisation du SDK, à l’aide du paramètre enableWebTargetingBannerRetryLoop de la méthode initialize().

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true,
  enableWebTargetingBannerRetryLoop: false, // don't retry if the target isn't in the DOM yet
});

Si vous le souhaitez, vous pouvez appeler automaticallyInsertWebTargetingBanners() après l’initialisation du SDK. Cette méthode crée un abonnement qui effectue immédiatement l’insertion par ciblage Web pour les bannières présentes dès que le SDK Web termine une synchronisation des bannières. Vous n’avez alors plus besoin d’appeler insertWebTargetingBanners(), mais vous pouvez vous en tenir à cette seule méthode si vous préférez contrôler plus finement le moment de l’insertion. Cette méthode n’insère aucune bannière au moment de son appel.

Applications monopages (SPA)

Tenez compte des points suivants si votre site web utilise une architecture d’application monopage (SPA) ou un système similaire (comme React Router ou Vue) pour gérer le routage et la navigation, ou s’il supprime manuellement les bannières insérées :

Si une bannière est insérée dans le DOM par ciblage Web, puis supprimée lors d’un nouveau rendu provoqué par le routage, le SDK Web ne tente pas automatiquement de la réinsérer sur la nouvelle page. De même, si la bannière subsiste après le nouveau rendu alors qu’elle est limitée par URL à la route précédente, le SDK Web ne la retire pas automatiquement du DOM.
Appelez insertWebTargetingBanners() après chaque rendu de route côté client pour déclencher l’ensemble de la logique de suivi orchestrée par le SDK. Cette méthode ne réinsère que les bannières dont l’état a changé : vous pouvez donc l’appeler sans risque à chaque navigation.

Résolution des problèmes

Voici les raisons courantes pour lesquelles une bannière ne s’insère pas automatiquement, consignées par le journal du SDK (enableLogging: true) :

Symptôme	Cause probable
Rien ne s’insère nulle part et le SDK enregistre « `allowUserSuppliedJavascript` is required »	`initialize()` a été appelé sans `allowUserSuppliedJavascript: true`.
Le SDK enregistre « target element not found for selector »	Le sélecteur CSS ne correspond encore à aucun élément. Si l’élément s’affiche plus tard, le problème se résout de lui-même grâce à la boucle de nouvelles tentatives ; sinon, vérifiez le sélecteur configuré pour le placement.
Le SDK enregistre « cannot insert inside » pour un élément	Les informations de ciblage Web de la bannière l’auraient insérée dans un élément non pris en charge, comme `video` ou `img`. Consultez Ciblage Web pour les bannières.
Une bannière s’insère une fois mais ne se met pas à jour lors des changements de route	Consultez Applications monopages (SPA) et appelez `insertWebTargetingBanners()` après chaque rendu de route côté client.
Une bannière disparaît après un nouveau rendu du framework	Consultez Applications monopages (SPA).

Étapes suivantes

Ciblage Web pour les bannières : comment les utilisateurs de l’entreprise configurent le sélecteur CSS, la position d’insertion et le ciblage par URL d’un placement dans le tableau de bord.
Gérer les placements : créer des placements, les actualiser et afficher manuellement des bannières avec insertBanner.
Bannières : foire aux questions

Conseil

Vous souhaitez nous aider à définir les prochaines priorités du ciblage Web ? Contactez [email protected].

New Stuff!