Looker'ı Embed SDK ile yerleştirme

1. Başlamadan önce

Bu codelab'de, web sayfanıza Looker kontrol paneli yerleştirmek için Looker Embed SDK'sını kullanacağız. Otomatik olarak iframe oluşturmak, Looker içeriğinizi içine yerleştirmek ve iFrame'iniz ile web sayfanız arasında iletişim kurmak için bir dizi SDK yöntemini çağırırsınız.

Ön koşullar

  • Çalışan bir Looker örneğiniz olmalıdır
  • Web uygulamanıza veya web sayfanıza yerleştirmek istediğiniz bir Looker kontrol paneline sahip olma
  • JavaScript ve JavaScript'in vaatleri hakkında bilgi sahibi olun.

Neler öğreneceksiniz?

  • Embed SDK'sı ile Looker içeriklerinizi gizli olarak yerleştirme
  • Embed SDK'yı kullanarak, yerleştirilmiş Looker içeriklerinizle mesaj (işlem ve etkinlik) gönderip alma

Gerekenler

  • Ön uç kodunuzun HTML ve JavaScript'ine erişim
  • Looker örneğinizdeki yönetici yerleştirme ayarlarına erişim

2. Hazırlıklar

Embed SDK ile yerleştirme yapabilmek için HTML ve Looker örneğinizi hazırlamanız gerekir.

Yerleştirilmiş iframe'in kapsayıcı öğesini ekle

Web sayfanızın HTML'sinde bir div öğesi oluşturun ve bu öğede id özelliği tanımlayın.

<div id="looker-embed" />

Looker örneğinde yerleştirmenin alanını izin verilenler listesine ekleme

Looker örneğinizde yerleşik öğenin alanını izin verilenler listesine eklemeniz gerekir.

Yerleşik Looker içeriğinizi barındıran web sayfasının alan adını belirleyin. Web sayfasının URL'si https://mywebsite.com/with/embed ve web sayfasının alan adının https://mywebsite.com olduğunu varsayalım.

Looker örneğinizin Yönetici bölümünden Yerleştirme sayfasına gidin. https://your_instance.looker.com/admin/embed

Yerleşik Alan İzin Verilenler Listesi alanına, yerleştirmenin alan adını girin. Yazdıktan sonra Sekme tuşuna basarak alanın bir kutu içinde görünmesini sağlayın. Sona eğik çizgi (/) eklemeyin.

Güncelle düğmesini seçin.

3. Yerleştirmeyi oluşturma

Şimdi "derleme" için SDK'nın yerleştirme oluşturucusunu oluşturup yapılandıralım Google Analytics 4'te tarama yapın.

SDK'yı başlatma

SDK'yı ilk olarak içe aktarın ve ardından Looker örneğinizin alanıyla başlatın.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

Yerleştirme oluşturucuyu oluşturma

Ardından, yerleştirmek istediğiniz Looker kontrol panelinin kimliğini belirleyin. Kontrol panelinizin kimliği instance_name.looker.com/dashboard/12345 ise kontrol panelinizin kimliği 12345 şeklindedir.

Yerleştirme oluşturucu oluşturmak için kontrol paneli kimliğiyle birlikte SDK createDashboardWithId() yöntemini çağırın. Bu yöntem, yerleştirme oluşturucuyu döndürür.

LookerEmbedSDK.createDashboardWithId(12345)

Yerleştirme oluşturucuyu yapılandırma ve oluşturma

Şimdi, yerleştirilmiş iframe'i oluşturmasını söylemeden önce yerleştirme oluşturucuyu yapılandıralım. Aşağıdaki kod örneğini, önceki kod örneğinin createDashboardWithId() yöntem çağrısının hemen sonrasına ekleyin.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Yerleştirme oluşturucunun her yöntemi, yerleştirme oluşturucunun kendisini döndürür, bu nedenle yöntem çağrılarını zincir halinde kullanırız. Her yöntemi inceleyelim:

  1. appendTo() yöntemi, iframe'in üst öğesini belirler. Önceden hazırlama adımında tanımladığımız HTML öğesinin kimliğini iletiriz.
  2. withFrameBorder() yöntemi, iframe'deki çerçeve-sınır özelliğini ayarlar. Bu, iframe'de HTML özelliklerini tanımlayan çeşitli yöntemlerden biridir.
  3. build() yöntemi, iframe'i yapılandırılmış HTML özellikleriyle oluşturur

Son kontrol

Önceki adımlarda kodunuz aşağıdaki gibi görünmelidir:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Artık Embed SDK ile Looker kontrol paneliniz web sayfanıza yerleştirilmiş.

4. Yerleşik mesajlar gönderin ve alın

Şimdi Embed SDK'yı kullanarak yerleştirilmiş Looker içeriklerinizle nasıl mesaj gönderip alabileceğinizi inceleyelim. Uygulamanızın iframe'e gönderdiği mesajları eylemler olarak, uygulamanızın iframe'den aldığı mesajları ise etkinlikler olarak çağırırız.

Etkinlik alma

Önceki kodumuzla başlayalım. Etkinlikleri dinlemek için build() yöntemini çağırmadan önce yerleştirme oluşturucunun on() yöntemini çağırırız.

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

Burada, iframe oluşturulduğunda iframe'den gelen dashboard:run:complete etkinliğinde bir etkinlik işleyici ayarlamak için on() yöntemini çağırıyoruz. Kontrol panelinin yüklenmesi tamamlandığında etkinlik bize haber verir. Dinleyebileceğiniz diğer etkinlikler için etkinlik referansına göz atın.

Gönderme işlemleri

Önceki kodumuzla devam edelim. iframe'e işlem göndermek için iframe ile mesaj gönderme ve alma yöntemini başlatmak için build() yöntemini çağırdıktan sonra yerleştirme oluşturucunun connect() yöntemini çağırırız.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

Şu kod örneğine göz atalım:

  1. Bir söz döndüren connect() yöntemini diyoruz. İleti gönderme ve alma mekanizması başlatıldıktan sonra, yerleştirilmiş iframe'i temsil eden yerleşik nesneye çözümlenir.
  2. dashboard:run işlemi göndermek için yerleştirme nesnesinde send() yöntemini çağırırız. Gönderilecek diğer işlemler için işlem referansına göz atın.
  3. Başlatma sırasında hata olması ihtimaline karşı bir catch() yöntemi eklenir.

Son kontrol

Önceki adımlarla birlikte, kodunuz artık aşağıdaki gibi görünmelidir:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

Artık yerleşik Looker kontrol panelinizle iletişim kurabilirsiniz.

5. Ek bilgiler

Tebrikler! Artık Looker kontrol panelinizi gizli olarak yerleştirmek ve iframe'den mesaj gönderip almak için Yerleştirme SDK'sını kullanabilirsiniz. Daha fazla bilgi için şu kaynakları inceleyin: