Dre Jackson
Dre Jackson

Reputation: 771

How to load Google Adsense after page is loaded? | Angular 6

Okay, I built this website www.revlproject.org and I am trying to get approved for Google Adsense. The thing is, it keeps coming back with valuable inventory: no content. I figured out why. It's because since my website is built with Angular, Google Adsense is being ran before the page loads so the crawlers never see anything. I've read almost just about every post about this on SO and they are either super old or using AngularJS. If someone can help me figure out how to load content after the page has already loaded please feel free to chime in. I've been working on this tirelessly and need to find a solution.

My code isn't much, but i'll show what I tried. First, I tried the window.onload approach.

    <head>
        <script
          async
          src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>
        <script>
window.onload = function(){

  (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "xxxxxx",
            enable_page_level_ads: true
          });
}
        </script>
    </head>

This is all that i've tried. I read an article about using a directive but am unsure of how to do so. I just know there as to be a work around to all of this. I've done something like this before but can't remember how to do it.

Upvotes: 3

Views: 1545

Answers (1)

Daniel
Daniel

Reputation: 11182

You can inject the script directly from your typescript ngOnInit hook.

If you need to set your configuration on load you can add an onload property to the element:

const script = (document as any).createElement('script');
script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';

script.onload = () => {
  setTimeout(() => {
    ((window as any).adsbygoogle || []).push({
      google_ad_client: "xxxxxx",
      enable_page_level_ads: true
    });
  }, 100);
}

document.body.appendChild(script);

Upvotes: 1

Related Questions