AMPとは
AMPはグーグルが始めたモバイルでの表示を早くするための対策。
3秒以上サイトの表示に時間がかかると、４０％の人が離脱してしまうという結果が出ているようですが、現状かなりのサイトが3秒以上読み込み速度がかかります。
そこで高速の読み込みを可能にするAMP JS ライブラリをgoogleが開発。
AMP専用の HTMLでサイトを作ることで超高速表示が可能になり、さらにgoogle検索結果でも見やすく表示される可能性があります。
SEOに直接の関係はないと今のところgoogleはいっていますが、ページ速度やユーザビリティといった点では関係ありますし、今後はどうなるかわかりませんので対応しておくに越したことはないと思います。
ただ対応していないタグや動作などもたくさんあり、すべてのサイトに対応できるわけではありませんし、適さないサイトもあります。
デザインなどはかなり制限されますが、シンプルで見やすいサイトが一番なんではないかな？と私は思います。
対応できるページは対応しておくといいですね。
AMP HTMLでページを作ってみよう！
実際に作ってみましょう。
以下は標準のAMP HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!doctype html> <html amp lang="ja"> <head> <meta charset="utf-8"> <link rel="canonical" href="オリジナルページのURLまたはこのページしかない場合はこのページのURL"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <title>ページタイトル</title> <!-- 以下はこのページの情報を掲載。--> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "ページタイトル", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>AMPサイトにようこそ!!</h1> </body> </html> |
参考サイト： https://www.ampproject.org/ja/docs/get_started/create/basic_markup
<script type=”application/ld+json”>
の部分の書き方
“@context”: “http://schema.org”, //こちらは必須ではないが、AMPに対応しているサイトが表示されるgoogleの検索結果のAMPニュースカル―セルに表示させたいときは必須。
“@type”: “NewsArticle”, //こちらはどんなページなのか記載
NewsArticle Recipe Review VideoObject
CSSやjavaの外部ファイル読み込みは不可.
HTML内に<style amp-custom> </style> 内に書き込む。
禁止事項
style属性
img
video
audio
iframe
base
frame
frameset
object
param
applet
embed
form
input
textarea
select
option
は使用不可 以下の書き方に変更
<img> ↓
|
1 |
<amp-img layout="responsive" width="800" height="540" src="画像URL" alt="画像代替テキスト"></amp-img> |
height とwidth は必須
その他<amp-img>で使える要素
画面サイズに合わせて画像サイズを変換
|
1 |
layout="responsive" |
画像のサイズを固定
|
1 |
layout="fixed" |
高さを固定
|
1 |
layout="fixed height" |
親要素のサイズに合わせる （height とwidthは指定しない）
|
1 |
layout="fill" |
画面サイズに合わせて画像を変更
以下 画面サイズ４８０px以下ならs.jpg 800px以下ならm.jpg 980px以下ならl.jpg を指定
|
1 2 3 |
srcset="/s.jpg 480w, /m.jpg 800w, /l.jpg 980w" |
attribution=”著作権情報の記載”
その他も以下で紹介の拡張機能などで代用可能。
AMP HTML 拡張機能
まだまだできないことが多いですが、少しづつ便利な機能が追加されています。
<script>は<heade内に記載
参考： https://github.com/ampproject/amphtml/tree/master/extensions
ifream
https://ampbyexample.com/components/amp-iframe/
|
1 |
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 |
<amp-iframe width="500" height="281" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowfullscreen frameborder="0" src="https://player.vimeo.com/video/140261016"> <amp-img layout="fill" src="https://i.vimeocdn.com/video/536538454_640.webp" placeholder></amp-img> </amp-iframe> |
googlemap
|
1 2 3 4 5 6 7 |
<amp-iframe width="600" height="400" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=place_id:[ここにplce-IDを記載]&key=[ここにはご自身のAPI keyを記載]"> </amp-iframe> |
※ src のURL内のplace_id は https://developers.google.com/places/place-id?hl=ja より取得
APL key は https://developers.google.com/maps/documentation/javascript/?hl=ja ここから取得。
youtube
|
1 |
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> |
|
1 2 3 4 5 |
<amp-youtube data-videoid="※動画のIDを記載" width="800" height="450" layout="responsive"></amp-youtube> |
※動画のIDは動画のURLの一番後ろの部分 https://www.youtube.com/watch?v=nMXmLwXxhSE の場合 nMXmLwXxhSE
必須項目： data-videoid、width、height、layout
layoutは画像の時と一緒
画面サイズに合わせて動画サイズを変換
autoplay で自動再生
|
1 |
layout="responsive" |
動画のサイズを固定
|
1 |
layout="fixed" |
動画の高さを固定
|
1 |
layout="fixed height" |
親要素のサイズに合わせる （height とwidthは指定しない）
|
1 |
layout="fill" |
ナビゲーション等に使えるサイドバー
|
1 |
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<button on='tap:sidebar.toggle'>Toggle sidebar</button> <button on='tap:sidebar.toggle'>Toggle sidebar</button> <button on='tap:sidebar.toggle'>Toggle sidebar</button> <amp-sidebar id='sidebar' layout="nodisplay" side="right"> <amp-img class='amp-close-image' src="/img/ic_close_black_18dp_2x.png" width="20" height="20" alt="close sidebar" on="tap:sidebar.close" role="button" tabindex="0"></amp-img> <ul> <li> <a href="/">Home</a> </li> <li> Nav item 1</li> <li> <amp-fit-text width="220" height="20" layout="responsive" max-font-size="24"> Nav item 2 - <amp-fit-text> </amp-fit-text> </li> <li> <amp-fit-text width="220" height="20" layout="responsive" max-font-size="24"> Nav item 3 - <amp-fit-text> longer text </amp-fit-text> </li> <li> Nav item 4 - Image <amp-img class='amp-sidebar-image' src="/img/favicon.png" width="20" height="20" alt="an image"></amp-img> </li> <li> Nav item 5</li> <li> Nav item 6</li> </ul> </amp-sidebar> |
ライトボックス
https://ampbyexample.com/components/amp-lightbox/
|
1 |
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<button on="tap:my-lightbox" role="button" tabindex="0"> Open lightbox </button> <amp-lightbox id="my-lightbox" layout="nodisplay"> <div class="lightbox" on="tap:my-lightbox.close" role="button" tabindex="0"> <h1>Hello World!</h1> </div> </amp-lightbox> |
アコーディオン
https://ampbyexample.com/components/amp-accordion/
|
1 |
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style amp-custom> section[expanded] .show-more { display: none; } section:not([expanded]) .show-less { display: none; } .nested-accordion h4 { font-size: 14px; background-color: #ddd; } </style> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<amp-accordion> <section expanded> <h4>Section 1</h4> <p>Bunch of awesome content.</p> </section> <section> <h4>Section 2</h4> <div>Bunch of even more awesome content. This time in a <code><div></code>.</div> </section> <section> <h4>Section 3</h4> <figure> <amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive" alt="an image"></amp-img> <figcaption>Images work as well.</figcaption> </figure> </section> </amp-accordion> |
アコーディオンの中にさらにアコーディオン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<amp-accordion> <section> <h4>Section 1</h4> <p>Bunch of content.</p> </section> <section> <h4>Section 2</h4> <amp-accordion class="nested-accordion"> <section> <h4>Nested Section 2.1</h4> <p>Bunch of content.</p> </section> <section> <h4>Nested Section 2.2</h4> <p>Bunch of more content.</p> </section> </amp-accordion> </section> </amp-accordion> |
動画
https://ampbyexample.com/components/amp-video/
|
1 |
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<amp-video width="480" height="270" src="/video/tokyo.mp4" poster="/img/tokyo.jpg" layout="responsive" controls> <div fallback> <p>Your browser doesn't support HTML5 video.</p> </div> <source type="video/mp4" src="/video/tokyo.mp4"> <source type="video/webm" src="/video/tokyo.webm"> </amp-video> |
アニメーションGIF
https://ampbyexample.com/components/amp-anim/
|
1 |
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">custom-element</span>=<span class="hljs-string">"amp-anim"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.ampproject.org/v0/amp-anim-0.1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> |
|
1 2 3 4 5 6 |
<span class="hljs-tag"><<span class="hljs-name">amp-anim</span> <span class="hljs-attr">width</span>=<span class="hljs-string">245</span> <span class="hljs-attr">height</span>=<span class="hljs-string">300</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/img/gopher.gif"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"an animation"</span> <span class="hljs-attr">attribution</span>=<span class="hljs-string">"The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions."</span>></span> <span class="hljs-tag"></<span class="hljs-name">amp-anim</span>></span> |
ログインユーザーのみ記事の表示
https://ampbyexample.com/components/amp-access/
フォーム
https://ampbyexample.com/components/amp-form/
|
1 |
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">custom-element</span>=<span class="hljs-string">"amp-form"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.ampproject.org/v0/amp-form-0.1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">amp-custom</span>></span><span class="css"> <span class="hljs-selector-tag">form</span><span class="hljs-selector-class">.amp-form-submit-success</span> <span class="hljs-selector-attr">[submit-success]</span>, <span class="hljs-selector-tag">form</span><span class="hljs-selector-class">.amp-form-submit-error</span> <span class="hljs-selector-attr">[submit-error]</span>{ <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">16px</span>; } <span class="hljs-selector-tag">form</span><span class="hljs-selector-class">.amp-form-submit-success</span> <span class="hljs-selector-attr">[submit-success]</span> { <span class="hljs-attribute">color</span>: green; } <span class="hljs-selector-tag">form</span><span class="hljs-selector-class">.amp-form-submit-error</span> <span class="hljs-selector-attr">[submit-error]</span> { <span class="hljs-attribute">color</span>: red; } <span class="hljs-selector-tag">form</span><span class="hljs-selector-class">.amp-form-submit-success</span><span class="hljs-selector-class">.hide-inputs</span> > <span class="hljs-selector-tag">input</span> { <span class="hljs-attribute">display</span>: none } <span class="hljs-selector-class">.horizontal-display</span> { <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">align-items</span>: center; } <span class="hljs-selector-class">.other-input</span> { <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">16px</span>; } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> |
検索フォーム
|
1 2 3 4 5 6 7 8 9 10 11 |
<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"GET"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"https://ampbyexample.com/components/amp-form/submit-form"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_top"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"data-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search..."</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"googlesearch"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"OK"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-primary other-input"</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> |
お問合せフォーム
|
1 2 3 4 5 6 7 8 9 10 11 |
<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"GET"</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"https://ampbyexample.com/components/amp-form/submit-form"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_top"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"search"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"data-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Search..."</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"googlesearch"</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"OK"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"button button-primary other-input"</span>></span> <span class="hljs-tag"></<span class="hljs-name">form</span>></span> |
オーディオ
https://ampbyexample.com/components/amp-audio/
|
1 |
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">custom-element</span>=<span class="hljs-string">"amp-audio"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.ampproject.org/v0/amp-audio-0.1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> |
|
1 2 3 4 5 6 7 |
<span class="hljs-tag"><<span class="hljs-name">amp-audio</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"auto"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">fallback</span>></span> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>Your browser doesn’t support HTML5 audio<span class="hljs-tag"></<span class="hljs-name">p</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">amp-audio</span>></span> |
カル―セル
https://ampbyexample.com/components/amp-carousel/
|
1 |
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">custom-element</span>=<span class="hljs-string">"amp-carousel"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.ampproject.org/v0/amp-carousel-0.1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span class="hljs-tag"><<span class="hljs-name">amp-carousel</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"400"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> <span class="hljs-attr">layout</span>=<span class="hljs-string">"responsive"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"slides"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blue-box"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> This is a blue box. <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"red-box"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> This is a red box. <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"green-box"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> This is a green box. <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">amp-carousel</span>></span> |
カル―セルと画像ギャラリー
上よりこちらのほうが便利かも？
https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/
Facebookの投稿やビデオを表示
|
1 |
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">custom-element</span>=<span class="hljs-string">"amp-facebook"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.ampproject.org/v0/amp-facebook-0.1.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> |
|
1 2 3 4 5 |
<span class="hljs-tag"><<span class="hljs-name">amp-facebook</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"552"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"303"</span> <span class="hljs-attr">layout</span>=<span class="hljs-string">"responsive"</span> <span class="hljs-attr">data-href</span>=<span class="hljs-string">"https://www.facebook.com/zuck/posts/10102593740125791"</span>></span> <span class="hljs-tag"></<span class="hljs-name">amp-facebook</span>></span> |
インストグラムを表示
https://ampbyexample.com/components/amp-instagram/
|
1 |
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script> |
|
1 2 3 4 5 |
<amp-instagram data-shortcode="1totVhIFXl" width="1" height="1" layout="responsive"> </amp-instagram> |
Twitter を表示
|
1 |
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> |
|
1 2 3 4 5 |
<amp-twitter width="375" height="472" layout="responsive" data-tweetid="638793490521001985"> </amp-twitter> |
|
1 2 3 4 5 6 |
<amp-twitter width="390" height="330" layout="responsive" data-tweetid="585110598171631616" data-cards="hidden"> </amp-twitter> |
Vine表示
|
1 |
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script> |
|
1 2 3 4 5 |
<amp-vine width="1" height="1" layout=responsive data-vineid="MdKjXez002d"> </amp-vine> |
SNSシェアボタン表示
|
1 2 |
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> <link rel="canonical" href="https://ampbyexample.com/components/amp-social-share/"> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div> <amp-social-share type="twitter" width="60" height="44"> </amp-social-share> <amp-social-share type="gplus" width="60" height="44"></amp-social-share> <amp-social-share type="email" width="60" height="44"></amp-social-share> <amp-social-share type="pinterest" width="60" height="44"></amp-social-share> <amp-social-share type="linkedin" width="60" height="44"></amp-social-share> <amp-social-share type="facebook" width="60" height="44" data-param-app_id="254325784911610"></amp-social-share> </div> |
googleアナリティクスの設定
<head>内に以下記載
|
1 |
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> |
<body>内に以下記載
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics> |
※ UA-XXXXX-Y は自分のgoogleアカウントに置き換える
イベント トラッキングの測定を含めた例
<body>内の記載を以下に変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" }, "trackEvent": { "selector": "#event-test", "on": "click", "request": "event", "vars": { "eventCategory": "ui-components", "eventAction": "click" } } } } </script> </amp-analytics> |
この場合、クリックを計測したい場所に id=”event-test” を指定
|
1 2 3 |
<span id="event-test" class="box"> Click here to generate an event </span> |
参照： https://developers.google.com/analytics/devguides/collection/amp-analytics/
AMP HTMLの間違いがないかチェックする
AMP HTMLのページのURLの最後に #development=1 をつけてサイトを開く
又は https://validator.ampproject.org/ こちらの検証ツールを利用する
AMPエラーの対象方法
エラー①
タグ「amp-sidebar」の親タグは「div」ですが、「body」のみ使用できます。
対処法
body 直下に amp-sidebar を設置する
