Yerleşik Bağlantı

Embedded Connect kullanımı en aza indirir ve kullanıcılar AdSense'i platformunuza bağlamaya çalışırken dönüşüm hunisini iyileştirir.

Embedded Connect, belirli bir kullanıcı için en iyi başlangıç noktasını belirleyen ve kullanıcılara reklam yayınlayabilmek için gerekli tüm adımlar boyunca yardımcı olacak özelleştirilmiş AdSense kayıt işlemi sırasında yol gösteren küçük bir JavaScript kitaplığıdır. Kullanıcının bir AdSense hesabı olup olmadığını, AdSense şartları ve koşullarını imzalayıp imzalamadığını, platform sitenizi AdSense hesabına ekleyip eklemediğini ve sitenin durumunun "Hazır" olup olmadığını belirlemek de dahil olmak üzere çeşitli senaryoları ele alır.

Google tarafından yönetilen kullanıcı deneyimi seçeneğine sahip Embedded Connect, kullanıcıya hesap ve site durumlarını göstermeyle ilgili kullanıcı deneyimini de yönetebilir ve potansiyel sorunları çözmesi için kullanıcıyı AdSense'te doğru yere yönlendirebilir.

Kitaplık, geliştirici deneyimini kolaylaştırmak için platformunuza, kullanıcının AdSense yayıncı kimliğini içeren geri çağırmalar da sağlar. Bu kimlik, reklam sunumunu doğru bir şekilde ayarlamak için gereklidir.

Embedded Connect, kullanıcı deneyimi için iki seçenek sunar:

  • Google tarafından yönetilen kullanıcı deneyimi. Tüm kullanıcı deneyimini yöneten Embedded Connect widget'ını kullanın. Widget, kullanıcılara kaydolma sürecinde yardımcı olacak ve widget'ın içinde kullanıcılara hesaplarıyla ve site durumları hakkındaki bilgileri gösterecek. Bu seçenek, kullanıcı bir AdSense hesabını ilk kez bağladığında AdSense yayıncı kimliğinin tetiklendiği bir geri çağırma sağlar.
  • Özel kullanıcı deneyimi. Yeni bir pencerede kaydolma akışını tetikleyen Yerleşik Bağlantı adsenseEmbeddedConnect.connect(...) yöntemini kullanın. Bu seçenek, AdSense yayıncı kimliğini içeren bir geri çağırma ve AdSense Management API aracılığıyla AdSense hesabından ek bilgi almak için kullanılabilen bir erişim jetonu sağlar. Bu seçenek, kullanıcı deneyimini sizin tasarlamanızı gerektirir.

Embedded Connect'i uygulama

Embedded Connect'i kullanmak için aşağıdaki adımları uygulamanız gerekir:

  1. Google Cloud'da proje oluşturun (veya mevcut bir projeyi kullanın)
  2. OAuth istemci kimliği oluşturun
  3. OAuth istemci kimliğinizi Embedded Connect ile kullanılacak şekilde yapılandırın
  4. (İsteğe bağlı) OAuth izin ekranınızı özelleştirin
  5. Sayfaya Embedded Connect JavaScript kitaplığını ekleyin
  6. Yerleşik Bağlantı kodunu uygulama

1. Adım: Yeni bir Google Cloud projesi oluşturun (veya mevcut bir projeyi kullanın)

Mevcut bir Google Cloud projeniz varsa onu kullanabilirsiniz. Aksi takdirde, yeni proje oluşturmak için aşağıdaki kılavuzu izleyin:

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

2. Adım: OAuth istemci kimliği oluşturun

Google Cloud projelerinin kullanabileceğiniz varsayılan bir OAuth istemci kimliği vardır. Bu kimliği API'ler ve Hizmetler > Kimlik Bilgileri sayfasını ziyaret ederek bulabilirsiniz.

Özel bir OAuth istemci kimliği oluşturmak istiyorsanız aşağıdaki adımları uygulayın:

  • API'ler ve Hizmetler > Kimlik bilgileri'ne gidin
  • Sayfanın üst kısmındaki "+ Kimlik Bilgileri Oluştur" seçeneğini tıklayın, ardından OAuth istemci kimliğini seçin
  • Uygulama türünüz "Web uygulaması" olacaktır.
  • İstemci kimliğinize bir ad verin ve "Oluştur"u tıklayın

3. Adım: OAuth istemci kimliğinizi Embedded Connect ile kullanılacak şekilde yapılandırın

Embedded Connect entegrasyonu için hangi OAuth istemci kimliğini kullanacağınıza karar verdikten sonra bunu yapılandırmanız gerekir.

Şu adımları uygulayın:

  • Kimlik Bilgileri sayfasında, yapılandırmak istediğiniz istemci kimliği için kurşun kalem simgesini tıklayın.
  • Yetkilendirilmiş JavaScript kaynakları bölümünde, istemci kimliğinizi kullanarak istek göndermesine izin verilen URI'leri ekleyin. Normalde geliştirme sunucunuz ve yerel ortamınız için URI'lar eklenir (ör. https://dev.example.com ve http://localhost:5000). Ek olarak, üretim ortamınız için bir URI eklemeniz gerekir (ör. https://example.com)

OAuth izin ekranında, kullanıcılarınızın istemci kimliğinize kendi AdSense verilerine erişmesi sağlanır. Bu, Embedded Connect'in işleyişinin önemli bir parçasıdır. Bu ekranı platformunuzun adını, logonuzu vb. içerecek şekilde özelleştirebilirsiniz. Özelleştirmelerinizi yapılandırmak için OAuth izin ekranı sayfasını ziyaret edin. Sayfanın üst kısmındaki "Uygulamayı düzenle"yi tıklayın ve sihirbazı takip edin.

5. Adım: Embedded Connect JavaScript kitaplığını uygulayın

Bu kitaplık, Yerleştirilmiş bağlantıyı başlatmak için kullanılan çeşitli yöntemleri içerir ve kullanıcının yayıncı kimliğini almanız ve unutmanız için gereken geri çağırmaları sağlar. Bunu sayfanın başına uygulayın.

Google tarafından yönetilen kullanıcı deneyimi için:

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

Özel kullanıcı deneyimi için:

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

load parametresine geçirilen JavaScript işlev adınız için bir uygulama sağladığınızdan emin olun. İşlev, adsenseEmbeddedConnect API kullanıma hazır olduğunda çağrılır.

Komut Dosyası Etiketi Özellikleri

Yukarıdaki örnekte, komut dosyası etiketinde birkaç özelliğin ayarlandığına dikkat edin. Aşağıda her bir özelliğin açıklaması bulunmaktadır.

  • src: Embedded Connect API'nin yüklendiği URL. URL, aşağıda belgelenen çeşitli sorgu parametrelerini içerebilir.
  • async: Tarayıcıdan komut dosyasını eşzamansız olarak indirmesini ve çalıştırmasını ister. Komut dosyası yürütüldüğünde, load parametresi kullanılarak belirtilen işlevi çağırır.
  • defer: Ayarlandığında, tarayıcı, Embedded Connect JavaScript'i sayfayı ayrıştırmaya paralel olarak indirir ve sayfa ayrıştırmayı tamamladıktan sonra çalıştırır.

src parametre

src özelliği, Yerleşik Bağlantı'yı başlatmak için gereken çeşitli sorgu parametrelerini içerir. Her bir parametrenin kullanımını aşağıda görebilirsiniz.

  • load, API tamamen yüklendiğinde çağrılacak genel bir JavaScript işlevinin adıdır. Bu işlev için herhangi bir ad seçebilirsiniz.
  • hl, kayıt pop-up'ındaki metin de dahil olmak üzere tüm yerelleştirmelerde kullanılacak dili belirtir. Bu, isteğe bağlı bir sorgu parametresidir ve mevcut olmadığında veya dil AdSense tarafından desteklenmiyorsa widget varsayılan olarak İngilizce (ABD) olur. AdSense'in desteklediği dillere bakın. hl parametre değeri BCP 47'ye uygun olmalıdır. Örneğin, İngiliz İngilizcesi kullanıcılar için dize en-GB olur.
  • headless=true, Embedded Connect'in Google tarafından yönetilen kullanıcı deneyimi yerine Özel Kullanıcı Deneyimi seçeneğiyle kullanılacağını belirtir.

Google tarafından yönetilen kullanıcı deneyimi ve Özel kullanıcı deneyimi arasında seçim yaptığınıza göre, her yaklaşım için aşağıdaki kod örneklerini inceleyin.

6. Adım: Yerleşik Bağlantı kodunu uygulayın

Yukarıda belirtildiği gibi, kullanıcı deneyimine ilişkin iki seçenek vardır:

Platformunuzun ihtiyaçlarına en uygun uygulama seçeneğini belirleyin.

Google tarafından yönetilen kullanıcı deneyimi

Google'ın, kaydolma akışını tetikleyen ve kullanıcıya hesabının ve sitesinin durumu hakkında alakalı bilgiler gösteren widget'ı oluşturmasını sağlamak için aşağıdaki adımları uygulayın.

Yerleşik Bağlantı varsayılan durumu

Yerleşik Bağlantı kodunun iki bileşeni vardır. İlki, Embedded Connect'in kayıt widget'ını nerede oluşturacağını belirten boş bir <div> öğesidir. İkincisi ise yapılandırmaların ayarlandığı ve geri çağırmaların yönetildiği koddur.

Yerleşik Bağlantı widget'ının oluşturulduğu HTML öğesi

Bu HTML'yi, Yerleşik Bağlantı widget'ının görüntülenmesini istediğiniz sayfaya yerleştirin:

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

Yerleşik Bağlantı kodu

Daha sonra, Embedded Connect kitaplığının altına, ancak div öğesinin üzerine yapılandırma kodunu yerleştirin:

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

Ekran görüntüleri

Yerleşik Bağlantı widget'ının dört temel durumu vardır:

  1. (Varsayılan) AdSense'e bağlanma
  2. AdSense'e bağlanma
  3. Site bilgileri inceleniyor
  4. Sorunlar algılandı
1. (Varsayılan) AdSense'e bağlanma

Bu, Yerleşik Bağlantı kodunda publisherId alanı mevcut olmadığında kullanıcılara gösterilen varsayılan durumdur. Bağlantı akışını (pop-up) başlatır ve akışın kullanıcı tarafından başarıyla tamamlanmasının ardından onConnect geri çağırma işlemini tetikler.

Yerleşik Bağlantı varsayılan durumu

2. AdSense'e bağlanma

Bu durum, bağlantı akışını başlattıkları sırada kullanıcılara gösterilir (ve pop-up görüntülenir). Pop-up'ın kapatılması veya akış tamamlandıktan sonra bu durum, diğer durumlardan biriyle değiştirilir.

Embedded Connect - AdSense&#39;e bağlanma

3. Site bilgileri inceleniyor

Yeni bir site AdSense'e gönderildikten sonra bir inceleme süreci gerçekleşir. Bu süre zarfında reklam yayınlanamaz.

Embedded Connect - Site bilgileri inceleniyor

Embedded Connect - Menü açıkken site bilgilerini inceleme

Sahiplik kontrolü, incelemenin kritik bir bileşenidir. Bu kontroller, aşağıda birkaç farklı şekilde aktarılabilir:

  • alt hesap yayıncı kimliği ads.txt dosyasında yer almalıdır.
  • alt hesap yayıncı kimliği kullanıcının sitesindeki bir reklam etiketinde olduğunda
  • Kullanıcının sitesinde google-adsense-child-account meta etiketi bulunur. En iyi sonuçları elde etmek için URL'nin kullanıcı sitesinin ana sayfasında bulunduğundan emin olun.

En iyi yaklaşım, URL yapınıza ve diğer bazı faktörlere göre değişir. Platformunuza en uygun yaklaşımı öğrenmek için lütfen hesap yöneticinize danışın.

4. Sorunlar algılandı

Kullanıcının hesabında veya sitesinde çözülmesi gereken sorunlar varsa, bu durum kullanıcılara gösterilir.

Yerleşik Bağlantı - Sorunlar algılandı

Yerleşik Bağlantı - Menü açıkken algılanan sorunlar

Özel kullanıcı deneyimi

Kullanıcı deneyimini kendiniz yönetmek istiyorsanız aşağıdaki adımları uygulayın ve kaydolma yöntemini manuel olarak tetiklemek için API çağrılarını kullanın.

Yerleşik bağlantı JavaScript kitaplığı

Özel kullanıcı deneyimi seçeneğini kullanmak için src özelliğinde headless=true parametresinin ayarlanması gerekir. Örneğin:

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

Bağlanma ve bağlantıyı kesme düğmeleri sağlama

adsenseEmbeddedConnect API kullanıma hazır olduğunda (load parametresine geçirilen JavaScript işlevi tarafından doğrulandığı üzere) AdSense'e bağlanmak ve AdSense bağlantısını kesmek için bir uygulama sağlayın. Örneğin, iki düğme sağlayarak:

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

Kullanıcınızın kaydettiği bir yayıncı kimliğinin olup olmadığına bağlı olarak, hangi düğmenin gösterileceğini seçebilirsiniz.

Bağlantı kodu

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

Bağlantıyı kesme kodu

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