Google AdsenseがMaterial Design Lite(MDL)で再読み込みされる問題

現象

Material Design Lite(以下、MDL)で構築したサイト(mdl-js-layout使用)にGoogle Adsenseを埋め込む。埋め込んだページを表示すると、広告が一度表示された後に再読み込みが発生してしまう。

調査

mdl-componentupgradedイベントを使う

MDLの issue に報告があった「Google adsense is loaded twice because of "mdl-js-layout" · Issue #1926 · google/material-design-lite:」

mdl-componentupgradedイベントを拾って、そこでスクリプトを読みこめば良さそう。

Adsense の広告コードはこんな感じ。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="xxxxx"></ins>

<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.jsをmdl-componentupgradedのタイミングで読み込むようにしてみる。

動的に読み込む

Adsenseのスクリプトをmdl-componentupgradedのタイミングで動的に読み込む。

document.addEventListener('mdl-componentupgraded', function() {
    if (!document.getElementById('adsbygooglejs')) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.id = 'adsbygooglejs';
        script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        head.appendChild(script);
        // 以下略
    }
});

mdl-componentupgradedが何度か呼ばれることを考慮して、既にスクリプトが埋め込まれている場合はスルーする。

これで問題の事象は解消した。