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>

2. 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

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

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');

Traits and Limitations