https://www.thetimescenter.com/plugins/pagewidget-video/pagewidget.video.matomo.js

1(function(){
2    window.matomoMediaAnalyticsAsyncInit = function () {
3        var MA = Matomo.MediaAnalytics;
4
5        function VideoPlayer(node, mediaType) {
6            // in this class we track interactions with the player
7            // instance is created whenever a media for this player was found
8
9            if (node.hasPlayerInstance) {
10                // prevent creating multiple trackers for the same media
11                // when scanning for media multiple times
12                return;
13            }
14
15            node.hasPlayerInstance = true;
16
17            // find the actual resource / URL of the video
18            var actualResource = MA.element.getAttribute(node, 'src');
19            // a user can overwrite the actual resource by defining a "data-matomo-resource" attribute.
20            // the method `getMediaResource` will detect whether such an attribute was set
21            var resource = MA.element.getMediaResource(node, actualResource);
22
23            // create an instance of the media tracker.
24            // Make sure to replace myPlayerName with your player name.
25            var tracker = new MA.MediaTracker("swoogoVideo", mediaType, resource);
26
27            // for video you should detect the width, height, and fullscreen usage, if possible
28            tracker.setWidth(node.clientWidth);
29            tracker.setHeight(node.clientHeight);
30            tracker.setFullscreen(MA.element.isFullscreen(node));
31
32            // the method `getMediaTitle` will try to get a media title from a
33            // "data-matomo-title", "title" or "alt" HTML attribute. Sometimes it might be possible
34            // to retrieve the media title directly from the video or audio player
35            var title = MA.element.getMediaTitle(node);
36            tracker.setMediaTitle(title);
37
38            // some media players let you already detect the total length of the video
39            var duration = (node.nodeName === 'VIDEO') ? node.duration : node.getAttribute(`duration`);
40            tracker.setMediaTotalLengthInSeconds(duration);
41
42            var useCapture = true;
43
44            $(node.closest(`.swoogo-video`)).on(`playing.video`, () => {
45                // if the player supports something like playlists you might want to check
46                // whether the source has changed and if so, call the following 3 methods:
47                // tracker.reset();
48                // tracker.setResource(newResource);
49                // tracker.setMediaTitle(newMediaTitleOrEmptyString);
50                // this allows you to automatically track a new media as soon
51                // as the currently played video or audio changes
52
53                // notify the tracker the media is now playing
54                tracker.play();
55            });
56
57            $(node.closest(`.swoogo-video`)).on(`paused.video`, () => {
58                // notify the tracker the media is now paused
59                tracker.pause();
60            });
61
62
63            $(node.closest(`.swoogo-video`)).on(`ended.video`, () => {
64                // notify the tracker the media is now finished
65                tracker.finish();
66            });
67
68            $(node.closest(`.swoogo-video`)).on(`timeupdate.video`, () => {
69                // notify the tracker the media is still playing
70
71                // we update the current made progress (time position) and duration of
72                // the media. Not all players might give you that information
73                tracker.setMediaProgressInSeconds(node.getAttribute(`current`));
74                tracker.setMediaTotalLengthInSeconds(node.getAttribute(`duration`));
75
76                // it is important to call the tracker.update() method regularly while the
77                // media is playing. If this method is not called eg every X seconds no
78                // updated data will be tracked.
79                // The method itself will not actually send a tracking request whenever it
80                // is called. Instead it will make sure to respect the set ping interval and
81                // eg only send a tracking request every 5 seconds.

82                tracker.update();
83
84            });
85
86            $(node.closest(`.swoogo-video`)).on(`seeking`, () => {
87                // "seekStart" is needed when the player is seeking or buffering.
88                // It will stop the timer that tracks for how long the media has been played.
89                tracker.seekStart();
90            });
91
92            $(node.closest(`.swoogo-video`)).on(`seeked`, () => {
93                // we update the current made progress (time position) and duration of
94                // the media. Not all players might give you that information
95                tracker.setMediaProgressInSeconds(node.currentTime);
96                tracker.setMediaTotalLengthInSeconds(node.duration);
97
98                // "seekFinish" is needed when the player has finished seeking or buffering.
99                // It will start the timer again that tracks for how long the media has been played.
100                tracker.seekFinish();
101            });
102
103
104            // for videos it might be useful to listen to the resize event to detect a
105            // changed video width or when the video has gone fullscreen
106            window.addEventListener('resize', function () {
107                tracker.setWidth(node.clientWidth);
108                tracker.setHeight(node.clientHeight);
109                tracker.setFullscreen(MA.element.isFullscreen(node));
110            }, useCapture);
111
112
113            // here we make sure to send an initial tracking request for this media.
114            // This basically tracks an impression for this media.
115            tracker.trackUpdate();
116        }
117        VideoPlayer.scanForMedia = function(documentOrElement) {
118            // called whenever it is needed to scan the entire document
119            // or when a certain element area is scanned for new videos or audio
120
121            // find all medias for your player
122            var videos = documentOrElement.querySelectorAll(`.swoogo-video [id$="_video"]`);
123
124            for (var i = 0; i < videos.length; i++) {
125                // for each of the medias found, create an instance of your player as long as the media is
126                // not supposed to be ignored via a "data-matomo-ignore" attribute
127                if (!MA.element.isMediaIgnored(videos[i])) {
128                    new VideoPlayer(videos[i], MA.mediaType.VIDEO);
129                    // there is also a MA.mediaType.AUDIO constant if you want to track audio
130                }
131            }
132
133        };
134
135        // adding the newly created player to the Media Analytics tracker
136        MA.addPlayer("swoogoVideo", VideoPlayer);
137        _paq.push(["MediaAnalytics::removePlayer", "vimeo"]); //don't track normal vimeo
138        _paq.push(["MediaAnalytics::removePlayer", "html5"]); //don't track normal html5
139        _paq.push(["MediaAnalytics::removePlayer", "youtube"]); //don't track normal youtube
140    };
141}());