Material Design LiteでAdsenseを2回ロードさせない方法

Material Design LiteでAdsenseのコードを貼り付けると、2回ロードされてしまうことがあります。

github.com

mdl-componentupgradedイベントで処理する方法が示されていて、日本語の解説記事もありました。

b.0218.jp

ただ、私がこの方法でやってみて、最初はうまくいきませんでした。Javascriptのコードは記事に示されていた通り、以下のように記述していました。

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);
  }\
});

原因は私のAdsenseを呼び出すHTMLが間違っていました。私の場合、以下のように記述していました。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

さきほどのJavascriptはAdsenseのJavascriptをmdl-componentupgradedイベントで読み込むようにしていたので、それ以外の場所でAdsenseのJavascriptを読み込むようにしてはいけないことに気づきました。さきほどのHTMLの最初の行を削除して、以下のようにして正常に動作させることができました。

<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>