AdSense for Platforms | Google for Developers

Se usó la API de Cloud Translation para traducir esta página.

Connect incorporado

La incorporación de Connect reduce los inconvenientes y mejora el embudo de conversión cuando los usuarios intentan conectar AdSense con tu plataforma.

Embedded Connect es una pequeña biblioteca de JavaScript que determina el mejor punto de partida para un usuario determinado y lo guía a través de un flujo de registro personalizado de AdSense que lo ayuda a seguir todos los pasos necesarios para poder publicar anuncios. Además, controla situaciones, como determinar si el usuario tiene una cuenta de AdSense, si firmó los Términos y Condiciones de AdSense, si agregó tu sitio de plataforma a su cuenta de AdSense y si el estado del sitio es "Listo".

El Connect incorporado con la opción de UX administrada por Google también puede manejar la UX relacionada con mostrar los estados de las cuentas y los sitios a los usuarios, guiándolos al lugar correcto en AdSense para resolver cualquier posible problema.

Para mejorar la experiencia de los desarrolladores, la biblioteca también emite devoluciones de llamada a tu plataforma con el ID de publicador de AdSense del usuario, que es necesario para configurar la publicación de anuncios correctamente.

El dispositivo Connect incorporado ofrece dos opciones de visualización de la experiencia del usuario:

UX administrada por Google. Usar el widget de Embedded Connect, que administra toda la UX El widget ayudará a los usuarios a través de un flujo de registro y les mostrará información sobre el estado de su cuenta y del sitio dentro del widget. Esta opción proporciona una devolución de llamada con el ID de publicador de AdSense que se activa cuando el usuario conecta una cuenta de AdSense por primera vez.
UX personalizada. Utiliza el método adsenseEmbeddedConnect.connect(...) de conexión incorporada, que activa el flujo de registro en una ventana nueva. Esta opción proporciona una devolución de llamada con el ID de publicador de AdSense y un token de acceso que se puede utilizar para recuperar información adicional de la cuenta de AdSense mediante la API de AdSense Management. Esta opción requiere que diseñes la UX por tu cuenta.

Cómo implementar Embedded Connect

Para utilizar la función Embedded Connect, sigue estos pasos:

Crea un proyecto en Google Cloud (o usa uno existente)
Crea un ID de cliente de OAuth
Cómo configurar tu ID de cliente de OAuth para usarlo con Embedded Connect
Personaliza tu pantalla de consentimiento de OAuth (opcional)
Agrega la biblioteca de JavaScript de Embedded Connect a la página
Implementa el código de Embedded Connect

Paso 1: Crea un proyecto de Google Cloud nuevo (o usa uno existente)

Si ya tienes un proyecto de Google Cloud, puedes usarlo. De lo contrario, sigue la guía a continuación para configurar un proyecto nuevo:

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

Paso 2: Crea un ID de cliente de OAuth

Los proyectos de Google Cloud tendrán un ID de cliente de OAuth predeterminado que puedes usar. Puedes encontrarlo en las APIs y Servicios > Credenciales.

Si quieres crear un ID de cliente de OAuth exclusivo, sigue estos pasos:

Accede a APIs y Servicios > Credenciales
Haz clic en “+ Crear credenciales”. en la parte superior de la página y, luego, selecciona el ID de cliente de OAuth.
El tipo de aplicación será “Aplicación web”.
Asigna un nombre a tu ID de cliente y haz clic en "Crear"

Paso 3: Configura tu ID de cliente de OAuth para usarlo con Embedded Connect

Una vez que hayas decidido qué ID de cliente de OAuth quieres usar para la integración de Embedded Connect, deberás configurarlo.

Lleve a cabo los pasos siguientes:

En la página Credentials, haga clic en el ícono de lápiz del ID de cliente que desea configurar.
En la sección Orígenes autorizados de JavaScript, agrega los URI que pueden emitir solicitudes con tu ID de cliente. Por lo general, se agregan los URIs para el servidor de desarrollo y el entorno local (p.ej., https://dev.example.com y http://localhost:5000). Además, debes agregar un URI para tu entorno de producción (p.ej., https://example.com)

Paso 4: Personaliza la pantalla de consentimiento de OAuth (opcional)

La pantalla de consentimiento de OAuth es donde los usuarios otorgarán a tu ID de cliente acceso a sus datos de AdSense. Esta es una parte esencial del funcionamiento de Embedded Connect. Puedes personalizar esta pantalla para incluir el nombre de la plataforma, tu logotipo, etc. Visita la página Pantalla de consentimiento de OAuth para configurar tus personalizaciones. Haz clic en “Editar aplicación”. ubicado en la parte superior de la página y sigue las indicaciones del asistente.

Paso 5: Implementa la biblioteca de JavaScript de Embedded Connect

Esta biblioteca contiene los distintos métodos que se usan para iniciar la conexión incorporada y te proporcionan las devoluciones de llamada necesarias para recuperar y olvidar el ID de publicador del usuario. Impleméntalo en el encabezado de la página.

Para la UX administrada por Google:

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

Para UX personalizada:

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

Asegúrate de proporcionar una implementación para el nombre de la función de JavaScript que se pasa en el parámetro load. Se llamará a la función cuando el elemento La API de adsenseEmbeddedConnect está lista para usar.

Atributos de la etiqueta de secuencia de comandos

Observa en el ejemplo anterior que se configuraron varios atributos en la etiqueta de secuencia de comandos. A continuación, se incluye una explicación de cada atributo.

src: Es la URL desde la que se carga la API de Embedded Connect. La URL puede contener varios parámetros de consulta, que se documentan a continuación.
async: Solicita al navegador que descargue y ejecute la secuencia de comandos de forma asíncrona. Cuando se ejecute la secuencia de comandos, llamará a la función especificada mediante el parámetro load.
defer: Cuando se configura, el navegador descargará el código JavaScript de Embedded Connect para analizar la página y lo ejecutará una vez que la página haya terminado de analizarse.

Parámetros src

El atributo src contiene varios parámetros de consulta que son necesarios para iniciar la conexión incorporada. Consulta a continuación el uso de cada parámetro.

load es el nombre de una función global de JavaScript a la que se llamará cuando la API se cargue por completo. Puedes elegir cualquier nombre para esta función.
hl especifica el idioma que se usará para toda la localización, incluido, por ejemplo, el texto de la ventana emergente de registro. Es un parámetro de búsqueda opcional y, cuando no está presente o si el idioma no es compatible con AdSense, el widget se establecerá de forma predeterminada en inglés de EE.UU. Consulta los idiomas que admite AdSense. El valor del parámetro hl debe seguir el de BCP 47. Por ejemplo, para los usuarios de inglés británico, la cadena será en-GB.
headless=true indica que el conector incorporado se usará con la opción de UX personalizada en lugar de la UX administrada por Google.

Ahora que elegiste entre la UX administrada por Google y la UX personalizada, consulta los ejemplos de código para cada enfoque a continuación.

Paso 6: Implementa el código de Connect incorporado

Como se mencionó anteriormente, hay dos opciones de apariencia para la experiencia del usuario:

Elige la opción de implementación que mejor se adapte a las necesidades de tu plataforma.

UX administrada por Google

Sigue estos pasos para que Google renderice el widget que activa el flujo de registro y le muestra al usuario información relevante sobre el estado de su cuenta y sitio.

Estado predeterminado de Embedded Connect

Existen dos componentes del código de Embedded Connect. El primero es un <div> vacío que especifica dónde debe renderizarse el widget de registro el Embedded Connect. Y el segundo es el código en el que se establecen las configuraciones y se administran las devoluciones de llamada.

El elemento HTML en el que se renderiza el widget de Embedded Connect

Coloca este código HTML en la página en la que quieres que se renderice el widget de Embedded Connect:

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

El código de Embedded Connect

A continuación, debajo de la biblioteca de Embedded Connect, pero encima del elemento div, coloca el código de configuración:

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

Capturas de pantalla

El widget de Embedded Connect tiene cuatro estados principales:

(Predeterminado) Conectar a AdSense
Conéctate a AdSense
Revisando la información del sitio
Se detectaron problemas

1. (Predeterminado) Conectar a AdSense

Es el estado predeterminado que se muestra a los usuarios cuando no está presente el campo publisherId en el código de Embedded Connect. Inicia el flujo de conexión (ventana emergente) y, cuando el usuario complete correctamente el flujo, activará la devolución de llamada onConnect.

Estado predeterminado de Embedded Connect

2. Conéctate a AdSense

Este estado se muestra a los usuarios cuando inician el flujo de conexión (y la ventana emergente está presente). Cuando se cierra la ventana emergente o se completa el flujo, este estado cambia a uno de los otros.

Conexión incorporada: Conexión a AdSense

3. Revisando la información del sitio

Una vez que se envíe un sitio nuevo a AdSense, se llevará a cabo un proceso de revisión. No se pueden publicar anuncios durante este período.

Connect incorporado: Revisa la información del sitio

Un componente fundamental de la opinión es una verificación de propiedad, que se puede aprobar de varias maneras, incluidas las siguientes:

El ID de publicador de la cuenta secundaria se encuentra en el archivo ads.txt
El ID de publicador de la cuenta secundaria está presente en una etiqueta de anuncio en el sitio del usuario
la metaetiqueta google-adsense-child-account esté presente en el sitio del usuario. Para obtener los mejores resultados, asegúrate de que esté presente en la página principal del sitio del usuario.

El mejor enfoque dependerá de la estructura de tu URL y otros factores. Consulta a tu administrador de cuentas para conocer el mejor enfoque para tu plataforma.

4. Se detectaron problemas

En caso de que la cuenta o el sitio del usuario tengan problemas que deban resolver, este estado se mostrará a los usuarios.

Connect incorporado: problemas detectados

UX personalizada

Sigue estos pasos si deseas administrar la UX por tu cuenta y usa llamadas a la API para activar el método de registro de forma manual.

La biblioteca de JavaScript de conexión incorporada

Para usar la opción de UX personalizada, el parámetro headless=true debe establecerse en el atributo src. Por ejemplo:

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

Cómo proporcionar botones para conectarse y desconectarse

Una vez que la API de adsenseEmbeddedConnect esté lista para usarse (según lo verificado por el función de JavaScript pasada al parámetro load), proporciona una implementación para conectarse y desconectarse de AdSense. Por ejemplo, si proporcionas dos botones:

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

En función de si tienes o no un ID de publicador guardado de tu usuario, puedes elegir qué botón mostrar.

El código de conexión

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

El código de desconexión

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