Skip to content

Commit b45f66a

Browse files
stayseesongstayseesong
authored
Merge pull request #1647 from segmentio/DOC-202
DOC-202
2 parents 8e1240a + da451b4 commit b45f66a

File tree

5 files changed

+56
-57
lines changed

5 files changed

+56
-57
lines changed

‎src/connections/sources/catalog/libraries/website/plugins/plugins-enable.png

-54.3 KB
Binary file not shown.

‎src/connections/sources/catalog/libraries/website/plugins/vimeo/images/youtube-vimeo-plugins-beta-2021-06-04.png

18.2 KB
Loading

‎src/connections/sources/catalog/libraries/website/plugins/vimeo/index.md

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,44 @@ title: analytics.js Vimeo Plugin
33
hidden: true
44
---
55

6-
With the analytics.js Vimeo Plugin you can easily collect Vimeo player events into the Segment ecosystem.
6+
With the analytics.js Vimeo Plugin you can collect Vimeo player events into the Segment ecosystem.
77

88
## Getting Started
9-
To use the plugin you must first generate an Access Token in Vimeo. The plugin uses this token to access metadata about the video content being played.
9+
To use the Vimeo plugin:
1010

11-
Vimeo provides documentation outlining this process [here](https://developer.vimeo.com/api/start#getting-started-step1). Make sure you are carefully selecting your access scopes! The plugin only needs to read information about your video(s).
11+
1. Generate an access token in Vimeo. The plugin uses this token to access metadata about the playing video content. Vimeo provides documentation to [generate the access token](https://developer.vimeo.com/api/guides/start#generate-access-token).
12+
- **Note:** Make sure to select the access scopes you need as the plugin only needs to read information about your video(s).
1213

13-
### 1. Enable
14+
2. Enable a new plugin by navigating to the settings for your Source and clicking **Plugins**. You can enable the Vimeo plugin from this menu:
1415

15-
Enable a new plugin by navigating to the settings for your Source and clicking **Plugins**. You can enable the Vimeo plugin from this menu.
16+
![the plugins setting screen](./images/youtube-vimeo-plugins-beta-2021-06-04.png)
1617

17-
![the plugins setting screen](/docs/docs/connections/sources/plugins-enable.png)
18+
3. Initialize the plugin by entering your Vimeo access token and granting it access to the Vimeo video player instance(s) running on the page. Use this initialize method:
1819

19-
**NOTE:** At this time, only Javascript sources support plugins.
20-
21-
### 2. Initialize
22-
Initialize the plugin by giving it your Vimeo Access Token, and granting it access to the Vimeo video player instance(s) running on the page. Do this using the initialize method:
23-
<pre>
24-
&lt;iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
25-
&lt;script src="https://player.vimeo.com/api/player.js"&gt;&lt;/script&gt;
26-
&lt;script&gt;
20+
```js
21+
<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
22+
<script src="https://player.vimeo.com/api/player.js"></script>
23+
<script>
2724
var iframe = document.querySelector('iframe');
2825
var player = new Vimeo.Player(iframe);
29-
var VimeoAnalytics = window.analytics.plugins.VimeoAnalytics
30-
<b>var vimeoAnalytics = new VimeoAnalytics(player, 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX0365')
31-
vimeoAnalytics.initialize()</b>
32-
&lt;/script&gt;
33-
</pre>
34-
35-
That's it! The plugin listens to the Vimeo player for events, and responds by firing the corresponding [Segment Video Spec](https://segment.com/docs/connections/spec/video/) events on Analytics.js.
26+
analytics.ready(function () {
27+
var VimeoAnalytics = window.analytics.plugins.VimeoAnalytics
28+
var vimeoAnalytics = new VimeoAnalytics(player, 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX0365')
29+
vimeoAnalytics.initialize()
30+
})
31+
</script>
32+
```
33+
That's it! The plugin listens to the Vimeo player for events, and responds by firing the corresponding [Segment Video Spec](/docs/connections/spec/video/) events on Analytics.js.
3634

3735
## Supported Events
38-
The following [Segment Video Spec](https://segment.com/docs/connections/spec/video/) events are tracked by this plugin:
36+
The plugin tracks the following [Segment Video Spec](/docs/connections/spec/video/) events:
3937
- Video Playback Started
4038
- Video Playback Completed
4139
- Video Playback Paused/Resumed
4240
- Video Content Started/Completed
4341

4442
## Supported Properties
45-
The following [Segment Video Spec](https://segment.com/docs/connections/spec/video/) properties are automatically attached to the above events:
43+
The plugin automatically attaches the following [Segment Video Spec](/docs/connections/spec/video/) properties to the above events:
4644

4745
**'Playback' Events**
4846
- Total Length

‎src/connections/sources/catalog/libraries/website/plugins/youtube/images/youtube-vimeo-plugins-beta-2021-06-04.png

18.2 KB
Loading

‎src/connections/sources/catalog/libraries/website/plugins/youtube/index.md

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,57 @@ title: analytics.js YouTube Plugin
33
hidden: true
44
---
55

6-
With the analytics.js YouTube Plugin you can easily collect YouTube player events into the Segment ecosystem.
6+
With the analytics.js YouTube Plugin you can collect YouTube player events into the Segment ecosystem.
77

88
## Prerequisites
99
The Segment YouTube Plugin requires the YouTube player JavaScript object as an input, so your YouTube player embed must use the [YouTube IFrame player API](https://developers.google.com/youtube/iframe_api_reference#Getting_Started).
1010

11-
To begin, you'll need to generate an API Key for the Segment YouTube plugin, which it uses to access metadata about the video content being played. To do this, create a new project in the Google Developer Console, then create a new API Key in that project for the Segment YouTube plugin. You can read more about this process in the YouTube documentation on [registering an application](https://developers.google.com/youtube/registering_an_application).
11+
To begin, generate an API Key for the Segment YouTube plugin, which it uses to access metadata about the playing video content. To do this, create a new project in the Google Developer Console, then create a new API Key in that project for the Segment YouTube plugin. You can read more about this process in the YouTube documentation on [registering an application](https://developers.google.com/youtube/registering_an_application).
1212

1313
## Getting Started
1414

15-
### 1. Enable
15+
After you've generated the API key:
1616

17-
Enable a new plugin by navigating to the settings for your Source, and clicking **Plugins**. You can enable the YouTube plugin from this menu.
17+
1. Enable a new plugin.
18+
- Navigate to **Connections > Sources** and choose the source you want to connect the YouTube plugin to. Go to the **Settings** tab of your source and select **Plugins**. You can enable the YouTube plugin from this menu:
1819

19-
![the plugins setting screen](/docs/connections/sources/plugins-enable.png)
20+
![the plugins setting screen](./images/youtube-vimeo-plugins-beta-2021-06-04.png)
2021

21-
**Note: At this time, only Javascript sources support plugins.**
22+
**Note:** Only Javascript sources support plugins.
2223

23-
### 2. Initialize
24-
Initialize the plugin by giving it access to the YouTube video player instance(s) running on your page. Use the initialize method in the YouTube `onYouTubeIframeAPIReady()` function to register and initialize the plugin with the player instance and your API key:
25-
<pre>
24+
2. Initialize the plugin by giving it access to the YouTube video player instance(s) running on your page.
25+
- Use the initialize method in the YouTube `onYouTubeIframeAPIReady()` function to register and initialize the plugin with the player instance and your API key:
26+
27+
```js
2628
var player;
27-
function onYouTubeIframeAPIReady() {
28-
player = new YT.Player('player', {
29-
height: '390',
30-
width: '640',
31-
videoId: 'M7lc1UVf-VE'
32-
});
33-
<b>var ytAnalytics = new window.analytics.plugins.YouTubeAnalytics(player, 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX0365')
34-
ytAnalytics.initialize()</b>
35-
}
36-
</pre>
37-
38-
That's it! The plugin listens to the YouTube player for events, and fires the corresponding [Segment Video Spec](https://segment.com/docs/connections/spec/video/) events on analytics.js.
29+
function onYouTubeIframeAPIReady() {
30+
player = new YT.Player('player', {
31+
height: '390',
32+
width: '640',
33+
videoId: 'M7lc1UVf-VE'
34+
});
35+
analytics.ready(function () {
36+
var ytAnalytics = new window.analytics.plugins.YouTubeAnalytics(player, 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX0365')
37+
ytAnalytics.initialize()
38+
})}
39+
```
40+
41+
That's it! The plugin listens to the YouTube player for events, and fires the corresponding [Segment Video Spec](/docs/connections/spec/video/) events on analytics.js.
3942

4043
## Supported Events
41-
The following [Segment Video Spec](https://segment.com/docs/connections/spec/video/) events are tracked by this plugin:
42-
- Video Playback Started
43-
- If playing a single video, this fires when the video starts
44-
- If playing a playlist, this fires when the first video in the playlist starts
45-
- Video Playback Completed
46-
- If playing a single video, this fires when the video finishes
47-
- If playing a playlist, this event fires when the final video in the playlist finishes
48-
- Video Playback Paused/Resumed
49-
- Video Playback Buffer Started/Completed
50-
- Video Playback Seek Started/Completed
51-
- Video Content Started/Completed
52-
- For playlists, these events get fired for each individual video
44+
The plugin tracks the following [Segment Video Spec](/docs/connections/spec/video/) events:
45+
46+
Event | Details
47+
----- | -------
48+
Video Playback Started | When a user presses Play; after the last user action required for playback to begin. For example, after user login/authentication. <br><br> - If playing a single video, this fires when the video starts. <br> - If playing a playlist, this fires when the first video in the playlist starts.
49+
Video Playback Completed | When playback is complete and when the session finishes. <br><br>- If playing a single video, this fires when the video finishes. <br>- If playing a playlist, this event fires when the final video in the playlist finishes.
50+
Video Playback Paused/Resumed | When the user resumes playback after pausing.
51+
Video Playback Buffer Started/Completed | When playback starts and finishes buffering content or an ad.
52+
Video Playback Seek Started/Completed | When a user manually seeks a certain position of the content or ad in the playback.
53+
Video Content Started/Completed | When a video content segment starts and completes playing within a playback. <br><br>- If playing a playlist, these events get fired for each individual video.
5354

5455
## Supported Properties
55-
The following [Segment Video Spec](https://segment.com/docs/connections/spec/video/) properties are automatically attached to the above events:
56+
The plugin automatically attaches the following [Segment Video Spec](/docs/connections/spec/video/) to the above events:
5657

5758
**'Playback' Events**
5859
- Total Length

0 commit comments

Comments
 (0)