Lesson 1 of 4

Vimeo Video

① Connect your GTM container

Paste your container ID to load it into this page. It only ever runs here.

Advanced: use a specific environment

Vimeo doesn't push dataLayer events, but it ships a Player SDK you can bind to. Load player.js once, attach to the iframe, and you get play, pause, ended and a timeupdate callback with percent watched.

You'll push a dataLayer event from each callback, starting with vimeo_play, so video engagement becomes measurable like anything else. The snippet also derives 25/50/75% progress events from timeupdate, the same milestones GA4's enhanced video measurement reports for YouTube.

Goal

Bind the Vimeo Player SDK and push vimeo_play / vimeo_complete to the dataLayer.

Build it in GTM

Add the listener as a Custom HTML tag

Paste this into a Custom HTML tag firing on All Pages (or Initialization). It turns Vimeo's signals into dataLayer events:

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
  var iframe = document.querySelector('iframe[src*="vimeo.com"]');
  if (iframe) {
    var player = new Vimeo.Player(iframe);
    var push = function (name, extra) {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push(Object.assign({ event: name }, extra || {}));
    };
    player.on('play',  function(){ push('vimeo_play'); });
    player.on('pause', function(){ push('vimeo_pause'); });
    player.on('ended', function(){ push('vimeo_complete'); });
    // Quartile progress: fire once at 25/50/75%.
    var seen = {};
    player.on('timeupdate', function(d){
      [25,50,75].forEach(function(p){
        if (!seen[p] && d.percent * 100 >= p) { seen[p] = 1; push('vimeo_progress', { percent: p }); }
      });
    });
  }
</script>

Create a Custom Event trigger on vimeo_play
Go to Triggers → New → Custom Event, set the event name to vimeo_play, name it for the widget and Save.
Fire a tag on it
Add a GA4 Event tag (or the Custom HTML - Test stand-in) firing on that trigger, so the captured event reaches your analytics.
Go deeper
Want the full production script, a walkthrough video and a downloadable GTM recipe? DumbData: Vimeo listener script, video + GTM recipe.

Debug in Tag Assistant

Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.

In your GTM, click Preview.
Paste the live URL above and click Connect.
Interact with the live page and watch your tag fire in Tag Assistant.

What you should expect to see

Pressing play on the simulated player pushes vimeo_play, and your tag fires on it in Tag Assistant.

Verify your container

Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.

Drop your container .json here

or browse · checked in your browser, nothing is uploaded

0 of 4 lessons complete