Guide d’intégration du SDK Web PBA

1. Accédez à Google Tag Manager.
2. Créez une balise pour le SDK web AppsFlyer.
   

   

3. Sélectionnez le type de balise HTML personnalisée.
4. Donnez un nom significatif à la balise.
5. Effectuez l'une des opérations suivantes :
   • Si vous intégrez le SDK web sans Smart Banners :
     1. Collez l’extrait de code qui suit dans la fenêtre de configuration de la balise.
     2. Dans l’extrait de code, remplacez WEB_DEV_KEY par la clé mentionnée dans les prérequis.
        

        <!-- AppsFlyer web SDK -->
        <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",{pba: {webAppId: "WEB_DEV_KEY"}})
        </script>

   • Si vous intégrez le SDK web aux Smart Banners :
     1. Collez l’extrait de code qui suit dans la fenêtre de configuration de la balise.
     2. Dans l’extrait de code, remplacez WEB_DEV_KEY et YOUR_BANNER_KEYà l’aide des clés mentionnées dans les prérequis.
        

        <!-- AppsFlyer web SDK -->
        <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: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}});
        AF('banners', 'showBanner');
        </script>

6. Cliquez sur Enregistrer. 
7. Effectuez l'une des opérations suivantes :
   • Pour ajouter le déclencheur à toutes les pages :
     1. Cliquez sur Ajouter un déclencheur.

        

     2. Sélectionnez Toutes les pages.

     3. Cliquez sur Enregistrer.
        
     4. Saisissez un nom de balise, cliquez sur Enregistrer.
        Vous avez terminé la procédure. 

   • Pour ajouter le déclencheur à des pages spécifiques : 

     1. Cliquez sur Enregistrer la balise.
     2. Dans la fenêtre principale de GTM, sélectionnez Déclencheurs. Cliquez sur Nouveau.
     3. Cliquez sur l’icône du stylo. 
     4. Choisissez le type de déclencheur Page vue.
        
     5. Sélectionnez Certaines pages vues.
     6. Définissez la page et déclenchez les conditions selon vos besoins.
     7. Cliquez sur Enregistrer.
     8. Associez le déclencheur à la balise SDK Web AppsFlyer. Pour ce faire :
        1. Dans la fenêtre principale de GTM, sélectionnez Balises.
        2. Sélectionnez la balise que vous avez créée précédemment.
        3. Dans le panneau de déclenchement, cliquez sur le stylet.
        4. Sélectionnez le déclencheur d’affichage de page que vous avez créé précédemment.
           

           

        5. Cliquez sur Enregistrer.

1. Création d’une propriété dans Adobe Experience Cloud
2. Ajout du SDK web à la propriété Adobe Launch
3. Ajout de la balise Adobe Launch au site web
4. Publication de l’environnement Adobe Launch 

Lorsque le site web se charge sur un appareil mobile, la création active s’affiche dans la bannière. Pour afficher la bannière sur certaines pages uniquement ou selon les actions de l'utilisateur, consultez les règles Adobe Launch.

Enregistrement des événements lors du chargement d’une page de destination

• Vous avez mis en place une page d’abonnement aux newsletters et souhaitez enregistrer les abonnements réussis.
• Vous configurez une page de remerciement vers laquelle les utilisateurs sont redirigés après s’être inscrits avec succès.

1. Créez une page de remerciement
   

   <html>
   <head>
       <script>
            // Google Tag Manager loads the Web SDK
           <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
           j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
           })(window,document,'script','dataLayer','GTM-XXXX');
       </script>
        <script>
           // Assume that the server returns a response with details about the newly subscribed user
           function getResponseFromServer() {
               return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail })
           }
           //Alternatively, you can extract data from localStorage or cookies,
           //in case data was set in either of them during the subscription process
           localStorage.setItem('data', JSON.stringify({ action: 'subscribe', category: 'site actions', label: 'user@email.com' }));
       </script>
   </head>
   <body>
       <h1>Thank You for Subscribing to Our Newsletter</h1>
   </body>
   </html>

   Le code précédent charge GTM, qui charge à son tour le SDK Web. Par la suite, deux autres actions ont lieu dans le script. L’une est une fonction qui reçoit une réponse du serveur avec les détails de l’utilisateur. L’autre définit les données sur le stockage local. GTM a accès à la fois à la fonction et à localStorage. Vous pouvez appeler la fonction et accéder à localStorage à l’aide de GTM.

2. Ajoutez une nouvelle balise pour attribuer les abonnements après le chargement de la page de remerciement
   

   

3. Donnez un nom distinct à la balise et sélectionnez l’option de type de balise HTML personnalisée.
4. Mettez le code suivant dans le code HTML personnalisé.
   

   <script> 
   AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'subscription'}); </script> 

   

5. Développez le contrôle Paramètres avancés, puis le contrôle Séquencement des balises sous la zone de texte et assurez-vous qu’il est configuré pour déclencher la conversion après l’exécution de la balise.
   

   

6. Pour déclencher la balise de conversion, définissez un déclencheur. Dans l’exemple, le déclencheur est déclenché lors du chargement de la page de remerciement.
   

   

Enregistrement des événements lorsque les utilisateurs interagissent avec le site web

• Vous avez un site web de commerce électronique et vous souhaitez enregistrer les événements de paiement.
• Une fois que l’utilisateur a cliqué sur le bouton de paiement, le SDK Web envoie un événement à AppsFlyer.

1. Configurez une page de paiement
   

   <html>
   <head>
       <script>
           // Google Tag Manager loads the Web SDK
           <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
           j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
           })(window,document,'script','dataLayer','GTM-XXXX');
       </script>
   </head>
   <body>
       <h1>Shopping Cart</h1>
       <h2>Shirt</h2>
       <p>
           <ul>
               <li>Color: Blue</li>
               <li>Quantity: 2</li>
               <li>Price: $20</li>
           </ul>
       </p>
       <h2>Pants</h2>
       <p>
           <ul>
               <li>Color: Black</li>
               <li>Quantity: 3</li>
               <li>Price: $15</li>
           </ul>
       </p>
       <button id='checkout'>Checkout</button>
   </body>
   </html>

   Le code précédent charge le SDK Web à l’aide de GTM. Le reste est simplement du HTML qui imite une page de panier. Notez le bouton Paiement, qui contient l’ID de paiement. Il est nécessaire lors de la configuration de GTM pour gérer un clic sur ce bouton.

2. Dans GTM, cliquez sur Variables, Configurer et cochez Élément de clic dans la liste des variables intégrées.
   
   
3. Créez une nouvelle variable, donnez-lui un nom significatif et choisissez le type de Tous les éléments.
   
   
4. Dans la configuration du déclencheur, choisissez Quelques clics, choisissez Élément de clic, qui correspond au sélecteur CSS #checkout.
   
   
5. Créez une balise pour l’action de paiement, choisissez le type HTML personnalisé et définissez le déclencheur sur le déclencheur de paiement.
   

   <script>
    AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'}); </script>

   

1. Configurez une page d’inscription :

   <html>
   <head>
       <script>
            // Google Tag Manager loads the Web SDK
           (function (w, d, s, l, i) {
               w[l] = w[l] || []; w[l].push({
                   'gtm.start':
                       new Date().getTime(), event: 'gtm.js'
               }); var f = d.getElementsByTagName(s)[0],
                   j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
                       'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
           })(window, document, 'script', 'dataLayer', 'GTM-5VJ6C7R');
   
       // This function stores the user email to be sent to the server after the user reaches the thank you page
       // the response from the server is a unique CUID that should be used in the web SDK setCustomerUserId method
           function storeUserEmail (){
               var userEmail = document.getElementById('email').value;
               localStorage.setItem('user_email', userEmail);
           }
       </script>
   </head>
   <body>
       <h1>Sign Up</h1>
       <form onsubmit="storeUserEmail()" action="/signup" method="post">
           <div><label>Name</label>
               <input type="text" name="name" id="name"></div>
           <br />
           <div> <label>Email</label>
               <input type="email" name="email" id="email"></div>
           <br />
           <input type="submit" id="submit">
       </form>
   </body>
   </html>

   Le code ci-dessus est un simple formulaire d’inscription. Lorsque le formulaire est envoyé, l’adresse e-mail est stockée dans localStorage. Lorsque l’utilisateur atteint la page de remerciement, son adresse e-mail est envoyée au serveur pour obtenir le CUID unique de cet e-mail.

2. Configurez une page de remerciement pour les utilisateurs qui s’inscrivent :

   (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",{pba: {webAppId: "WEB_DEV_KEY"}})
       </script>
       <script>
           // using the fetch api to send the user email to the server
           // and get the unique user id in return 
           window.onload = function () {
           var userEmail = localStorage.getItem('user_email');
           fetch('users/' + userEmail).then(function (res) {
                  res.text().then(function (id) {
                  console.log(id);
                  AF('pba', 'setCustomerUserId', id);
               });
            });
           } </script> 
       </head>
       <body> 
               <h1>Thank You for Signing Up!</h1> 
        </body> 
    </html>    

   Le code précédent est une page de remerciement avec un déclencheur GTM qui envoie au serveur l’adresse e-mail fournie par l’utilisateur dans le formulaire d’inscription.
   En supposant qu’à l’inscription, le serveur crée un utilisateur avec un CUID unique.
   L’envoi de l’e-mail au serveur a pour but de recevoir un CUID unique.
   Le serveur répond avec un CUID unique qui est envoyé à l’aide de la méthode setCustomerUserId().
   Continuez cette procédure pour créer le déclencheur et l’onglet.

3. Ajoutez une nouvelle balise pour attribuer les abonnements après le chargement de la page de remerciement.
4. Donnez un nom distinct à la balise et sélectionnez l’option de type de balise « HTML personnalisé »

   
   <script>
           var userEmail = localStorage.getItem('user_email');
           fetch('users/' + userEmail).then(function (res) {
            res.text().then(function (id) {
                  console.log(id);
                  AF('pba', 'setCustomerUserId', id);
               });
            });
   </script>

5. Développez le contrôle Paramètres avancés, puis le contrôle Séquencement des balises sous la zone de texte et assurez-vous qu’il est configuré pour déclencher la conversion après l’exécution de la balise.
   

   

6. Définissez un déclencheur pour la balise de conversion afin d’indiquer quand la balise de conversion doit être déclenchée (dans l’exemple ci-dessous, elle est déclenchée lors du chargement de la page « Merci »).