ブログをShifterに移行した話 Googleタグマネージャー、AMP、アドセンス編 #JP_Getshifter

ShifterはWordPressを静的HTMLに変換するので動作しないプラグインがあります。
このブログのShifter移行に伴って、ブログの機能の棚卸も行いました。

今回はWebサイトに必須とも言えるGoogleタグマネージャー(アナリティクス)とGoogleアドセンス、AMPについて書きます。
なお内容についてはノーマルなWordPressでも適用できるものです。

ShifterのWordPress

ShifterのWordPressは都度起動とシャットダウンが行われるので、レンタルサーバーやVPSのようにSFTPやgitを使ったファイルのアップロードができません。
※全くできないわけではなくそういった用途のプラグインを利用すればできます。
https://www.digitalcube.jp/shifter/10479/

この辺りの「めんどくささ」を考えると自作プラグインやテーマのカスタマイズでPHPコードを書くよりはプラグインを使ってダッシュボードでの操作のみで完結したいので、プラグインを使って設定をしていきます。

Googleタグマネージャー(アナリティクス)

要件としては <head> タグ内部と <body> 開始タグ直後(もしくは</body> タグ直前にソースコードを入れられるプラグインであればOK。
後述しますがAMPに対応してAMP用のアドセンスも入れるのであればなお良し。

Insert Headers and Footers
https://ja.wordpress.org/plugins/insert-headers-and-footers/
<head> タグ内部と </body> タグ直前にソースコードを入れられるプラグイン。シンプル。

Scripts n Styles
https://ja.wordpress.org/plugins/scripts-n-styles/
Insert Headers and Footersより高機能。サイト共通のscript、CSSの設定と投稿ごとに入力もできる。

Head, Footer and Post Injections
https://ja.wordpress.org/plugins/header-footer/
さらに高機能。AMPプラグイン対応。<body> 開始タグ直後にも入れられる。

このブログでは Head, Footer and Post Injections を利用してタグマネージャーの設置をしました(タグマネージャーにGoogleアナリティクスのトラッキングも含まれる)

Head, Footer and Post Injections 設定

探せばタグマネージャーのコンテナIDを入れるだけのプラグインもありますが、多機能すぎたのでまずはこのプラグインのみで運用中です。

AMP

AMP
https://ja.wordpress.org/plugins/amp/
AMPプラグインも多種ありますが、対応するなら上記プラグインでOK。
プラグイン単体でAMP用アナリティクスにも対応してます。

AMP設定

現行バージョンでは

  • Standard:設定してるテーマをAMPに変換し、AMP優先で表示(URLがAMPと共用)
  • Transitional:設定してるテーマをAMPに変換し、AMPは末尾に ?amp が付与されたURLになる
  • Reader:AMPプラグインで用意してるテーマで表示。AMPは末尾に /amp/ が付与されたURLになる。

とAMPに変換する場合の設定を選べます。
ノーマルなWordPressの場合、プラグインやテーマがAMPプラグインに対応してる(*1)のであればどれでも動作しますが、Shifterの場合は Transitional に対応していないので注意しましょう。

*1 AMP-ready plugins and themes
https://amp-wp.org/ecosystem/

Googleアドセンス

以前は広告の設置箇所や個数など悩んだのですが、先にも書いた通りShifterの場合、カスタマイズしたテーマテンプレートのアップロードがしんどいので、この機会にアドセンスは全て自動広告にしました。
自動広告の場合

  • <head> タグ内部にコードを設置するだけ
  • AMP自動広告は上記にプラスしてコンテンツ本文にコード設置
  • 広告が表示される位置は閲覧者のデバイスやコンテンツのマークアップに合わせてよしなに表示。既存の広告ユニットがあれば広告ユニットが優先。
  • 広告の種別はアドセンス側で指定できる

というお手軽さなので個人ブログにはオススメです。

なおAMPプラグインを利用してる場合、コンテンツ内にAMP用の広告が入っているとプラグイン側で自動で <head> タグ内部に設置するコードを出力してくれますので、実質コンテンツ本文に入れるコードの設置のみでOKです。

このブログでは前述のHead, Footer and Post Injectionsでコードを設置しました。

まとめ

最低限2つのプラグインがあれば、タグマネージャー、AMP、アドセンスの3つに対応できます。
今回紹介したプラグインはShifterだけではなくノーマルなWordPressでももちろん利用できます。ブログを書くのを優先したい場合やテーマのカスタマイズに手間をかけたくない場合はオススメです。

なお、SEO関連については別記事の予定です。