AdSense for Platforms | Google for Developers

Diese Seite wurde von der Cloud Translation API übersetzt.

Eingebettete Verbindung

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

Embedded Connect ist eine kleine JavaScript-Bibliothek, die den besten Ausgangspunkt für einen bestimmten Nutzer ermittelt und ihn durch einen benutzerdefinierten AdSense-Anmeldevorgang führt, der ihn durch alle erforderlichen Schritte zum Schalten von Anzeigen führt. Die Funktion verarbeitet u. a. die Feststellung, ob der Nutzer ein AdSense-Konto hat, ob er die AdSense-Nutzungsbedingungen unterzeichnet hat, ob er seine Plattformwebsite seinem AdSense-Konto hinzugefügt hat und ob die Website den Status „Bereit“ hat.

Embedded Connect mit der Option „Von Google verwaltete UX“ kann auch die UX verarbeiten, mit der der Konto- und Websitestatus für Nutzer angezeigt wird, und sie an die richtige Stelle in AdSense geleitet, um potenzielle Probleme zu beheben.

Um Entwicklern die Arbeit zu erleichtern, gibt die Bibliothek auch Callbacks an Ihre Plattform aus. Diese enthalten die AdSense-Publisher-ID des Nutzers. Diese ist für die korrekte Einrichtung der Anzeigenbereitstellung erforderlich.

Embedded Connect bietet zwei Optionen für die Nutzererfahrung:

Von Google verwaltete UX. Verwenden Sie das Embedded Connect-Widget, das die gesamte UX verwaltet. Das Widget unterstützt die Nutzer bei der Anmeldung und zeigt den Nutzern Informationen über ihr Konto und ihren Website-Status im Widget an. Über diese Option wird ein Callback mit der AdSense-Publisher-ID bereitgestellt, der ausgelöst wird, wenn der Nutzer zum ersten Mal ein AdSense-Konto verknüpft.
Individuelle Nutzererfahrung Verwende die Embedded Connect-Methode adsenseEmbeddedConnect.connect(...), die den Anmeldevorgang in einem neuen Fenster auslöst. Bei dieser Option wird ein Callback mit der AdSense-Publisher-ID und einem Zugriffstoken bereitgestellt. Damit können mithilfe der AdSense Management API zusätzliche Informationen aus dem AdSense-Konto abgerufen werden. Bei dieser Option müssen Sie das UX-Design selbst entwerfen.

Embedded Connect implementieren

Um Embedded Connect zu verwenden, musst du Folgendes tun:

Projekt in Google Cloud erstellen (oder ein vorhandenes verwenden)
OAuth-Client-ID erstellen
OAuth-Client-ID für die Verwendung mit Embedded Connect konfigurieren
(Optional) OAuth-Zustimmungsbildschirm anpassen
Embedded Connect-JavaScript-Bibliothek zur Seite hinzufügen
Embedded Connect-Code implementieren

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

Wenn Sie bereits ein Google Cloud-Projekt haben, können Sie dieses verwenden. Folgen Sie andernfalls der Anleitung unten, um ein neues Projekt einzurichten:

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

So erstellen Sie eine dedizierte OAuth-Client-ID:

Gehen Sie zu APIs und Dienste > Anmeldedaten
Klicken Sie auf „+ Anmeldedaten erstellen“. oben auf der Seite und wähle dann "OAuth-Client-ID" aus.
Der Anwendungstyp ist „Webanwendung“.
Benennen Sie Ihre Client-ID und klicken Sie auf „Erstellen“

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

Nachdem Sie sich entschieden haben, welche OAuth-Client-ID Sie für die Embedded Connect-Integration verwenden möchten, müssen Sie sie konfigurieren.

Gehen Sie so vor:

Klicken Sie auf der Seite „Anmeldedaten“ für die Client-ID, die Sie konfigurieren möchten, auf das Stiftsymbol.
Fügen Sie im Abschnitt Autorisierte JavaScript-Quellen die URIs hinzu, die Anfragen über Ihre Client-ID senden dürfen. Normalerweise werden URIs für Ihren Anwendungsserver 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

Auf dem OAuth-Zustimmungsbildschirm wird Ihrer Client-ID der Zugriff auf ihre AdSense-Daten gewährt. Dies ist ein wesentlicher Bestandteil der Funktionsweise von Embedded Connect. Sie können diesen Bildschirm anpassen, um z. B. den Namen Ihrer Plattform oder Ihr Logo einzufügen. Konfigurieren Sie Ihre Anpassungen auf der Seite OAuth-Zustimmungsbildschirm. Klicken Sie auf „App bearbeiten“. oben auf der Seite und folgen Sie dem Assistenten.

Schritt 5: Embedded Connect-JavaScript-Bibliothek implementieren

Diese Bibliothek enthält die verschiedenen Methoden, die zum Initiieren der eingebetteten Verbindung verwendet werden, und stellt Ihnen die Callbacks bereit, die Sie benötigen, um die Publisher-ID des Nutzers abzurufen und zu entfernen. 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 benutzerdefinierte UX:

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

Achten Sie darauf, eine Implementierung für den übergebenen JavaScript-Funktionsnamen anzugeben in den load-Parameter ein. Die Funktion wird aufgerufen, wenn der Die adsenseEmbeddedConnect API ist einsatzbereit.

Script-Tag-Attribute

Beachten Sie, dass im obigen Beispiel mehrere Attribute für das Skript-Tag festgelegt sind. Im Folgenden werden die einzelnen Attribute erläutert.

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

src-Parameter

Das Attribut src enthält mehrere Abfrageparameter, die zum Initiieren von Embedded Connect erforderlich sind. Wie die einzelnen Parameter verwendet werden, erfahren Sie weiter unten.

load ist der Name einer globalen JavaScript-Funktion, die aufgerufen wird, nachdem 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 gesamte Lokalisierung verwendet werden soll, einschließlich (z. B.) des Textes im Anmelde-Pop-up. Es ist ein optionaler Suchparameter. Wenn er nicht vorhanden ist oder die Sprache nicht von AdSense unterstützt wird, wird das Widget standardmäßig auf Englisch (USA) angezeigt. Weitere Informationen zu den von AdSense unterstützten Sprachen Der Parameterwert hl muss BCP 47 entsprechen. Für Nutzer in britischem Englisch lautet der String beispielsweise en-GB.
headless=true gibt an, dass „Embedded Connect“ mit der Option „Custom UX“ (Benutzerdefinierte UX) und nicht mit der von Google verwalteten UX verwendet wird.

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

Schritt 6: Embedded Connect-Code implementieren

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

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. Dadurch wird der Anmeldevorgang ausgelöst und dem Nutzer relevante Informationen zum Status seines Kontos und seiner Website angezeigt.

Standardstatus „Eingebettete Verbindung“

Der Embedded Connect-Code besteht aus zwei Komponenten. Das erste ist ein leeres <div>, das angibt, wo Embedded 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 Embedded Connect-Widget gerendert wird

Platziere diesen HTML-Code auf der Seite, auf der das Embedded Connect-Widget dargestellt werden soll:

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

Der Embedded Connect-Code

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

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 Embedded Connect-Widget hat vier Hauptzustände:

Mit AdSense verknüpfen (Standardeinstellung)
Mit AdSense verknüpfen
Website-Informationen werden geprüft
Es wurden Probleme festgestellt.

1. Mit AdSense verknüpfen (Standardeinstellung)

Dies ist der Standardstatus, der Nutzern angezeigt wird, wenn das Feld publisherId im Embedded Connect-Code nicht vorhanden ist. Damit wird der Verbindungsablauf (Pop-up) initiiert und nach erfolgreichem Abschluss des Vorgangs durch den Nutzer der onConnect-Callback ausgelöst.

Standardstatus „Eingebettete Verbindung“

2. Mit AdSense verknüpfen

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

Embedded Connect – Verknüpfung zu AdSense herstellen

3. Website-Informationen werden geprüft

Sobald eine neue Website bei AdSense eingereicht wurde, findet eine Überprüfung statt. Während dieser Zeit können keine Anzeigen ausgeliefert werden.

Embedded Connect – Websiteinformationen prüfen

Ein wichtiger Bestandteil der Überprüfung ist die Überprüfung der Inhaberschaft, die auf verschiedene Arten durchgeführt 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 das Meta-Tag "google-adsense-child-account" vorhanden ist. Die besten Ergebnisse erzielen Sie, wenn es auf der Startseite der Website des Nutzers angezeigt wird.

Die beste Vorgehensweise hängt von der URL-Struktur und einigen anderen Faktoren ab. Wenden Sie sich an Ihren Account Manager, um den besten Ansatz für Ihre Plattform zu ermitteln.

4. Es wurden Probleme festgestellt.

Wenn es Probleme mit dem Konto oder der Website des Nutzers gibt, die behoben werden müssen, wird Nutzern dieser Status angezeigt.

Embedded Connect – Probleme erkannt

Individuelle Nutzererfahrung

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

„Embedded Connect“-JavaScript-Bibliothek

Wenn Sie die Option „Benutzerdefiniert“ 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 vom JavaScript-Funktion, die an den Parameter load übergeben wird), müssen Sie eine Implementierung , wie du dein Konto mit AdSense verknüpfen bzw. die Verknüpfung aufheben kannst. Durch die Angabe von zwei Schaltflächen:

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

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

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.
}