AdSense for Platforms | Google for Developers

Diese Seite wurde von der Cloud Translation API übersetzt.

Eingebettete Verbindung

Embed Connect reduziert Reibungspunkte und verbessert den Conversion-Trichter, wenn Nutzer versuchen, AdSense mit Ihrer Plattform zu verknüpfen.

Eingebettet Connect ist eine kleine JavaScript-Bibliothek, die den besten Startpunkt für einen bestimmten Nutzer ermittelt und ihn durch einen individuellen AdSense-Anmeldeablauf führt, der ihn durch alle erforderlichen Schritte zum Schalten von Anzeigen führt. Sie prüft beispielsweise, ob der Nutzer ein AdSense-Konto hat, ob er die AdSense-Nutzungsbedingungen unterzeichnet hat, ob er Ihre Plattformwebsite zu seinem AdSense-Konto hinzugefügt hat und ob die Website den Status „Bereit“ hat.

Integrierte Verbindung mit der von Google verwalteten UX-Option kann auch die UX der Anzeige des Konto- und Websitestatus für Nutzer übernehmen und sie an die richtige Stelle in AdSense leiten, um potenzielle Probleme zu beheben.

Zur Unterstützung der Entwicklererfahrung gibt die Bibliothek auch Callbacks an Ihre Plattform aus, die die AdSense-Publisher-ID des Nutzers enthalten. Diese wird für die korrekte Einrichtung der Anzeigenbereitstellung benötigt.

Embed Connect bietet zwei Optionen für die Nutzererfahrung:

Von Google verwaltete UX: Verwenden Sie das Integrated Connect-Widget, das die gesamte UX verwaltet. Das Widget hilft Nutzern bei der Anmeldung und zeigt Nutzerinformationen zu ihrem Konto und Websitestatus im Widget an. Mit dieser Option wird ein Callback mit der AdSense-Publisher-ID bereitgestellt, der ausgelöst wird, wenn der Nutzer zum ersten Mal ein AdSense-Konto verbindet.
Benutzerdefinierte UX Verwenden Sie die Embed Connect-Methode adsenseEmbeddedConnect.connect(...), bei der der Registrierungsvorgang in einem neuen Fenster ausgelöst wird. Diese Option stellt einen Callback mit der AdSense-Publisher-ID und einem Zugriffstoken bereit, mit dem mithilfe der AdSense Management API zusätzliche Informationen aus dem AdSense-Konto abgerufen werden können. Bei dieser Option müssen Sie die UX selbst gestalten.

Embed Connect implementieren

So verwenden Sie Integrated Connect:

Erstellen Sie ein Projekt in Google Cloud oder verwenden Sie ein vorhandenes Projekt.
OAuth-Client-ID erstellen
OAuth-Client-ID für die Verwendung mit Embed Connect konfigurieren
Optional: OAuth-Zustimmungsbildschirm anpassen
Die Integrated Connect-JavaScript-Bibliothek zur Seite hinzufügen
Embed Connect-Code implementieren

Schritt 1: Neues Google Cloud-Projekt erstellen oder vorhandenes verwenden

Wenn Sie bereits ein Google Cloud-Projekt haben, können Sie dieses verwenden. Andernfalls folgen Sie der Anleitung unten zum Einrichten eines neuen Projekts:

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

Schritt 2: OAuth-Client-ID erstellen

Google Cloud-Projekte haben eine standardmäßige OAuth-Client-ID, die Sie verwenden können. Rufen Sie dazu APIs und Dienste > Anmeldedaten auf.

So erstellen Sie eine dedizierte OAuth-Client-ID:

Rufen Sie APIs und Dienste > Anmeldedaten auf.
Klicken Sie oben auf der Seite auf „+ Anmeldedaten erstellen“ und wählen Sie dann „OAuth-Client-ID“ aus.
Ihr Anwendungstyp ist „Webanwendung“
Geben Sie einen Namen für Ihre Client-ID ein und klicken Sie auf „Erstellen“.

Schritt 3: OAuth-Client-ID für die Verwendung mit Embed Connect konfigurieren

Nachdem Sie sich entschieden haben, welche OAuth-Client-ID für die Integration von Integrated Connect verwendet werden soll, müssen Sie sie konfigurieren.

Gehen Sie so vor:

Klicken Sie auf der Seite „Anmeldedaten“ auf das Stiftsymbol für die Client-ID, die Sie konfigurieren möchten.
Fügen Sie im Abschnitt Autorisierte JavaScript-Quellen die URIs hinzu, die Anfragen mit Ihrer Client-ID senden dürfen. Normalerweise werden URIs für Ihren Entwicklungsserver und die lokale Umgebung hinzugefügt (z.B. https://dev.example.com und http://localhost:5000). Sie sollten außerdem einen URI für Ihre Produktionsumgebung hinzufügen (z.B. https://beispiel.de)

Schritt 4 (optional): OAuth-Zustimmungsbildschirm anpassen

Der OAuth-Zustimmungsbildschirm wird verwendet, um Ihrer Client-ID Zugriff auf die AdSense-Daten zu gewähren. Dies ist ein wesentlicher Bestandteil der Funktionsweise von Embed Connect. Sie können diesen Bildschirm so anpassen, dass er den Namen Ihrer Plattform, Ihr Logo usw. enthält. Rufen Sie die Seite OAuth-Zustimmungsbildschirm auf, um Ihre Anpassungen vorzunehmen. Klicken Sie oben auf der Seite auf "App bearbeiten" und folgen Sie dem Assistenten.

Schritt 5: Embed Connect JavaScript-Bibliothek implementieren

Diese Bibliothek enthält die verschiedenen Methoden zum Initiieren einer eingebetteten Verbindung und stellt Ihnen die Callbacks zur Verfügung, mit denen Sie die Publisher-ID des Nutzers abrufen und vergessen können. Implementieren Sie dies im oberen Bereich der Seite.

Für von Google verwaltete UX:

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

Für die benutzerdefinierte UX:

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

Sie müssen eine Implementierung für den Namen der JavaScript-Funktion angeben, der an den Parameter load übergeben wird. Die Funktion wird aufgerufen, wenn die adsenseEmbeddedConnect API einsatzbereit ist.

Script-Tag-Attribute

Im Beispiel oben sind mehrere Attribute für das Skript-Tag festgelegt. Im Folgenden werden die einzelnen Attribute erläutert.

src: Die URL, von der die Embed Connect API geladen wird. Die URL kann mehrere Suchparameter enthalten, die im Folgenden beschrieben werden.
async: Weist den Browser an, das Skript asynchron herunterzuladen und auszuführen. Wenn das Skript ausgeführt wurde, wird die mit dem Parameter load angegebene Funktion aufgerufen.
defer: Wenn diese Richtlinie festgelegt ist, lädt der Browser das Integrated Connect-JavaScript parallel zum Parsen der Seite herunter und führt es aus, nachdem das Parsen der Seite abgeschlossen ist.

src-Parameter

Das Attribut src enthält mehrere Abfrageparameter, die zum Initiieren von Embed Connect erforderlich sind. Siehe unten zur Verwendung der einzelnen Parameter.

load ist der Name einer globalen JavaScript-Funktion, die aufgerufen wird, wenn die API vollständig geladen wurde. Sie können einen beliebigen Namen für diese Funktion wählen.
hl gibt die Sprache an, die für die Lokalisierung verwendet werden soll, beispielsweise den Text im Pop-up zur Anmeldung. Es ist ein optionaler Suchparameter. Wenn er nicht vorhanden ist oder die Sprache von AdSense nicht unterstützt wird, wird standardmäßig US-Englisch verwendet. Hier finden Sie die Sprachen, die von AdSense unterstützt werden. Der Parameterwert hl muss BCP 47 entsprechen. Für Nutzer in britischem Englisch ist der String beispielsweise en-GB.
headless=true gibt an, dass Embed Connect mit der Option für die benutzerdefinierte Nutzererfahrung und nicht mit der von Google verwalteten UX verwendet wird.

Nachdem Sie sich nun zwischen einer von Google verwalteten UX und einer benutzerdefinierten UX entschieden haben, sehen Sie sich die Codebeispiele für jeden Ansatz unten an.

Schritt 6: Embed Connect-Code implementieren

Wie bereits erwähnt, gibt es zwei Optionen für die Nutzererfahrung:

Wählen Sie die Implementierungsoption aus, die den Anforderungen Ihrer Plattform am besten entspricht.

Von Google verwaltete UX

Führen Sie die folgenden Schritte aus, damit Google das Widget rendert, das den Anmeldevorgang auslöst und dem Nutzer relevante Informationen zum Status seines Kontos und seiner Website anzeigt.

Standardstatus für eingebettete Konnektivität

Der Integrierte Connect-Code besteht aus zwei Komponenten. Das erste ist ein leeres <div>, das angibt, wo Embed Connect das Anmelde-Widget rendern soll. Der zweite ist der Code, mit dem Konfigurationen festgelegt und Callbacks verwaltet werden.

Das HTML-Element, in dem das Embed Connect-Widget gerendert wird.

Fügen Sie diesen HTML-Code auf der Seite ein, auf der das Embed Connect-Widget gerendert werden soll:

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

Der Embed Connect-Code

Platzieren Sie als Nächstes den Konfigurationscode unterhalb der Embed Connect-Bibliothek, aber über dem div-Element:

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

Screenshots

Das Embed Connect-Widget hat vier Hauptzustände:

(Standard) Mit AdSense verknüpfen
Mit AdSense verknüpfen
Überprüfen der Website-Informationen
Es wurden Probleme festgestellt.

1. (Standard) Mit AdSense verknüpfen

Das ist der Standardstatus, der Nutzern angezeigt wird, wenn das Feld publisherId im Einbettungscode nicht vorhanden ist. Sie initiiert den Verbindungsablauf (Pop-up) und löst nach erfolgreichem Abschluss des Ablaufs durch den Nutzer den onConnect-Callback aus.

Standardstatus für eingebettete Konnektivität

2. Mit AdSense verknüpfen

Dieser Status wird Nutzern angezeigt, wenn sie den Verbindungsablauf starten (und das Pop-up-Fenster angezeigt wird). Nach dem Schließen des Pop-ups oder dem Abschluss des Vorgangs ändert sich dieser Status in einen der anderen Status.

Embed Connect – Mit AdSense verbinden

3. Überprüfen der Website-Informationen

Sobald eine neue Website bei AdSense eingereicht wurde, wird eine Überprüfung durchgeführt. In dieser Zeit können keine Anzeigen ausgeliefert werden.

Embed Connect – Überprüfung der Websiteinformationen

Ein wichtiger Bestandteil der Überprüfung ist die Überprüfung der Inhaberschaft, die auf verschiedene Arten bestanden werden kann. Dazu gehören:

Die Publisher-ID des untergeordneten Kontos ist in der ads.txt-Datei vorhanden
Die Publisher-ID des untergeordneten Kontos ist in einem Anzeigen-Tag auf der Website des Nutzers vorhanden.
Auf der Website des Nutzers muss das Meta-Tag „google-adsense-child-account“ vorhanden sein. Die besten Ergebnisse erzielen Sie, wenn sie auf der Startseite der Website des Nutzers vorhanden sind.

Die beste Vorgehensweise hängt von Ihrer URL-Struktur und einigen anderen Faktoren ab. Wenden Sie sich an Ihren Account Manager, um die beste Strategie für Ihre Plattform zu finden.

4. Es wurden Probleme festgestellt.

Dieser Status wird Nutzern angezeigt, wenn mit dem Konto oder der Website des Nutzers Probleme auftreten, die behoben werden müssen.

Eingebettete Verbindung – Probleme festgestellt

Benutzerdefinierte UX

Führen Sie die folgenden Schritte aus, wenn Sie die Benutzeroberfläche selbst verwalten möchten, und verwenden Sie API-Aufrufe, um die Anmeldemethode manuell auszulösen.

Die Integrated Connect-JavaScript-Bibliothek

Wenn Sie die Option „Benutzerdefinierte UX“ verwenden möchten, muss der Parameter headless=true im Attribut src festgelegt werden. Beispiel:

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

Schaltflächen zum Verbinden und Trennen bereitstellen

Sobald die adsenseEmbeddedConnect API einsatzbereit ist (wie von der JavaScript-Funktion verifiziert, die an den load-Parameter übergeben wurde), kannst du eine Implementierung zum Herstellen und Trennen der Verbindung zu AdSense bereitstellen. Zum Beispiel durch Bereitstellung von zwei Schaltflächen:

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

Je nachdem, ob Sie eine Publisher-ID des Nutzers gespeichert haben, können Sie auswählen, welche Schaltfläche angezeigt werden soll.

Der Verbindungscode

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 zum Trennen der Verbindung

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