Merhaba,


Angular ile yaptığınız bir siteye Google Adsense kodlarını direkt eklediğinizde malesef çalışmıyor. Bu reklamları sitemize ekleyebilmek için küçük bir işlem yapmamız gerekiyor şimdi bakalım neymiş o işlem;


İlk olarak bir component oluşturuyoruz;

ng g c components/google-adsense


google-adsense.component.html;

<div>
  <ins class="adsbygoogle"
       style="display:block;"
       data-ad-client="ca-pub-xxxxxxxxx"
       [attr.data-ad-slot]="data"
       data-ad-format="auto"></ins>
</div>

data-ad-client değeri olan ca-pub-xxxxxx'i sizin yayıncı kimliğiniz ile değiştirmeyi unutmayın. Bu bilgiyi Google Adsense'e giriş yaptıktan sonra sol menüden Hesap/Hesap Bilgileri içerisinde bulabilirsiniz.



google-adsense.component.ts;

import {AfterViewInit, Component, Inject, Input, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';

@Component({
  selector: 'app-google-adsense',
  templateUrl: './google-adsense.component.html',
  styleUrls: ['./google-adsense.component.scss']
})
export class GoogleAdsenseComponent implements AfterViewInit {

  @Input() data;

  constructor(
    @Inject(PLATFORM_ID) private _platformId: Object
  ) { }

  ngAfterViewInit() {
    if (isPlatformBrowser(this._platformId)) {
      setTimeout(() => {
        try {
          (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
        } catch (e) {
          console.error(e);
        }
      }, 300);
    }
  }

}

Burada isPlatformBrowser kullanmamızın sebebi, Angular ile yaptığınız siteyi server tarafında işliyor olabilirsiniz (Angular Universal). Bu yüzden isPlatformBrowser kullanıyoruz ki bu reklam sadece tarayıcıda çalışsın. Yoksa server tarafında hataya sebep olacaktır. Siz belki Angular Universal kullanmıyorsunuzdur o zaman bunu kaldırabilirsiniz ama durmasının hiçbir zararı yok.


Reklamı kullanmak için ise;

<app-google-adsense [data]="1111111111"></app-google-adsense>

data içerisine adsense panelinden oluşturduğunuz reklam kodundaki data-ad-slot içerisindeki değeri yazın.


Evet tüm yapacaklarımız bu kadar. Reklamlarınız localhost üzerindeyken görünmeyebilir ve konsolda hata alabilirsiniz. Ancak projeyi yayınladığınızda eğer yayınladığınız site adresi Google Adsense panelinizde Siteler içerisinde tanımlıysa ve onaylıysa görünecektir.


Ayrıca bu işlemleri en kısa sürede npm paketi olarak yayınlayacağım. Onu kullanarak çok daha basit bir şekilde kullanabiliyor olacaksınız.


Umarım işinize yarar.