AdSense for Platforms | Google for Developers

Cette page a été traduite par l'API Cloud Translation.

Embedded Connect

Embedded Connect 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 requises pour pouvoir diffuser des annonces. Elle gère différents scénarios, par exemple pour déterminer si l'utilisateur possède un compte AdSense, s'il a accepté les conditions d'utilisation AdSense, s'il a ajouté le site de la plate-forme à son compte AdSense et si l'état du site est "Prêt".

La connexion intégrée avec 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 à l'utilisateur, en le guidant vers l'emplacement approprié dans AdSense pour résoudre tout problème potentiel.

Pour faciliter 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. Ces rappels sont nécessaires pour configurer correctement la diffusion des annonces.

Embedded Connect propose deux options d'expérience utilisateur:

Expérience utilisateur gérée par Google. Utilisez le widget Embedded Connect, qui gère toute l'expérience utilisateur. Il aidera les utilisateurs tout au long du processus d'inscription et leur fournira des informations sur l'état de leur compte et de leur site. Cette option permet de déclencher un rappel avec 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 adsenseEmbeddedConnect.connect(...) intégrée, qui déclenche le processus d'inscription dans une nouvelle fenêtre. Cette option permet d'effectuer un rappel avec la référence éditeur AdSense et un jeton d'accès permettant de 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 Embedded Connect, vous devez procéder comme suit:

Créer un projet dans Google Cloud (ou utiliser un projet existant)
Créer un ID client OAuth
Configurer votre ID client OAuth à utiliser avec Embedded Connect
(Facultatif) Personnaliser votre écran de consentement OAuth
Ajouter la bibliothèque JavaScript Embedded Connect à la page
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 disposent d'un ID client OAuth par défaut que vous pouvez utiliser. Pour le savoir, accédez à la page API et Services > Identifiants

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

Accédez à la page 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 Embedded Connect

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 (ex. : https://example.com)

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

L'écran de consentement OAuth permet aux utilisateurs d'autoriser votre ID client à accéder à leurs données AdSense. C'est un aspect essentiel du fonctionnement d'Embedded Connect. Vous pouvez personnaliser cet écran en y incluant le nom de votre plate-forme, votre logo, etc. Accédez à 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 Embedded Connect

Cette bibliothèque contient les différentes méthodes utilisées pour initier 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. Placez-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>

Veillez à fournir une implémentation pour le nom de votre fonction JavaScript transmis dans le paramètre load. La fonction est appelée lorsque le L'API adsenseEmbeddedConnect est prête à l'emploi.

Attributs du tag de script

Notez que dans l'exemple ci-dessus, 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, 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: lorsqu'il est défini, le navigateur télécharge le JavaScript Embedded Connect en parallèle pour analyser la page et l'exécute une fois l'analyse de la page terminée.

Paramètres src

L'attribut src contient plusieurs paramètres de requête nécessaires au lancement de Embedded Connect. Reportez-vous aux sections ci-dessous sur l'utilisation de chaque paramètre.

load est le nom d'une fonction JavaScript globale qui sera appelée lorsque l'API aura été 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 n'est pas présent ou si la langue n'est pas prise en charge par AdSense, le widget est l'anglais américain par défaut. Consultez la liste des langues acceptées par AdSense. La valeur du paramètre hl doit être conforme à la norme BCP 47. Par exemple, pour les utilisateurs de l'anglais britannique, la chaîne sera en-GB.
headless=true indique qu'Embedded Connect sera utilisé avec l'option d'expérience utilisateur personnalisée plutôt qu'avec l'expérience gérée par Google.

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

Étape 6: Implémenter le code Embedded Connect

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

Choisissez l'option d'implémentation qui répond 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 fournit à l'utilisateur des informations pertinentes sur l'état de son compte et de son site.

État par défaut de Connect intégré

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

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

Placez ce code HTML sur la page où vous voulez que le widget Embedded Connect s'affiche:

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

Code Embedded Connect

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

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': 'user@example.com',

        // 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:

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

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

Il s'agit de l'état par défaut, qui s'affiche pour les utilisateurs lorsque le champ publisherId du code Embedded Connect n'est pas présent. Elle lance le flux de connexion (pop-up) et, une fois le flux terminé par l'utilisateur, déclenche le rappel onConnect.

État par défaut de Connect intégré

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). À la fermeture du pop-up ou à la fin du flux, cet état est remplacé par l'un des autres états.

Embedded Connect - Connexion à AdSense

3. Examen des informations du site

Une fois qu'un nouveau site est envoyé à AdSense, un processus d'examen est déclenché. Aucune annonce ne peut être diffusée pendant cette période.

Connexion intégrée – Examen des informations d'un site

Un élément essentiel de l'examen est la vérification de la propriété, qui peut être vérifiée 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'il est présent sur la page d'accueil du site de l'utilisateur.

La meilleure approche dépend de la structure de votre URL et 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 à résoudre, cet état est indiqué aux utilisateurs.

Embedded Connect - Problèmes détectés

Expérience utilisateur personnalisée

Procédez comme suit si vous souhaitez gérer vous-même l'expérience utilisateur et utiliser les appels d'API pour déclencher la méthode d'inscription manuellement.

Bibliothèque JavaScript Embedded Connect

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 d'association et de déconnexion

Une fois que l'API adsenseEmbeddedConnect est prête à l'emploi (après vérification par le transmise dans le paramètre load), fournissez une implémentation. de connexion et de déconnexion d'AdSense. Par exemple, en fournissant deux boutons:

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

Vous pouvez choisir le bouton à afficher selon que vous avez enregistré une référence éditeur ou non auprès de l'utilisateur.

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

Le code de déconnexion

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