AMPページでアフィリエイト広告を使う方法

ASPがAMP専用コードを発行している場合

「amp-ad」コンポーネントをロードする

AMPページではJavascriptの実行に制限がかかっているため、アフィリエイト広告のうち、imgタグを使うコードとJavascriptを使うコードが使えません。

ASPがAMP専用コードを発行している場合は、「amp-ad」タグで囲まれたコードを発行しているはずなので、AMPページで使うために「amp-ad」というコンポーネントをページでロードします。

amp-ad | AMP

使い方は簡単で、HTMLヘッダに下記のように記述するだけです。

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

これで、ASPが発行しているAMP用広告コードが使えるようになります。

なお、Google Adsenseを併用している場合は、Google Adsenseでもamp-adコンポーネントを使って広告ユニットを表示させるので、一度ロードさせればOKです。

AMPページでGoogle Adsenseの広告ユニット・自動広告を使う方法

ASPがAMP専用コードに対応していない場合

ASPによってはAMP専用コードに対応していない（管理画面でAMP用広告コードが発行できない）場合は、広告の種類によって対応をすることで、AMPページでアフィリエイト広告を使うことが出来ます。

なお、ご紹介する方法は、ASPが提供する広告タグをトラッキングに問題がない範囲で改変します。コードの改変はASPは基本的に非推奨ですので、その点を留意した上で、あくまで自己責任で行うようにしてください。

imgタグを使ったバナー広告の場合

バナー広告や商品リンクなどの、imgタグを使った広告コードの場合、imgタグをamp-imgタグに書き換えればそのままバナー広告が使えます。バナー画像の部分だけでなく、トラッキング用のいわゆる「透明Gif」もamp-imgに置き換えましょう。

また、amp-imgではborder属性が使えなかったり、width、height、layout属性が必須だったりと制限があるので、amp-imgのドキュメントは読んでおきましょう。

amp-img | AMP

なお、amp-imgはAMPフレームワークのベーシックコンポーネントなので、HTMLヘッダに追加でscriptファイルを読み込む必要はありません。

テキスト広告の場合

テキストの場合は、トラッキング用のいわゆる「透明Gif」をamp-imgに置き換えればそのまま使えることがほとんどです。

URL広告の場合

URL広告の場合はただのURLですので、AMPページでも制限はありません。そのままaタグのhref属性に入れれば、アフィリエイトリンクとして機能します。

Javascriptタイプの場合

一部のASPでは、バナー広告の表示にJavascriptを使っていることがあります。AMPページではカスタムJavascriptを実行できないので、Javascriptを使っているアフィリエイト広告は利用できません。

バナー広告かamp-ad広告が出るまでは別の広告で代用するようにしましょう。

---

AMPページでアフィリエイト広告を使う方法をみてきました。

amp-adに対応しているASPの場合は、基本的にはバナー広告でもリンク広告でもAMPに対応したタグがあるので便利です。AMPに対応していなくても、今回ご紹介した方法で対応することも可能です。

AMPページを用意している方は、ぜひ使ってみてください。