【はてなブログ】ブログ記事にAMP用の広告コードを埋め込むブックマークレットを作りました

↓こちらの記事で書きましたが、AMP用にGoogleの広告を表示する時は、注意が必要です。

今のところ、はてなブログでは、各記事ごとに広告を埋め込まないといけないようです。

少しでも面倒くささを解消するために、管理画面から、記事の最初と最後へ簡単に広告コードを入れられるブックマークレットを作りました。

javascript:(function(){var val1 = document.getElementsByClassName("editor-body-textarea")[0].innerHTML;var val = "";val += '\r\n

';val += '\r\n<amp-ad type="adsense" width="300" height="250" data-ad-client="ca-pub-【XXXXXXXXXXXXXXXX】" data-ad-slot="【XXXXXXXXXX】"></amp-ad>';val += '\r\n

';val += '\r\n';val += '\r\n' + val1;val += '\r\n'; val += '\r\n

';val += '\r\n<amp-ad type="adsense" width="300" height="250" data-ad-client="ca-pub-【XXXXXXXXXXXXXXXX】" data-ad-slot="【XXXXXXXXXX】"></amp-ad>';val += '\r\n

';document.getElementsByClassName("editor-body-textarea")[0].innerHTML = val;})();

【XXXXXXXXXX】のところには、Google Adsense のコードを入れます。

もし、これを使用される場合は、タグやサイズを修正して使ってください。

これと併用して、はてなブログを表示しているページから管理画面へ切り替えるには、

↓こちらのブックマークレットを使うと便利です。

www.nanigoto.net

この記事でも、AMP用に広告を出してみました。

どのように広告が表示されるかは、このページのURLの最後に、「?amp=1」を付けると、この記事の上と下に広告の表示が確認できます。

https://www.nanigoto.net/entry/2018/11/23/133424?amp=1

さらに、Google Search Console を見ると、AMPのページもカウントされていました。