AdSense for Platforms | Google for Developers

Halaman ini diterjemahkan oleh Cloud Translation API.

Sambungan Tersemat

Connect Tersemat mengurangi hambatan dan meningkatkan funnel konversi saat pengguna mencoba menghubungkan AdSense dengan platform Anda.

Connect Tersemat adalah library JavaScript kecil yang menentukan titik awal terbaik bagi pengguna tertentu dan memandunya melalui alur pendaftaran AdSense yang disesuaikan, yang membantunya melalui semua langkah yang diperlukan agar dapat menayangkan iklan. Kebijakan ini menangani berbagai skenario, termasuk menentukan apakah pengguna memiliki akun AdSense, apakah mereka telah menandatangani persyaratan dan ketentuan AdSense, apakah mereka telah menambahkan situs platform Anda ke akun AdSense mereka, serta apakah status situs "Siap".

Koneksi Tersemat dengan opsi UX yang dikelola Google juga dapat menangani UX yang digunakan dalam menampilkan status akun dan situs kepada pengguna, yang memandu mereka ke tempat yang benar di AdSense untuk menyelesaikan setiap potensi masalah.

Untuk membantu pengalaman developer, library juga mengirimkan callback ke platform Anda yang berisi ID penayang AdSense pengguna yang diperlukan untuk menyiapkan penayangan iklan dengan benar.

Embedded Connect menawarkan dua opsi pengalaman pengguna:

UX yang dikelola Google. Gunakan widget Connect Tersemat, yang mengelola semua UX. Widget akan membantu pengguna melalui alur pendaftaran dan menampilkan informasi tentang akun dan status situs mereka di dalam widget. Opsi ini melakukan callback dengan ID penayang AdSense yang dipicu saat pengguna pertama kali menghubungkan akun AdSense.
UX Kustom. Gunakan metode adsenseEmbeddedConnect.connect(...) Embedded Connect, yang memicu alur pendaftaran di jendela baru. Opsi ini memberikan callback dengan ID penayang AdSense dan token akses yang dapat digunakan untuk mengambil informasi tambahan dari akun AdSense menggunakan AdSense Management API. Opsi ini mengharuskan Anda untuk mendesain UX sendiri.

Menerapkan Koneksi Tersemat

Untuk menggunakan Koneksi Tersemat, Anda harus mengikuti langkah-langkah berikut:

Membuat project di Google Cloud (atau menggunakan project yang sudah ada)
Membuat client ID OAuth
Konfigurasi client ID OAuth untuk digunakan dengan Embedded Connect
(Opsional) Menyesuaikan layar izin OAuth
Tambahkan library JavaScript Connect Tersemat ke halaman
Mengimplementasikan kode Koneksi Tersemat

Langkah 1: Buat project Google Cloud baru (atau gunakan yang sudah ada)

Jika Anda sudah memiliki project Google Cloud, jangan ragu untuk menggunakannya. Jika tidak, ikuti panduan di bawah ini tentang cara menyiapkan project baru:

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

Langkah 2: Buat client ID OAuth

Project Google Cloud akan memiliki client ID OAuth default yang dapat Anda gunakan. Anda dapat menemukannya dengan membuka API & Layanan > Kredensial.

Jika Anda ingin membuat client ID OAuth khusus, ikuti langkah-langkah berikut:

Buka API & Layanan > Kredensial
Klik "+ Create Credentials" di bagian atas halaman, lalu pilih client ID OAuth
Jenis aplikasi Anda adalah "Aplikasi web"
Beri nama client ID Anda, lalu klik "Buat"

Langkah 3: Konfigurasi client ID OAuth untuk digunakan dengan Embedded Connect

Setelah memutuskan client ID OAuth mana yang ingin digunakan untuk integrasi Embedded Connect, Anda harus mengonfigurasinya.

Ikuti langkah-langkah berikut:

Dari halaman Kredensial, klik ikon pensil untuk client ID yang ingin dikonfigurasi
Di bagian Asal JavaScript yang sah, tambahkan URI yang diizinkan untuk mengeluarkan permintaan menggunakan client ID Anda. Biasanya, URI untuk server pengembangan dan lingkungan lokal Anda akan ditambahkan (misalnya, https://dev.example.com dan http://localhost:5000). Anda juga harus menambahkan URI untuk lingkungan produksi (misalnya, https://example.com)

(Opsional) Langkah 4: Sesuaikan layar izin OAuth Anda

Layar izin OAuth adalah tempat penggunaan akan memberi client ID Anda akses ke data AdSense mereka. Ini adalah bagian penting dari cara kerja Embedded Connect. Anda dapat menyesuaikan layar ini untuk menyertakan nama platform, logo, dll. Buka halaman Layar izin OAuth untuk mengonfigurasi penyesuaian. Klik "Edit aplikasi" di bagian atas halaman dan ikuti panduannya.

Langkah 5: Terapkan library JavaScript Connect Tersemat

Library ini berisi berbagai metode yang digunakan untuk memulai penautan Tersemat dan menyediakan callback yang diperlukan agar Anda dapat mengambil dan melupakan ID penayang pengguna. Terapkan ini di bagian atas halaman.

Untuk UX yang dikelola Google:

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

Untuk UX Kustom:

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

Pastikan Anda menyediakan penerapan untuk nama fungsi JavaScript yang diteruskan ke dalam parameter load. Fungsi ini akan dipanggil jika adsenseEmbeddedConnect API siap digunakan.

Atribut Tag Skrip

Perhatikan pada contoh di atas bahwa beberapa atribut ditetapkan pada tag skrip. Berikut adalah penjelasan dari setiap atribut.

src: URL tempat Embedded Connect API dimuat. URL dapat berisi beberapa parameter kueri, yang didokumentasikan di bawah.
async: Meminta browser untuk mendownload dan mengeksekusi skrip secara asinkron. Ketika dieksekusi, skrip akan memanggil fungsi yang ditentukan menggunakan parameter load.
defer: jika ditetapkan, browser akan mendownload JavaScript Connect Tersemat secara paralel untuk mengurai halaman, dan akan menjalankannya setelah halaman selesai diurai.

Parameter src

Atribut src berisi beberapa parameter kueri yang diperlukan untuk memulai Koneksi Tersemat. Lihat di bawah penggunaan setiap parameter.

load adalah nama fungsi JavaScript global yang akan dipanggil saat API telah dimuat sepenuhnya. Anda dapat memilih nama apa pun untuk fungsi ini.
hl menentukan bahasa yang akan digunakan untuk semua pelokalan, termasuk (misalnya) teks pada pop-up pendaftaran. Parameter ini merupakan parameter kueri opsional, dan jika tidak ada, atau jika bahasanya tidak didukung oleh AdSense, widget akan menggunakan setelan default ke bahasa Inggris AS. Lihat bahasa yang didukung AdSense. Nilai parameter hl harus mengikuti BCP 47, misalnya untuk pengguna bahasa Inggris Britania, stringnya adalah en-GB.
headless=true menunjukkan bahwa Connect Tersemat akan digunakan dengan opsi UX Kustom, bukan UX yang dikelola Google.

Setelah Anda memilih antara UX yang dikelola Google dan UX Kustom, lanjutkan untuk melihat contoh kode untuk setiap pendekatan di bawah ini.

Langkah 6: Menerapkan kode Koneksi Tersemat

Seperti yang disebutkan di atas, ada dua opsi pengalaman pengguna:

Pilih opsi penerapan yang paling sesuai dengan kebutuhan platform Anda.

UX yang dikelola Google

Ikuti langkah-langkah berikut agar Google merender widget yang memicu alur pendaftaran dan menampilkan informasi yang relevan kepada pengguna tentang status akun dan situsnya.

Status default Koneksi Tersemat

Ada dua komponen kode Embedded Connect. Yang pertama adalah <div> kosong yang menentukan tempat Embedded Connect harus merender widget pendaftaran. Dan yang kedua adalah kode tempat konfigurasi ditetapkan dan callback dikelola.

Elemen HTML tempat widget Connect Tersemat dirender

Tempatkan HTML ini di halaman tempat Anda ingin widget Connect Tersemat dirender:

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

Kode Koneksi Tersemat

Selanjutnya, di bawah library Embedded Connect tetapi di atas elemen div, tempatkan kode konfigurasi:

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

Screenshot

Widget Connect Tersemat memiliki empat status utama:

(Default) Terhubung ke AdSense
Menghubungkan ke AdSense
Meninjau info situs
Masalah terdeteksi

1. (Default) Terhubung ke AdSense

Ini adalah status default, yang ditampilkan kepada pengguna saat kolom publisherId dalam kode Koneksi Tersemat tidak ada. Metode ini akan memulai alur koneksi (popup) dan setelah alur koneksi berhasil diselesaikan oleh pengguna, akan memicu callback onConnect.

Status default Koneksi Tersemat

2. Menghubungkan ke AdSense

Status ini ditampilkan kepada pengguna saat mereka memulai alur koneksi (dan pop-up akan muncul). Setelah penutupan pop-up, atau penyelesaian flow, status ini diubah menjadi salah satu status lain.

Sambungan Tersemat - Menghubungkan ke AdSense

3. Meninjau info situs

Setelah situs baru dikirim ke AdSense, proses peninjauan akan berlangsung. Iklan tidak dapat ditayangkan selama waktu ini.

Koneksi Tersemat - Meninjau info situs

Komponen penting dari ulasan adalah pemeriksaan kepemilikan yang dapat diteruskan dengan beberapa cara, termasuk:

ID penayang akun turunan ada di file ads.txt
ID penayang akun turunan ada dalam tag iklan di situs pengguna
ada tag meta google-adsense-child-account di situs pengguna. Untuk hasil terbaik, pastikan ekstensi ada di halaman beranda situs pengguna.

Pendekatan terbaik akan bergantung pada struktur URL Anda dan beberapa faktor lainnya. Hubungi Account Manager Anda untuk mendapatkan pendekatan terbaik bagi platform Anda.

4. Masalah terdeteksi

Jika akun atau situs pengguna mengalami masalah yang perlu diselesaikan, status ini akan ditampilkan kepada pengguna.

Koneksi Tersemat - Masalah terdeteksi

UX kustom

Ikuti langkah-langkah berikut jika Anda ingin mengelola UX sendiri, dan gunakan panggilan API untuk memicu metode pendaftaran secara manual.

Library JavaScript koneksi tersemat

Untuk menggunakan opsi UX Kustom, parameter headless=true harus ditetapkan dalam atribut src. Contoh:

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

Menyediakan tombol hubungkan dan putuskan koneksi

Setelah adsenseEmbeddedConnect API siap digunakan (seperti yang diverifikasi oleh fungsi JavaScript yang diteruskan ke parameter load), berikan penerapan untuk menghubungkan dan memutuskan hubungan dari AdSense. Misalnya, dengan menyediakan dua tombol:

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

Anda dapat memilih tombol mana yang akan ditampilkan, tergantung apakah Anda memiliki ID penayang yang disimpan dari pengguna atau tidak.

Kode penghubung

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

Kode pemutusan koneksi

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