Connect intégré

La fonctionnalité Connect intégré permet de réduire les frictions et d'améliorer l'entonnoir de conversion lorsque les utilisateurs tentent d'associer AdSense à votre plate-forme.

Embedded Connect est une petite bibliothèque JavaScript qui détermine le meilleur point de départ pour un utilisateur donné et le guide tout au long d'un processus d'inscription personnalisé à AdSense qui l'aide à effectuer toutes les étapes nécessaires pour être en mesure de diffuser des annonces. Il permet, par exemple, de déterminer si l'utilisateur possède un compte AdSense, s'il a signé les conditions d'utilisation AdSense, s'il a ajouté votre site de plate-forme à son compte AdSense et si l'état du site est "Prêt".

La fonctionnalité Connect intégré avec l'option d'expérience utilisateur gérée par Google permet également de gérer l'expérience utilisateur qui consiste à présenter l'état du compte et du site à l'utilisateur, en le redirigeant vers l'emplacement correct dans AdSense afin de résoudre les éventuels problèmes.

Pour optimiser l'expérience des développeurs, la bibliothèque envoie également des rappels à votre plate-forme contenant la référence éditeur AdSense de l'utilisateur, nécessaire à la configuration correcte de la diffusion d'annonces.

Le Connect intégré propose deux options pour l'expérience utilisateur:

• Expérience utilisateur gérée par Google Utilisez le widget Embedded Connect, qui gère toute l'expérience utilisateur. Le widget aide les utilisateurs tout au long du processus d'inscription et leur présente des informations sur leur compte et l'état de leur site. Cette option permet de rappeler la référence éditeur AdSense déclenchée lorsque l'utilisateur associe un compte AdSense pour la première fois.
• Expérience utilisateur personnalisée : Utilisez la méthode de connexion intégrée adsenseEmbeddedConnect.connect(...), qui déclenche le flux d'inscription dans une nouvelle fenêtre. Cette option fournit un rappel avec la référence éditeur AdSense et un jeton d'accès permettant d'extraire des informations supplémentaires du compte AdSense à l'aide de l'API AdSense Management. Cette option nécessite que vous conceviez vous-même l'expérience utilisateur.

Implémenter Embedded Connect

Pour utiliser Embedded Connect, procédez comme suit:

1. Créer un projet dans Google Cloud (ou utiliser un projet existant)
2. Créer un ID client OAuth
3. Configurer votre ID client OAuth à utiliser avec Embedded Connect
4. (Facultatif) Personnaliser votre écran de consentement OAuth
5. Ajouter la bibliothèque JavaScript Embedded Connect à la page
6. Implémenter le code de Embedded Connect

Étape 1: Créez un projet Google Cloud (ou utilisez un projet existant)

Si vous avez déjà un projet Google Cloud, n'hésitez pas à l'utiliser. Sinon, suivez le guide ci-dessous pour configurer un nouveau projet:

https://cloud.google.com/resource-manager/docs/creating-managing-projects

Étape 2: Créez un ID client OAuth

Les projets Google Cloud disposent d'un ID client OAuth par défaut que vous pouvez utiliser. Vous le trouverez en accédant à API et services > Identifiants.

Si vous souhaitez créer un ID client OAuth dédié, procédez comme suit:

• Accédez à API et services > Identifiants.
• Cliquez sur "+ Créer des identifiants" en haut de la page, puis sélectionnez l'ID client OAuth.
• Votre type d'application sera "Application Web".
• Attribuez un nom à votre ID client, puis cliquez sur "Créer".

Étape 3: Configurez votre ID client OAuth à utiliser avec la connexion intégrée

Une fois que vous avez choisi l'ID client OAuth à utiliser pour l'intégration d'Embedded Connect, vous devez le configurer.

Procédez comme suit :

• Sur la page Identifiants, cliquez sur l'icône en forme de crayon correspondant à l'ID client que vous souhaitez configurer.
• Dans la section Origines JavaScript autorisées, ajoutez les URI autorisés à émettre des requêtes à l'aide de votre ID client. Normalement, les URI de votre serveur de développement et de votre environnement local sont ajoutés (par exemple, https://dev.example.com et http://localhost:5000). Vous devez également ajouter un URI pour votre environnement de production (par exemple, https://example.com).

(Facultatif) Étape 4: Personnalisez votre écran de consentement OAuth

L'écran de consentement OAuth permet à votre ID client d'accéder à ses données AdSense. Il s'agit d'un aspect essentiel du fonctionnement de Embedded Connect. Vous pouvez personnaliser cet écran pour inclure le nom de votre plate-forme, votre logo, etc. Accédez à la page de l'écran de consentement OAuth pour configurer vos personnalisations. Cliquez sur "Modifier l'application" en haut de la page et suivez les instructions de l'assistant.

Étape 5: Implémenter la bibliothèque JavaScript de connexion intégrée

Cette bibliothèque contient les différentes méthodes utilisées pour lancer la connexion intégrée et vous fournit les rappels nécessaires pour récupérer et oublier la référence éditeur de l'utilisateur. Insérez-les dans l'en-tête de la page.

Pour l'expérience utilisateur gérée par Google:

<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}" async defer></script>

Pour une expérience utilisateur personnalisée:

<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>

Assurez-vous de fournir une implémentation pour le nom de votre fonction JavaScript transmis au paramètre load. La fonction sera appelée lorsque l'API adsenseEmbeddedConnect sera prête à être utilisée.

Attributs de la balise de script

Notez dans l'exemple ci-dessus que plusieurs attributs sont définis au niveau du tag de script. Vous trouverez ci-dessous une explication de chaque attribut.

• src: URL à partir de laquelle l'API Embedded Connect est chargée. L'URL peut contenir plusieurs paramètres de requête, décrits ci-dessous.
• async: demande au navigateur de télécharger et d'exécuter le script de manière asynchrone. Lorsque le script est exécuté, il appelle la fonction spécifiée à l'aide du paramètre load.
• defer: lorsque cette option est définie, le navigateur télécharge le code JavaScript Embedded Connect en parallèle de l'analyse de la page, puis l'exécute une fois l'analyse terminée.

Paramètres src

L'attribut src contient plusieurs paramètres de requête nécessaires au lancement de Embedded Connect. Vous trouverez ci-dessous des informations sur l'utilisation de chaque paramètre.

• load est le nom d'une fonction JavaScript globale qui est appelée une fois l'API entièrement chargée. Vous pouvez choisir n'importe quel nom pour cette fonction.
• hl spécifie la langue à utiliser pour toutes les localisations, y compris, par exemple, le texte du pop-up d'inscription. Il s'agit d'un paramètre de requête facultatif. S'il n'est pas présent ou si la langue n'est pas prise en charge par AdSense, le widget utilise l'anglais américain par défaut. Consultez la liste des langues acceptées par AdSense. La valeur du paramètre hl doit suivre la norme BCP 47. Par exemple, pour les utilisateurs anglophones britanniques, la chaîne sera en-GB.
• headless=true indique que Connect intégré sera utilisé avec l'option "Expérience utilisateur personnalisée" au lieu de l'expérience utilisateur gérée par Google.

Remarque :La bibliothèque JavaScript de Connect intégré ne renvoie l'état 200 que si l'URI sur lequel elle est chargée a été ajoutée à la liste d'autorisation par Google. Sinon, la requête sera refusée avec un code 403. Par exemple, si vous avez l'intention d'utiliser la bibliothèque JavaScript Embedded Connect sur console.example.com, Google doit ajouter cet URI à la liste d'autorisation pour que la bibliothèque puisse se charger. Veuillez contacter votre responsable de compte afin de résoudre ce problème pour votre plate-forme. De même, le code 403 est renvoyé si vous essayez d'appeler Embedded Connect à partir d'une URL utilisant le protocole HTTP (utilisez HTTPS).

Maintenant que vous avez choisi entre l'expérience utilisateur gérée par Google et l'expérience utilisateur personnalisée, consultez les exemples de code pour chaque approche ci-dessous.

Étape 6: Implémenter le code de connexion intégrée

Comme indiqué ci-dessus, l'expérience utilisateur peut être de deux façons:

• Expérience utilisateur gérée par Google
• Expérience utilisateur personnalisée

Choisissez l'option d'implémentation qui correspond le mieux aux besoins de votre plate-forme.

Expérience utilisateur gérée par Google

Suivez ces étapes pour que Google affiche le widget qui déclenche le processus d'inscription et présente à l'utilisateur des informations pertinentes sur l'état de son compte et de son site.

Le code de Embedded Connect se compose de deux composants. La première est un <div> vide qui spécifie l'emplacement où Embedded Connect doit afficher le widget d'inscription. Le second est le code dans lequel les configurations sont définies et les rappels sont gérés.

Élément HTML dans lequel le widget Connect intégré s'affiche

Placez ce code HTML sur la page sur laquelle vous souhaitez afficher le widget Connect intégré:

<div id="adsenseEmbeddedConnect"></div>

Code Connect intégré

Ensuite, sous la bibliothèque Embedded Connect, mais au-dessus de l'élément div, placez le code de configuration:

function initEmbeddedConnect() {
    adsenseEmbeddedConnect.init({
        // <div> to show the Embedded Connect widget in
        'divId': 'adsenseEmbeddedConnect',

        // OAuth client ID from step 2
        'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',

        // Access token from the Google Identity APIs, see
        // https://developers.google.com/identity/oauth2/web/guides/use-token-model
        // Use the following scope when requesting the access token:
        // https://www.googleapis.com/auth/adsense.readonly
        'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',

        // Login hint, an optional parameter which suppresses the account
        // chooser and either pre-fills the email box on the sign-in form,
        // or selects the proper session (if the user is using multiple
        // sign-in)
        'loginHint': '[e-mail]',

        // Child site (which is added to AdSense as part of the Embedded Connect flow)
        // Consult with your account manager to ensure this value is set correctly for your platform
        'siteUrl': 'site.example.com',

        // Optional parameter, the publisher ID of the user.
        // When set, the Embedded Connect widget will display the state of the user's AdSense account.
        // When unset, the Embedded Connect widget will show the default state which triggers the connection flow.
        'publisherId': "pub-0000000000000000",

        'onConnect': function(pid) {
          // Your custom code to send the publisher ID (pid) to your server for it to be saved.
          // The onConnect function is called when the user has completed all the onboarding steps
        },
        'onDisconnect': function() {
          // Your custom code to forget the publisher ID.
          // This onDisconnect function is called when the user has clicked the "Disconnect" button in the Embedded Connect widget
        },
    });
};

Captures d'écran

Le widget Connect intégré présente quatre états principaux:

1. (Par défaut) Se connecter à AdSense
2. Connexion à AdSense
3. Examen des informations du site
4. Problèmes détectés.

1. (Par défaut) Se connecter à AdSense

Il s'agit de l'état par défaut qui s'affiche lorsque le champ publisherId n'est pas présent dans le code de la connexion intégrée. Il lance le flux de connexion (pop-up) et, une fois le flux terminé par l'utilisateur, déclenche le rappel onConnect.

2. Connexion à AdSense

Cet état est visible par les utilisateurs lorsqu'ils lancent le flux de connexion (et que le pop-up est présent). Une fois le pop-up fermé ou la fin de la procédure, cet état passe à l'un des autres.

3. Examen des informations du site

Dès qu'un nouveau site est soumis à AdSense, un processus d'examen est mis en place. Aucune annonce ne peut être diffusée pendant cette période.

La vérification de propriété est un élément essentiel de l'examen. Elle peut être transmise de différentes manières, par exemple:

• La référence éditeur du compte enfant est présente dans le fichier ads.txt
• La référence éditeur du compte enfant est présente dans un tag d'emplacement publicitaire sur le site de l'utilisateur.
• La balise Meta google-adsense-child-account est présente sur le site de l'utilisateur. Pour optimiser les résultats, assurez-vous qu'elle est présente sur la page d'accueil du site de l'utilisateur.

La meilleure approche à suivre dépend de la structure de vos URL, ainsi que d'autres facteurs. Pour connaître la meilleure approche pour votre plate-forme, veuillez contacter votre responsable de compte.

4. Problèmes détectés.

Si le compte ou le site de l'utilisateur présente des problèmes qui doivent être résolus, cet état sera indiqué aux utilisateurs.

Expérience utilisateur personnalisée

Suivez ces étapes si vous souhaitez gérer vous-même l'expérience utilisateur et utiliser des appels d'API pour déclencher la méthode d'inscription manuellement.

Bibliothèque JavaScript de connexion intégrée

Pour utiliser l'option d'expérience utilisateur personnalisée, vous devez définir le paramètre headless=true dans l'attribut src. Exemple :

<script src="https://www.google.com/adsense/js/embedded-connect.js?load=initEmbeddedConnect&hl={language}&headless=true" async defer></script>

Fournir des boutons de connexion et de déconnexion

Une fois que l'API adsenseEmbeddedConnect est prête à être utilisée (tel que vérifié par la fonction JavaScript transmise au paramètre load), fournissez une implémentation pour la connexion et la déconnexion d'AdSense. Par exemple, en fournissant deux boutons:

<button onclick="connectAdSense()">Connect to AdSense</button>
<button onclick="disconnectAdSense()">Disconnect account</button>

Selon que vous avez enregistré ou non une référence éditeur à partir de votre utilisateur, vous pouvez choisir le bouton à afficher.

Code de connexion

function connectAdSense(){
    adsenseEmbeddedConnect.connect({
        // OAuth client ID
        'clientId': 'xxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',

        // Access token from the Google Identity APIs, see
        // https://developers.google.com/identity/oauth2/web/guides/use-token-model
        // Use the following scope when requesting the access token:
        // https://www.googleapis.com/auth/adsense.readonly
        'accessToken': 'xxxxxxxxxxxxxxxxxxxxxxx',

        // Child site (which is added to AdSense as part of the Embedded Connect flow)
        // Consult with your account manager to ensure this value is set correctly for your platform
        'siteUrl': 'site.example.com',

        'onConnect': function(response) {
            // Your custom code to send the publisher ID (response[publisherId]) to your server for it to be saved.
            // The onConnect function is called when the user has completed all the onboarding steps
            // Note that you'll additionally receive an OAuth2 access token (response[token]) which can be used with the AdSense Management API to perform other operations
        },
        'onCancel': function() {
            // This callback is called if the user closes the popup window without completing the sign-up flow
        }
    });
}

Code de déconnexion

function disconnectAdSense(){
    // Your custom code to forget the publisherId from your server.
}