<amp-video>のイベントを<amp-analytics>で計測したい

やりたいこと

AMPページで動画周りのGoogleAnalyticsイベントを発火させたいです。
しかしイベントの発火確認ができていません（ローカル開発環境で確認しています）

ご相談したいことは
・そもそもGoogleAnalyticsを送信する土台が出来ていない？
・それとも下記の実装に問題があってイベント送信出来ていない？
・イベントの確認方法はAMPページでデベロッパーツール開いて、Networkで「collect」でフィルタかけるで問題ない？

です。
よろしくお願いします。

出来ていること

・AMP対応
・GTMでのイベント発火

試したこと

GTMだとamp-videoタグのイベントが計測できないようで、
下記のようにGoogleAnalyticsに直接送信するように設定してみました。

consoleを確認しましたが、他の質問者さんのようなAMPエラーは出ていません。

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

<body>
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>
<!-- Google Analytics -->
<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
  {
    "vars": {
      "gtag_id": "XXXXXXXX",
      "config" : {
        "XXXXXXXX": { "groups": "default" }
      }
    },
    "triggers": {
      "myVideoPlay": {
        "on": "video-play",
        "request": "event",
        "selector": "amp-video",
        "vars": {
          "eventCategory": "${canonicalPath}",
          "eventAction": "start_video",
          "eventLabel": "${id}"
        }
      },
      "myVideoEnded": {
        "on": "video-ended",
        "request": "event",
        "selector": "amp-video",
        "vars": {
          "eventCategory": "${canonicalPath}",
          "eventAction": "end_video",
          "eventLabel": "${id}"
        }
      },
      "myVideoSecondsPlayed": {
        "on": "video-seconds-played",
        "request": "event",
        "selector": "amp-video",
        "videoSpec": {
          "interval": 2
        },
        "vars": {
          "eventCategory": "${canonicalPath}",
          "eventAction": "playing_2_seconds_${counter}",
          "eventLabel": "${id}"
        }
      }
    }
  }
  </script>
</amp-analytics>

<amp-video
        id="XXXXXXXX"
        autoplay
        controls
        width="640"
        height="360"
        layout="responsive">
  <source type="video/mp4" src="https://XXXXXXXX.mp4">
</amp-video>

行動規範の内容に同意します

回答1件

自己解決

単にtype="gtag"が古かっただけでした。
これでいけた。

<amp-analytics type="googleanalytics">
  <script type="application/json">
  {
    "vars": {
      "account": "XXXXXXXX"
    },

投稿2020/05/21 11:49

aeofun

総合スコア12

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！