如何在AMP页面中实现YouTube视频的GTM追踪？

Great question! AMP pages have stricter rules than regular web pages when it comes to tracking, but setting up video tracking with GTM is totally doable once you know the AMP-specific steps. Let's walk through this step by step:

You can't reuse your regular web GTM container for AMP pages—you need to create a dedicated AMP container in your GTM account:

• Go to your GTM workspace, click "Create Container"
• Select "AMP" as the container type
• Grab the generated AMP GTM code and replace any existing regular GTM code on your AMP pages (it'll look something like <amp-analytics type="gtag" ...> instead of the standard script/iframe combo)

AMP requires using native video components instead of regular HTML5 video. Choose the right one for your use case:

For self-hosted videos: Use amp-video #

Add the component script to your page's <head>:

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

Then add the video element with a unique ID (critical for targeting tracking events):

<amp-video
  id="self-hosted-video"
  width="640"
  height="360"
  src="your-video-file.mp4"
  poster="your-poster-image.jpg"
  controls
>
  <div fallback>
    <p>Your browser doesn't support HTML5 video.</p>
  </div>
</amp-video>

For YouTube videos: Use amp-youtube #

Add its script to the <head>:

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

Then embed the video with an ID:

<amp-youtube
  id="youtube-video"
  width="640"
  height="360"
  data-videoid="YOUR_VIDEO_ID"
  layout="responsive"
></amp-youtube>

This is where you'll set up triggers and tags to capture video events:

Step 3.1: Create Triggers #

In your AMP GTM container:

• Go to Triggers > New
• Choose the trigger type matching your video component:
  • For amp-video: Select AMP Video
  • For amp-youtube: Select AMP YouTube
• Configure the trigger to fire on specific events:
  • Common events: video-play, video-pause, video-ended, or video-progress (you can set percentage thresholds like 25%, 50%, 75%)
  • Optional: Target only specific videos by entering their ID (e.g., self-hosted-video) under "Element ID"

Step 3.2: Create Tags #

Next, create tags to send these events to your analytics tool (e.g., Google Analytics):

• Go to Tags > New
• Choose a tag type like Google Analytics: GA4 Event (or Universal Analytics if you're still using it)
• Fill in the event details:
  • For a play event: Category = AMP Video, Action = Play, Label = [Your Video Name/URL]
  • Use GTM's built-in variables to dynamically pull data like video URL or progress percentage (look for variables like AMP Video: Video URL or AMP Video: Percent Progress)
• Link the tag to the trigger you created earlier

Step 3.3: Preview and Publish #

Use GTM's preview mode for AMP to test: load your AMP page, interact with the video, and confirm that triggers fire and tags send data correctly. Once everything works, publish your container.

If you prefer not to use GTM, you can add an amp-analytics component directly to your page. Here's an example for tracking self-hosted video events to GA4:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "YOUR_GA4_MEASUREMENT_ID",
        "config": {
          "YOUR_GA4_MEASUREMENT_ID": { "groups": "default" }
        }
      },
      "triggers": {
        "videoPlay": {
          "on": "video-play",
          "selector": "#self-hosted-video",
          "vars": {
            "event_name": "video_play",
            "event_category": "AMP Video",
            "event_action": "Play",
            "event_label": "${videoSrc}"
          }
        },
        "videoProgress50": {
          "on": "video-progress",
          "selector": "#self-hosted-video",
          "vars": {
            "event_name": "video_progress",
            "event_category": "AMP Video",
            "event_action": "50% Complete",
            "event_label": "${videoSrc}"
          },
          "when": {
            "percentProgress": 50
          }
        },
        "videoEnded": {
          "on": "video-ended",
          "selector": "#self-hosted-video",
          "vars": {
            "event_name": "video_ended",
            "event_category": "AMP Video",
            "event_action": "Completed",
            "event_label": "${videoSrc}"
          }
        }
      }
    }
  </script>
</amp-analytics>

• AMP doesn't allow custom JavaScript for tracking—all events must use AMP's native component events
• Your AMP GTM container is separate from your regular web container; they can't share tags/triggers
• Always validate your AMP page to catch any errors that might break tracking

内容的提问来源于stack exchange，提问作者gauti