Bannières intelligentes v2

Vue d'ensemble

AppsFlyer fournit un SDK pour les bannières intelligentes, à intégrer par les annonceurs à leurs sites web. L'objectif du SDK est d'extraire toutes les données nécessaires à l'affichage dynamique des bannières intelligentes. Le SDK pour les bannières intelligentes crée automatiquement les liens d'attribution appropriés. Vous n'avez pas besoin de les créer manuellement.

Le SDK doit donc être accessible depuis toutes les pages qui affichent vos bannières mobile. Le SDK pour les bannières intelligentes s'authentifie à l'aide d'une clé web unique, que vous pouvez obtenir dans l'espace de travail du site web.

Installation

Smart banners only

You can either copy the smart banner script from the AppsFlyer dashboard or from below.

  1. Copy the script code snippet in one of the following ways:

    • Copy the script from the Smart Banner’s Website workplace in the AppsFlyer dashboard. Your web key is already included in the script.
    • Copy the script from the the code snippet below and replace YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","banners",{banners: {key: ">>>>>YOUR_WEB_KEY<<<<"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner');
</script>
  1. Paste the code snippet in the head de votre site web. Collez-la en haut de la balise head .

ℹ️

Remarque

The showBanner à la fin du code d'installation peut accepter plus de paramètres. En savoir plus

Smart banners and People-Based Attribution

  1. Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
  2. Remplacez le paramètre YOUR_PBA_KEY dans le script par votre clé de développement web.  La clé dev web est générée lorsque vous créez un bundle de marques.
  3. Collez cet extrait de code dans la balise head de votre site web. Collez-la en haut de la balise head.
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});
// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});
</script>

Control Smart Banner font

Using the same font in the smart banner as the rest of the website creates a consistent and cohesive visual identity for your brand.

In order to change the default font in the Smart Banner, you need to add the following rule to your CSS

[data-af-custom-fonts="af-creatives-text"] {
    font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}

Par exemple :

[data-af-custom-fonts="af-creatives-text"] {
    font-family: museo-sans !important;
}

🚧

  • The !important is required
  • Make sure that the font is already loaded in your website
  • The custom font will apply to all banners on the website
  • If the font doesn't display correctly, resave your banner in the creative editor

Fonctions du SDK

showBanner

Signature de la méthode

AF('banners', 'showBanner', { bannerContainerQuery: String,
              bannerZIndex: Integer,              
              additionalParams: <Key, Value Dictionary>);

Description
Commencer à afficher la bannière intelligente conformément à la clé de bannière fournie dans l'extrait.

ℹ️

Remarque

N'utilisez pas cette fonction lorsque vous implémentez des bannières intelligentes dans une app wrapper / hybride pour charger la page de la bannière depuis l'application (et non depuis le navigateur), car l'utilisation de showBanner affichera la bannière dans l'application. Si vous utilisez showBanner pour une application wrapper / hybride, utilisez hideBanner pour le chargement des applications mobile.

Arguments d'entrée

TypeNomDescription
StringbannerContainerQueryQuand il est transmis, le SDK tente de localiser un élément de la page avec cette requête, puis il le traite comme point d'entrée pour le placement de la bannière. Dans tout autre cas, document.body sera utilisé.
IntegerbannerZIndexLes bannières intelligentes sont réglées par défaut sur la valeur z-index maxi, pour qu'elles ne se retrouvent pas cachées par les éléments du site web. Vous pouvez modifier ce paramètre si vous souhaitez que certains éléments du site web soient placés au-dessus de la bannière.
<Key, Value Dictionary>additionalParamsSi transmises, ces clés et valeurs (ex. deep_link_value: apples) sont ajoutées comme paramètres de requête à l'URL OneLink.

Exemples d'utilisation

  • Ajouter des paramètres à l'URL OneLink
AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});
  • Définir l'index Z de cette bannière et un Id de conteneur pour son placement
AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
                              bannerZIndex: 999});

updateParams

Signature de la méthode

AF('banners', 'updateParams', { <Key, Value Dictionary> });

Description
Ajouter de manière programmée jusqu'à 10 paramètres (ex. deep_link_value) à l'URL OneLink attribuée au bouton de CTA, après l'affichage de la bannière.

L'entrée est un objet avec des clés et des valeurs de paramètre.

Une clé ne peut pas avoir une valeur vide. Une clé ne peut pas être nommée : undefined, null, NaN, ou arg
Caractères non valides :
Clé : /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Valeur = \, ;, $, >, <, ^, #, ``

  • Les paramètres sont ajoutés à l'URL OneLink en tant que paramètres de requête. 
  • Lorsque vous utilisez updateParams pour ajouter des paramètres, l'URL d'impression est différente de l'URL de clic.
  • Les paramètres ajoutés ne remplacent pas ceux de l'URL OneLink d'origine. Si le paramètre que vous ajoutez figure déjà dans l'URL OneLink, il n'est pas modifié. 
  • Si updateParams est appelé plusieurs fois, seuls les paramètres du dernier appel sont ajoutés à l'URL.

Arguments d'entrée

TypeNomDescription
<Key, Value Dictionary>N/ACes clés et valeurs (ex. deep_link_value: apples) sont ajoutées comme paramètres de requête à l'URL OneLink.

Exemples d'utilisation

  • Ajouter des paramètres à l'URL OneLink
AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});

hideBanner

Signature de la méthode

AF('banners', 'hideBanner');

Description

Suppression programmée de toute bannière présente sur la page (ex. après que l'utilisateur saisisse certains termes).

Arguments d'entrée

Aucun

Exemples d'utilisation

  • Cacher la bannière
AF('banners', 'hideBanner');