amp-analytics
- 簡介設定頁面瀏覽 UI 元素外觀追蹤錨點點擊捲動事件計時器 AMP 輪播追蹤表單

網站

amp-analytics

在 Playground 中開啟

簡介

amp-analytics 元素可用於衡量 AMP 文件上的活動。目前，amp-analytics 支援不同種類的事件

頁面瀏覽
錨點點擊
計時器
捲動
AMP 輪播變更
表單

此範例示範可以衡量哪些事件以及如何設定這些事件。如需所有可用選項和參數的完整概觀，請參閱官方文件。

設定

在頁首匯入 amp-analytics 元件。

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

我們需要 amp-iframe 來嵌入分析儀表板。

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

<amp-iframe class="fixed-dashboard" width="200" height="240" layout="fixed" sandbox="allow-scripts" frameborder="0" src="https://amp.dev.org.tw/documentation/examples/components/amp-analytics/embed?test=1&user=&account=ampdev">
  <amp-img src="/static/samples/img/pixel-white.png" layout="fixed-height" height="350" width="auto" placeholder alt="...">
  </amp-img>
</amp-iframe>

頁面瀏覽

這是一個簡單的 amp-analytics 設定，可在頁面變成可見時觸發單一請求。請注意我們如何在請求中宣告變數 eventId，並在 vars 區塊中定義具體值。

重要事項： amp-analytics 應在文件主體中設定。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "vars": {
            "eventId": "pageview"
          }
        }
      }
    }
  </script>
</amp-analytics>

UI 元素外觀追蹤

這是一個更複雜的檢視追蹤。當特定元素變成可見時，此範例會觸發分析請求。元素是透過 id 指定，且必須是 AMP 元素 (amp-img、amp-iframe、amp-ad 等)。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "visibilitySpec": {
            "selector": "#cat-image-id",
            "visiblePercentageMin": 20,
            "totalTimeMin": 500,
            "continuousTimeMin": 200
          },
          "vars": {
            "eventId": "catview"
          }
        }
      }
    }
  </script>
</amp-analytics>

如果此圖片至少有 20% 可見 500 毫秒，且最短持續可見時間為 200 毫秒，則會觸發分析請求。

<amp-img id="cat-image-id" src="/static/samples/img/cat-looking-up-300x200.jpg" width="300" height="200" attribution="visualhunt" alt="a cat" layout="responsive"></amp-img>

當圖片因為動作而變成可見時，此範例會觸發分析請求。

<button on="tap:an-image.toggleVisibility">Toggle image</button>
<amp-img hidden id="an-image" src="/static/samples/img/amp.jpg" width="1080" height="610" layout="responsive" alt="AMP">
</amp-img>

當圖片變成可見時，會發出 elementShown 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "elementShown": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "defaultPageview": {
          "on": "visible",
          "request": "elementShown",
          "selector": "#an-image",
          "vars": {
            "eventId": "imageShownAfterButtonClick"
          }
        }
      }
    }
  </script>
</amp-analytics>

錨點點擊

也可以追蹤使用者互動。此設定將追蹤頁面中任何錨點連結的點擊。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "clickOnAnyAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

按一下其中一個連結試試看。

連結
另一個連結

<ul>
  <li><a>a link</a></li>
  <li><a>another link</a></li>
</ul>

也可以只針對特定連結觸發點擊事件。透過指定 selector id 來選取要追蹤的特定元素。此範例只追蹤 id 為 anchor-id 的錨點點擊。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "#anchor-id",
          "request": "event",
          "vars": {
            "eventId": "clickOnSpecialAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

只有其中一個連結會觸發 clickOnSpecialAnchor 事件。

特殊連結.
不那麼特殊的連結.

<ul>
  <li><a id="anchor-id">a special link</a>.</li>
  <li><a id="another-anchor-id">a not so special link</a>.</li>
</ul>

捲動事件

在頁面捲動時，在特定條件下使用捲動事件來觸發請求。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
          },
          "request": "event",
          "vars": {
            "eventId": "scroll"
          }
        }
      }
    }
  </script>
</amp-analytics>

計時器

計時器事件會在指定的間隔觸發。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "pageTimer": {
          "on": "timer",
          "timerSpec": {
            "interval": 10,
            "maxTimerLength": 600
          },
          "request": "event",
          "vars": {
            "eventId": "timer"
          }
        }
      }
    }
  </script>
</amp-analytics>

AMP 輪播追蹤

可以使用 amp-analytics 追蹤 amp-carousel 事件 (這僅適用於 type="slides")。以下是輪播範例

投影片 1

投影片 2

投影片 3

<amp-carousel width="400" height="300" layout="responsive" type="slides">
  <div class="slide" data-slide-id="slide1">Slide 1</div>
  <div class="slide" data-slide-id="slide2">Slide 2</div>
  <div class="slide">Slide 3</div>
</amp-carousel>

您可以使用 fromSlide 和 toSlide 變數來追蹤檢視了哪些投影片。值取自投影片的 data-slide-id 屬性 (如果存在)，否則代表投影片的索引 (從 0 開始)。

當目前可見的投影片有任何變更時，會發出 amp-carousel-change 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "ampCarouselChange": {
          "on": "amp-carousel-change",
          "request": "event",
          "vars": {
            "eventId": "carousel-change-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

當有瀏覽到下一張投影片時，會發出 amp-carousel-next 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "ampCarouselNext": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-next-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

當有瀏覽到上一張投影片時，會發出 amp-carousel-prev 事件

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "ampCarouselPrev": {
          "on": "amp-carousel-prev",
          "request": "event",
          "vars": {
            "eventId": "carousel-prev-${fromSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

表單

您可以追蹤由 amp-form 觸發的事件。請在此處尋找支援事件的清單：此處。

嘗試在表單中插入任何名稱作為名稱輸入，以查看 amp-form-submit-success 事件。

嘗試在表單中插入文字 "error" 作為名稱輸入，以查看 amp-form-submit-error 事件。

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp.dev.org.tw/documentation/examples/components/amp-analytics/ping?user=&account=ampdev&event=${eventId}"
      },
      "triggers": {
        "formSubmit": {
          "on": "amp-form-submit",
          "request": "event",
          "selector": "#testForm",
          "vars": {
            "eventId": "form-submit"
          }
        },
        "formSubmitSuccess": {
          "on": "amp-form-submit-success",
          "request": "event",
          "selector": "#testForm",
          "vars": {
            "eventId": "form-submit-success"
          }
        },
        "formSubmitError": {
          "on": "amp-form-submit-error",
          "request": "event",
          "selector": "#testForm",
          "vars": {
            "eventId": "form-submit-error"
          }
        }
      }
    }
  </script>
</amp-analytics>
<p>
  Try to insert any name as a name input in the form to see the
  <code>amp-form-submit-success</code> event.
</p>
<p>
  Try to insert the word "error" as a name input in the form to see the
  <code>amp-form-submit-error</code> event.
</p>
<form id="testForm" method="post" action-xhr="/documentation/examples/api/submit-form-input-text-xhr" target="_top">
  <input type="text" name="name" placeholder="Name..." required>
  <input type="submit" value="Subscribe">
</form>

需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @sebastianbenz 撰寫