AMPページ制作時に進行担当が気をつけるべき3つの事【広告配信編】
カテゴリ：Webマーケティング
こんにちは、広報担当です。
以前、AMPページ制作時に、制作者（デザイナー）ではない私のような進行担当者が気をつけるべき点についてお話をしましたが、その作業には実は続きがありました。
デザイン上でも、配信上でも、困るとお話しましたが、公開後のWebサイト運用や広告配信に伴うCV計測をする際にも、AMPのページには制約がありましたので追加編としてまとめておきます。
↓以前のブログはこちらから
AMPページ制作時に進行担当が気をつけるべき3つの事
①AMP用のGoogleタグマネージャーのコードを埋め込む必要がある
AMPページは、ページの表現に制約があるため、限られたコードしか使えないことを以前のブログではお伝えしましたが、
広告配信やWEBページの運用の際に、流入などを計測する際も同じく
制約がある関係で、AMPページ用のコンテナで管理されます。
そのため、計測のためにWebサイトに埋め込むタグ（コード スニペット）もAMP専用のものがあります。
発行してみるとわかるのですが、通常のGoogleタグマネージャーの2 つのコード スニペットとは、表記も、埋め込む位置も若干異なります。
▼通常の場合
|
1 |
下のコードをコピーして、ウェブサイトのすべてのページに貼り付けてください。 <br>このコードは、次のようにページの <head> 内のなるべく上のほうに貼り付けてください。<br> <!-- Google Tag Manager --> <br><script>(f・・・・・・・・・・・');</script> <br><!-- End Google Tag Manager --> <br><br><br>また、開始タグ <body> の直後にこのコードを次のように貼り付けてください。 <br><!-- Google Tag Manager (noscript) --><br> <noscript><iframe src="・・・・・・・・・・・・・・・・・・・" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <br><!-- End Google Tag Manager (noscript) --> |
▼AMPの場合
|
1 |
AMP ページの <head> タグの最後にこのコードを貼り付けてください。<br>ただし、貼り付けるのはすでに同じコードが存在していない場合に限り、1 回のみにしてください。<br> <!-- AMP Analytics --><br><script async custom-element=・・・・・・・"></script> <br><br><body> タグの先頭に貼り付けてください。 <br><!-- Google Tag Manager --> <amp-analytics config="https://www.googletagmanager.com/amp.json?id=・・・・・・・・・"></amp-analytics> |
詳しい作成、設定の方法は、Googleのタグマネージャ ヘルプからご覧ください。
AMP でタグ マネージャーをインストールするには
1.タグ マネージャーで AMP コンテナを作成します。
2.タグ マネージャーのスニペットを AMP ページに追加します。
3.タグ マネージャーのコンテナにタグを設定して公開します。
引用：Google「AMP とタグ マネージャーの設定ガイド」
②AMPページでのCV設定時、外部リンクには特別な表記（属性の設定）が必要
AMPページ内にある外部のリンクURLのCVを計測したい場合、
リンクURLに属性を持たせる必要があります。
そのため、GTM（AMP用）が埋め込まれているページに関しては、
外部URLへユーザー定義変数の属性をつける設定が必要になります。
▼ユーザー定義変数の設定 (AMP版) （一部抜粋）
引用：「GoogleタグマネージャでAMP版ページ内の外部リンクのクリック数を集計する方法」」
ユーザー定義変数としてリンク先URLが利用できるようにするために、
<a> タグに「data-vars-href」という属性を持たせ、
元来 <a> タグの「href」属性にのみ記述していたリンク先URLに加えて、
「data-vars-href」属性にもリンク先URLを記述しておきます。
この際、シェアボタンに関しては、あらかじめ、AMP専用のコード＜amp-social-share> があるので、この要素内で AMP 変数グローバル置換を使用することができます。
③AMPページでのFacebookシェアボタンはアプリIDの設定が必要
②の外部リンクの最後に、シェアボタンの件に触れましたが、
ここでも気をつけるべき点が一つあります。
それはFacebookのシェアボタンです。
Facebookのシェアボタンには、Facebook場でアプリを作成するためのID【fb:app_id】（FacebookアプリID）の設定が必要となります。
もし設定しない場合、シェアボタンでも、AMPテストでもエラーが出てしまいます。
通常のページでしたら、アプリIDを設定しない方法もありますが、
AMPでは「onclick」（小窓を開くために用いている記述）の 使用が禁止となるため、その使用を採用してしまうとAMPページとして認識がされませんので、
注意が必要です。
FacebookのアプリIDは、こちらの方法で発行できます。
参考：【2019年4月更新】Facebook app id(アプリID)の取得方法
まとめ
今回は、計測のためのタグや、ソースコードの話が中心でした。
Webページ制作の進行担当は、デザインやエフェクト（表現方法）ももちろんですが、裏側で起動していく、運用の部分で必要になってくるコードの知識も理解しておくと、大変スムーズです。
＊＊＊
一般的なWeb広告運用会社さんは広告運用に主軸をおきますが、当社はあくまでWebプロモーション全体を企画、実施し、運用改善していきます。
また、マーケティングオートメーション領域では、導入支援はもちろん、導入後の広告施策と合わせたキャンペーン設計まで、Webプロモーション×マーケティングオートメーションを一気通貫で行っています。
プロモーションとしてのデジタルマーケティングに関するご相談は、お気軽にお問い合わせください。
