現象
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 の広告コードはこんな感じ。
//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
が何度か呼ばれることを考慮して、既にスクリプトが埋め込まれている場合はスルーする。これで問題の事象は解消した。