Bannières intelligentes : transformer un site web en app mobile (web-to-app à l'usage des marketeurs)

Préparez votre site mobile à afficher des bannières intelligentes pour la première fois

1. Dans le tableau de bord AppsFlyer, rendez-vous dans Expériences et Deep Linking > Web-to-app > Bannières intelligentes > Bannières intelligentes.
2. Cliquez sur Démarrer. L'assistant de configuration vous guidera à travers les étapes requises (ci-dessous). Pour configurer d'autres pages web, voir ci-dessous.
3. Saisissez un nom d'espace de travail pour le site.
4. Cliquez sur Créer . L'espace de travail du site web s'ouvre. 
5. Copiez la bannière Extrait de code. 
6. Implémentez l'extrait de code sur votre site web. Cette tâche est à effectuer une seule fois par site web.
   • Pour ajouter le code à votre site via Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace ou WordPress, consultez l'article Implémenter le code web des bannières intelligentes à l'attention des marketeurs.
   • Pour ajouter le code via d'autres plateformes, ou pour apporter des modifications au code en fonction des besoins (y compris l'ajout de paramètres, le deep linking, le masquage de la bannière ou l'intégration de PBA avec Smart Banners), voir Implémentation du code web Smart Banners pour les développeurs .
7. [facultatif] Copier la clé web (cette clé existe déjà en tant que partie de l'extrait de code).
8. Cliquez sur Continuer.

Pour créer des pages web ensuite

1. Dans le tableau de bord AppsFlyer, rendez-vous dans Expériences et Deep Linking > Web-to-app > Bannières intelligentes > Studio.
2. Cliquez sur le menu des options 
3. sélectionnez Nouvelle page web
4. Saisissez un nom d'espace de travail pour le site.
5. Cliquez sur Créer . L'espace de travail du site web s'ouvre. 
6. Copiez la bannière Extrait de code. 
7. Implémentez l'extrait de code sur votre site web. Cette tâche est à effectuer une seule fois par site web.
   • Pour ajouter le code à votre site via Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace ou WordPress, consultez l'article Implémenter le code web des bannières intelligentes à l'attention des marketeurs.
   • Pour ajouter le code via d'autres plateformes, ou pour apporter des modifications au code en fonction des besoins (y compris l'ajout de paramètres, le deep linking, le masquage de la bannière ou l'intégration de PBA avec Smart Banners), voir Implémentation du code web Smart Banners pour les développeurs .
8. [facultatif] Copier la clé web (cette clé existe déjà en tant que partie de l'extrait de code).
9. Cliquez sur Continuer.

Le groupe de bannières contient une ou plusieurs bannières. De là, vous pouvez :

• Sélectionner le modèle OneLink utilisé par le groupe de bannières, qui contient les apps mobile vers lesquelles rediriger les visiteurs de votre site web.
• Définir un schéma spécifique de deep linking
• Définir vos règles de ciblage, votre planification, votre comportement et les détails d'attribution utilisés par toutes les bannières du groupe de bannières.
• Définir les pages qui activent les bannières du groupe de bannières lors de la visite.

Pour configurer ou dupliquer un groupe de bannières :

1. Dans le tableau de bord AppsFlyer, rendez-vous dans Expériences et deep linking > Web-to-app > Bannières intelligentes.
2. Pour créer un premier groupe de bannières
   1. Sur le côté gauche, cliquez sur Ajouter un groupe de bannières.
   2. Complétez les étapes 5 et suivantes.
3. Pour créer des groupes de bannières supplémentaires
   1. Ouvrez l'onglet Studio.
   2. Cliquez sur + Nouveau.
   3. Complétez les étapes 5 et suivantes.
4. Pour dupliquer un groupe de bannières
   1. Cliquez sur l'icône Dupliquer (à côté de l'icône Supprimer).
5. Saisissez un nom de groupe de bannières unique. Le nom doit refléter un thème commun aux bannières à définir dans le groupe de bannières (par exemple, l'app qui est promue).
6. Sélectionnez le template OneLink pour le groupe de bannières.
7. [facultatif] Définissez un schéma d'URI pour le groupe de bannières comme solution de secours pour les utilisateurs des liens universels et des liens d'app Android. Ceci est rarement nécessaire car, par défaut, la valeur est prise dans le template OneLink. Définissez cette option pour le groupe de bannières uniquement si vous avez besoin d'une valeur différente de celle du template.
8. Définissez les sources principales et les sources de secours qui seront attribuées aux nouvelles installations issues de ce groupe de bannières. Utilisez le tableau suivant pour choisir la meilleure option pour le lien personnalisé.

   Option	Quand sélectionner	Commentaires
   Utiliser les paramètres UTM	Sélectionnez le moment où la plupart des visiteurs non organiques accèdent au site web mobile à partir de sources avec des paramètres UTM.	◦ Nom de la source média (pid) = UTM_Source ◦ Campagne (c) = UTM_campaign ◦ Si UTM_source ou UTM_campaign sont manquants, les noms statiques seront utilisés à la place.
   Utiliser les paramètres du lien d'attribution entrant	Sélectionnez le moment où la plupart des visiteurs non organiques accèdent au site web mobile à partir des clics des réseaux publicitaires qui utilisent les liens d'attribution AppsFlyer.	◦ Tous les paramètres disponibles du lien d'attribution AppsFlyer entrants sont ajoutés au lien de la bannière intelligente.  ◦ Si un paramètre existe à la fois dans le lien d'attribution AppsFlyer entrant et dans la bannière intelligente, c'est le paramètre entrant qui est prioritaire.
   Ajouter un autre paramètre d'attribution	Si vous le souhaitez, vous pouvez ajouter des données d'attribution liées au site web. Cela permet une analyse plus pointue de chaque installation.	Par exemple, pour les sites de eCommerce, vous pouvez créer des liens personnalisés identiques pour chaque type de catégorie de produit, qui diffèrent selon les valeurs af_adset (par exemple : af_adset=fruit)
   Utiliser les paramètres d'attribution par défaut	◦ Sélectionnez cette fonction lorsque la plupart des visiteurs du site web mobile sont organiques.  ▪ Les visiteurs non organiques n'arrivent pas sur le site web à partir d'un clic de réseau publicitaire ou de sources ayant des paramètres UTM.   ◦ Vous pouvez personnaliser les valeurs des paramètres.	Important : la bonne pratique consiste à sélectionner les paramètres du lien d'attribution UTM ou entrant, car les paramètres d'attribution par défaut des bannières intelligentes sont dans tous les cas utilisés comme solution de secours pour le lien personnalisé, en cas d'indisponibilité des noms de source média, de campagne ou de canal.

9. [Recommandé] Définissez le paramètre d'attribution par défaut Nom du canal pour attribuer toutes les installations provenant de la bannière intelligente au canal spécifié. Cela vous permet d'agréger des informations provenant de plusieurs sources média sous le même canal dans le rapport de cohorte, le tableau de bord de présentation, le rapport de rétention, etc.
10. [Facultatif] Activez le retargeting si vous prévoyez d'utiliser le groupe de bannières pour enregistrer les réengagements effectués par les utilisateurs qui cliquent sur la bannière. Pour en savoir plus sur le retargeting, consultez le guide d'attribution du retargeting.

    Important

    Pour que le retargeting fonctionne, vous devez également :

    • Activer le retargeting pour l’app 

    Les utilisateurs existants qui cliquent sur un OneLink qui n'est pas un lien de retargeting (AU) lancent également l'app, et ils ont la même expérience utilisateur. Mais leurs réengagements sont enregistrés comme des sessions régulières, il est donc impossible de mesurer l'efficacité de la campagne média propre.

11.  [Facultatif] Activez Ignorer les utilisateurs actifs pour le retargeting et sélectionnez la fenêtre d’inactivité. Le paramètre af_inactivity_window=[nombre de jours] est alors ajouté aux liens de votre groupe de bannières intelligentes, et tous les utilisateurs en activité sur la période sont ignorés dans le cadre du retargeting.
12. Définissez la fenêtre de réengagement pour déterminer la période suivant le réengagement, où les événements in-app de l'utilisateur sont attribués à la source média de retargeting.
    • Vous pouvez définir la valeur en jours (1-90), en heures (jusqu'à 23) ou même en valeur vie.
    • La fenêtre de réengagement est ajoutée au lien dans le paramètre af_reengagement_window.
13. [Facultatif] Définissez le comportement d'annulation, c'est-à-dire le minimum de temps qui s'écoule entre le moment où l'utilisateur ignore la bannière du groupe, et celui où la bannière s'affiche à nouveau. Sélectionnez :
    • Par durée : 1 heure, 1 jour ou 1 semaine.
    • Session suivante : désigne la session qui a lieu dans un autre onglet ou une autre fenêtre, après que l'utilisateur a quitté la bannière.
    • Jamais : la bannière ne s'affiche plus. Remarque :
      • Si l'utilisateur efface le cache du navigateur ou consulte le site en mode de navigation privée, le paramètre Dismissal Behaviour (Comportement d'abandon) est perdu.
      • Le comportement d'abandon est appliqué à la bannière que l'utilisateur rejette. Les autres bannières du groupe de bannières peuvent toujours être affichées.
14. [Facultatif] Définir le plafonnement des fréquences. 
    Le plafonnement des fréquences détermine le nombre de fois où chaque bannière de groupe est affichée pour un utilisateur unique. Vous pouvez choisir soit Aucune limite (les bannières s'affichent toujours), ou Limiter l'affichage des bannières.

    Par exemple, si un groupe de bannières est composé de trois bannières et que le plafond de fréquence est fixé à une, chaque bannière du groupe apparaîtra une fois par utilisateur. Dans ce scénario, après trois visites, l'utilisateur aura vu les trois bannières du groupe. Toutefois, à partir de la quatrième visite, l'utilisateur ne verra plus de bannières du groupe. Lorsque la limite de fréquence est fixée à deux, chaque bannière du groupe sera affichée deux fois par utilisateur, ce qui nécessitera un total de six visites pour atteindre la limite de fréquence du groupe.

15. [Facultatif] Définir le système d'exploitation sur lequel afficher les bannières :
    • Tous les systèmes d'exploitation mobile.
    • Android ou iOS uniquement.
16. [Facultatif] Planifiez l'activation du groupe de bannières : démarrez immédiatement (par défaut) ou définissez une campagne à durée limitée.
17. [Facultatif] Définissez les emplacements pour lesquels le groupe de bannières est activé.
    1. Sélectionnez Monde entier pour diffuser ce groupe de bannières à tous les utilisateurs. Si besoin, vous pouvez exclure les visiteurs provenant de différentes régions, pays ou états.
    2. Sélectionnez Choisir une région spécifique pour que ce groupe de bannières ne s'affiche que pour les utilisateurs d'une ou plusieurs régions en particulier.
18. [Facultatif] Définissez Afficher sur les pages. Cela correspond aux pages sur lesquelles le groupe de bannières peut afficher pour les visiteurs :
    • [Par défaut] Afficher sur toutes les pages du site web.
      Remarque : nous vous conseillons de définir au moins un groupe de bannières contenant toutes les pages, en cas de problème.
    • Afficher sur des pages spécifiques : indiquez les éléments que la page ou l'URL doit contenir pour afficher les bannières.
      • Vous pouvez choisir :
        • Page spécifique : spécifiez l'hôte et/ou le chemin de la page sur laquelle afficher la bannière. Les requêtes saisies ne seront pas prises en compte. Exemple : http://www.example.com/path?query
        • Chemin d'URL et requête :saisissez le chemin d'accès et/ou la requête qui détermine si la bannière s'affiche ou non. Exemple : path?query. Remarque : N'entrez pas l'URL en entier, comme http://www.example.com/path?query. Ne saisissez que le chemin et/ou la requête.
      • Vous pouvez ajouter jusqu'à 15 conditions avec et/ou.
      • En cas de conflit entre les conditions, la bannière ne s'affichera pas.
19. Cliquez sur Créer un groupe de bannières.
20. [Facultatif] Pour modifier à nouveau le groupe de bannières, survolez Ciblage et comportement et cliquez sur Modifier.

Ciblage et comportement

Le panneau Targeting et comportement affiche les paramètres que vous avez définis pour ce groupe de bannières. Pour modifier ces paramètres, cliquez sur l'icône Modifier.

Pour créer une bannière dans un groupe de bannières :

1. Cliquez sur Créer une bannière pour ouvrir la page Modifier les bannières.
2. Définissez le nom de la bannière.
3. Cliquez sur Concevoir la création :
   1. Cliquez sur Concevoir la création pour créer votre bannière.

      Une fenêtre permettant de choisir un template s'ouvre.

      
   2. Passez la souris sur un template de création, puis cliquez sur Créer pour accéder à la page de configuration Démarrer la création.
   3. Personnalisez tous les éléments de la bannière intelligente. Pour ce faire, sélectionnez les éléments d'après leur nom ou cliquez dessus dans l'image d'aperçu. Remarque : Tous les éléments ne sont pas disponibles pour chaque template.
      • Titre
      • Description
      • Étoiles d'évaluation
      • Bouton fermer
      • Appel à l'action
      • Logo de l'app
      • Arrière-plan
      • Position de la bannière
      • Espacement de la bannière (pour ajuster la taille de la bannière)
      • Transparence de l'appareil
      • Pour les images, utilisez l'un des types de fichier suivants : jpeg, jpg, png. Remarque : le format webp n'est pas pris en charge.  Les recommandations pour les images sont les suivantes :

        Type de template	Taille maximale du fichier image	Ratio de l'image	Hauteur de l’image	Largeur de l’image
        Mini	300 Ko	3:1 (largeur x hauteur)	70 px	Ajustée pour s’adapter à l’appareil
        Standard	300 Ko	3:1 (largeur x hauteur)	70 px	Ajustée pour s’adapter à l’appareil
        Avancé	300 Ko	9:4 (largeur x hauteur)	110 px	Ajustée pour s’adapter à l’appareil
        Choix-multiple	300 Ko	9:4 (largeur x hauteur)	110 px	Ajustée pour s’adapter à l’appareil
        Promotionnel	300 Ko	4:5 (largeur x hauteur)	300 px	Ajustée pour s’adapter à l’appareil
        Superposition de choix multiples	300 Ko	9:4 (largeur x hauteur)	110 px	Ajustée pour s’adapter à l’appareil
        Interstitiel	700 Ko	9:16 (largeur x hauteur)	Ajustée pour s’adapter à l’appareil	Ajustée pour s’adapter à l’appareil

   4. Cliquez sur Corriger pour revoir la création de la bannière et obtenir un aperçu sur différents appareils. Remarque : les bannières peuvent être légèrement différentes dans les campagnes actives par rapport aux aperçus.
   5. Si des modifications sont nécessaires, cliquez sur Retour à l'éditeur.
      
      
   6. Cliquez sur Terminé pour revenir à la page de configuration de la bannière.
4. [Facultatif] Ajoutez des paramètres d'attribution personnalisés. Par exemple, ad_adset et af_ad. Remarque : Les paramètres pid, c et channel ne peuvent pas être ajoutés au niveau de la bannière, car ils appartiennent au niveau du groupe de bannières.
5. Après avoir terminé et enregistré la nouvelle création, le statut de la bannière devient actif. Utilisez le bouton Statut pour basculer entre les états Actif et En pause.
6. Cliquez sur Tout sauvegarder pour enregistrer votre travail ou sur Tout sauvegarder et fermer pour enregistrer votre travail et fermer la page de configuration de la bannière.

Une fois que la création est prête,vous pouvez la tester avant de la mette en ligne et de l'activer pour vos utilisateurs.

Pour tester une bannière intelligente :

Conditions préalables : assurez-vous que l'extrait de code de la bannière intelligente est intégré à votre site web.

1. Sur la page Tester la création, entrez le lien de la page web où le SDK de la bannière intelligente a été intégré (cf Bannières intelligentes à l'usage des développeurs).
2. Cliquez sur Générer.
3. Copiez le lien généré et envoyez-le à votre appareil de test, ou scannez le QR code avec l'appareil de test. Le lien ou le QR code doit vous rediriger vers la page web et afficher votre bannière.
4. Cliquez sur Modifier la création pour revenir à la configuration, ou cliquez sur Terminé pour enregistrer la création.

La page de performance vous permet de visualiser et de comparer les données des performances de toutes vos bannières intelligentes, au cours des 90 derniers jours.

Pour afficher la page des performances :

1. Dans le tableau de bord AppsFlyer, rendez-vous dans Expériences et Deep Linking > Web-to-app > Bannières intelligentes > Performance.
2. Sélectionnez sur quelle période vous souhaitez accéder aux performances. La période par défaut est fixée aux 7 derniers jours.
3. [Facultatif] Activez Afficher uniquement les bannières en cours d'activité. Si cette option est activée, les données des bannières actuellement en pause ou non actives ne s'affichent pas, même si elles étaient actives pendant la période sélectionnée. Les données de performance sur la période sélectionnée s'affichent.

Vous pouvez afficher les données de performance des 7 derniers jours pour n’importe quelle bannière.

Pour afficher les performances de la bannière :

1. Dans le tableau de bord AppsFlyer, rendez-vous dans Expériences et Deep Linking > Web-to-app > Bannières intelligentes > Studio
2. Sélectionnez l'espace de travail du site web et le groupe de bannières pour lequel vous souhaitez afficher les performances.
3. Passez la souris sur l'une des bannières du groupe. Les données de performance sur la semaine écoulée s'affichent.

AppsFlyer tient compte des éléments suivants pour déterminer quelle bannière intelligente afficher :

• Y a-t-il des règles (comportement d'abandon, plafonnement de la fréquence, emplacements, affichage sur les pages, etc.) définies pour les groupes de bannières ?
• L'utilisateur final respecte-t-il les règles et peut-il voir une bannière ?

Si la réponse aux deux questions est oui, c'est-à-dire s'il y a des règles, et si l'utilisateur peut voir une bannière, AppsFlyer choisit une bannière à afficher comme expliqué dans le tableau qui suit.

Vous pourrez comparer les performances des groupes de bannières A et B en accédant au tableau de bord de performances. Pour obtenir plus de données d'attribution, nous vous recommandons d'ajouter af_adset , af_ad ou tout autre paramètre d'attribution (à l'exception de pid, c et channel) en définissant une valeur unique pour chaque bannière créative ou groupe de bannières. Avec ces paramètres vous pourrez comparer les performances de chaque groupe de bannières en accédant aux données dans les tableaux de bord et rapports AppsFlyer.

C'est la fréquence maximale définie pour votre groupe de bannières qui est en cause. Le plafonnement des fréquences détermine combien de fois la bannière est montrée à un utilisateur unique. Par exemple, si la limite de fréquence est définie sur trois et qu'un utilisateur visite le site quatre fois, l'utilisateur voit la bannière lors des trois premières visites, mais pas lors de le quatrième et des suivantes. Le plafonnement des fréquences peut être désactivé. Sélectionnez une valeur de plafonnement des fréquences, ou désactivez la fonction.

Oui. Vous pouvez définir une police utilisée sur le site web pour votre bannière en suivant les instructions disponibles sur le hub du développeur.

• L'implémentation nécessite un développeur web.
• La police s'appliquera à toutes les bannières du site web et à tous les éléments de texte compris dans la bannière.
• La police ne peut pas être visualisée dans l'éditeur créatif.
• Après l'implémentation, testez votre bannière créative.
• Si la police ne s'affiche pas correctement, réenregistrez votre bannière dans l'éditeur créatif.

showBanner

updateParams

Oui. Il suffit d'y ajouter le paramètre deep_link_value à l'aide de l'une des méthodes suivantes :

• Dans l'interface utilisateur d'AppsFlyer, ajoutez un paramètre d'attribution statique personnalisé pendant la configuration de la bannière.
• Utilisez additionalParams dans la fonction showBanner pour ajouter le paramètre à l'URL avant l'affichage de la bannière.
• Utilisez la fonction updateParams pour ajouter le paramètre à l'URL après l'affichage de la bannière.

Veillez à ce que votre développeur implémente le comportement souhaité pour la valeur deep_link_value.

Non. Si vous ne savez pas si les utilisateurs ont l'application ou non, nous vous recommandons de rendre cette action applicable aux deux. Par exemple : « Aller à l'application » ou « Ouvrir l'app ».

Oui. Si l'URL entrante d'origine contient un paramètre utm_source ou pid, elle est enregistrée pendant la durée de la session de navigation et les paramètres sont appliqués à l'URL de la bannière sortante.

Oui. Pour ce faire, lorsque vous implémentez des bannières intelligentes dans une app d'encapsulation/hybride et que vous chargez la page de bannière à partir de l'app (et non à partir d'un navigateur web), n'utilisez pas la fonction showBanner, car celle-ci affiche la bannière dans l'app. Vous pouvez utiliser la fonction hideBanner.

Nous nous engageons à faire en sorte que tous vos utilisateurs, y compris les personnes en situation de handicap, puissent accéder aux bannières intelligentes et les utiliser.

C'est pourquoi nous nous efforçons de rendre nos bannières intelligentes compatibles avec l'accessibilité Web et de suivre les bonnes pratiques relatives à la norme WCAG 2.1 en fournissant les attributs HTML pertinents dans les éléments des bannières intelligentes.

Toutefois, il est de votre seule responsabilité de déterminer les exigences d'accessibilité pertinentes pour l'utilisation que vous comptez faire de ces bannières intelligentes. Il vous incombe de veiller à ce que les bannières intelligentes que vous utilisez restent accessibles à tous les utilisateurs, conformément aux exigences d'accessibilité Web.

Veuillez noter que diverses modifications apportées aux bannières intelligentes peuvent avoir un impact sur leur compatibilité avec les exigences d'accessibilité pertinentes, y compris, par exemple, en cas de modification des couleurs et de la taille des éléments internes de la bannière.