Connexion intégrée

Il réduit les frictions et améliore 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 personnalisé d'inscription à AdSense qui l'aide à effectuer toutes les étapes nécessaires pour pouvoir 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é à l'option d'expérience utilisateur gérée par Google permet également de gérer l'expérience utilisateur nécessaire à l'affichage de l'état du compte et du site auprès de l'utilisateur, en le guidant vers l'endroit approprié dans AdSense pour résoudre tout problème potentiel.

Pour améliorer 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.

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

• Expérience utilisateur gérée par Google Utiliser le widget Embedded Connect, qui gère l'ensemble de l'expérience utilisateur. Le widget aidera les utilisateurs à s'inscrire et leur permettra d'afficher 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 processus 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 qui peut être utilisé pour récupérer des informations supplémentaires à partir 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 la fonctionnalité 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 Embedded Connect JavaScript à la page
6. Implémenter le code 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 disposeront d'un ID client OAuth par défaut que vous pouvez utiliser. Vous pouvez le trouver 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 "ID client OAuth".
• Le 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 de Embedded Connect, vous devez le configurer.

Procédez comme suit :

• Sur la page Identifiants, cliquez sur l'icône en forme de crayon à côté de 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 aux utilisateurs d'accéder à leurs données AdSense pour que votre ID client puisse y accéder. Il s'agit d'un aspect essentiel du fonctionnement de la fonctionnalité Embedded Connect. Vous pouvez personnaliser cet écran pour inclure le nom de votre plate-forme, votre logo, etc. Accédez à la page É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-le 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 la fonction JavaScript transmis au paramètre load. La fonction sera appelée lorsque l'API adsenseEmbeddedConnect sera prête à être utilisée.

Attributs du tag de script

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

• src: URL à partir de laquelle l'API Embedded Connect est chargée. L'URL peut contenir plusieurs paramètres de requête, présentés 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 pour lancer la fonctionnalité Embedded Connect. Vous trouverez ci-dessous des explications 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. Lorsqu'il est absent ou si la langue n'est pas acceptée 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 respecter la norme BCP 47. Par exemple, pour les utilisateurs d'anglais britannique, la chaîne sera en-GB.
• headless=true indique que la fonctionnalité Connect intégré sera utilisée avec l'option d'expérience utilisateur personnalisée au lieu de l'expérience utilisateur gérée par Google.

Remarque :La bibliothèque JavaScript de connexion intégrée ne renvoie un code d'état 200 que si l'URI avec lequel elle est chargée a été autorisé 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 de connexion intégrée sur console.example.com, Google doit ajouter cet URI à la liste d'autorisation pour que la bibliothèque se charge. Veuillez contacter votre responsable de compte pour résoudre ce problème pour votre plate-forme. De même, le code 403 est renvoyé si vous essayez d'appeler la fonctionnalité Connect intégré à partir d'une URL utilisant le protocole HTTP (veuillez utiliser HTTPS).

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

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

Comme indiqué ci-dessus, deux options s'offrent à vous pour définir l'expérience utilisateur:

• 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 la fonctionnalité Embedded Connect comporte deux composants. Le premier est un <div> vide qui indique où Embedded Connect doit afficher le widget d'inscription. Le second est le code qui permet de définir les configurations et de gérer les rappels.

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

Placez ce code HTML sur la page sur laquelle vous souhaitez que le widget Connect intégré s'affiche:

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

Code Embedded Connect

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é comporte quatre états principaux:

1. (Par défaut) Se connecter à AdSense
2. Connexion à AdSense
3. Examiner les 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 du code de Connect intégré n'est pas présent. Il lance le flux de connexion (pop-up) et déclenche le rappel onConnect une fois le flux terminé par l'utilisateur.

2. Connexion à AdSense

Cet état est visible par les utilisateurs lorsqu'ils lancent le flux de connexion (et que la fenêtre pop-up s'affiche). À la fermeture du pop-up ou à la fin du flux, cet état passe à l'un des autres états.

3. Examiner les informations du site

Une fois qu'un nouveau site a été soumis à AdSense, un processus d'examen a lieu. Les annonces ne peuvent pas être diffusées pendant cette période.

La vérification de la propriété d'un élément essentiel de l'examen peut être effectuée de différentes manières, par exemple:

• le fichier ads.txt contient votre référence éditeur parent ;
• La référence éditeur du compte enfant figure dans le fichier ads.txt.
• La balise Meta google-adsense-child-account est présente sur le site de l'utilisateur.

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

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 déclencher la méthode d'inscription manuellement à l'aide d'appels d'API.

Bibliothèque Embedded Connect JavaScript

Pour utiliser l'option d'expérience utilisateur personnalisée, le paramètre headless=true doit être défini 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 se connecter et se déconnecter d'AdSense. Par exemple, en fournissant deux boutons:

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

Selon que vous disposez ou non d'une référence éditeur enregistrée pour 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.
}