AMPエラー「カスタム JavaScript は使用できません。」、原因のAdsenseコードを修正する

2019-05-162022-06-05Google

ある日、Google検索結果で自サイトの表示に
「このページにはAMP実装エラーがあります」
との表示を発見。

なに！？

GoogleサーチコンソールでAMPのエラーを確認してみます。

AMPを見てみると

「カスタム JavaScript は使用できません。」

とのメッセージ。
AMPバージョンのURLをクリックするとエラー部分がハイライトされて表示されます。

どうやら原因は先日設置したGoogle Adsenseの関連コンテンツのコードのようでした。

AMPページでは使用できるタグやコードに制限がありJavascriptも利用不可のため、Adsenseのコードも修正が必要だったのです。

single.phpに設置しているAdsense関連コンテンツのコードをAMPページとそれ以外のページで条件分岐して表示するように修正しました。

現在利用中のWordPressのテーマは「Luxeritas 」です。表示が早く、とても気に入って利用させていただいています。

Luxeritas（ルクセリタス）

名前を覚えるのにちょっと時間がかかります。。。。

LuxeritasではAMP対応されていて、ボタン一つでON/OFFを切り替えることができます。プラグインを導入しなくてもAMP対応できるので嬉しいことです。

AMP 対応（プラグインでは実現できない多機能 AMP）
https://thk.kanzae.net/wp/point/t2789/

LuxeritasでAMPページとPC用にAdsenseのコードを切り替えるようにしました。

※AdsenseのコードをAMP用に修正することはポリシー違反ではないとのとことです。

AMP用ページにGoogleアドセンスを問題なく設置する方法

Adsenseヘルプ：レスポンシブ AMP 広告コードを修正する方法

LuxeritasでAMPかどうか条件分岐

LuxeritasでAMPページかどうかを判断するには以下のコードを記述します

<?php if(isset($luxe['amp'])): ?>
AMPページで表示する内容をここに記述
<?php else: ?>
PCで表示する内容をここに記述
<?php endif; ?>

関連コンテンツのコードをAMP対応にする

関連コンテンツに限らずAdsenseの広告コードをAMP対応にする場合、現在のところ手動で修正する必要があるようです。

Adsenseで作成した広告コードから、

data-ad-client（サイト運営者ID）
data-ad-slot（広告ユニットID）

の二つを見つけます。

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

上記コードの5行目、6行目の
ca-pub-XXXXXXXXXXX
XXXXXXXXXX
（実際は数字）をコピーして以下のコードに貼り付けます。

<amp-ad
   layout="fixed-height"
   height=100
   type="adsense"
   data-ad-client="ca-pub-XXXXXXXXXXX"
   data-ad-slot="XXXXXXXXXXX">
</amp-ad>

AMPテストで確認

これでAMPページにも関連コンテンツを表示してエラーが出ないかを確認します。

AMPテスト

これでエラーが解消されました^^