カスタマイズ

連携

ビデオグアナリティクス

ビデオグのアクセス解析機能に視聴データを送信します。

初めに

本機能を利用するためには以下が必要になります。

  • ビデオグのエンタープライズプラン契約。
  • ビデオグアカウントのお客様番号。
  • 許可ドメインの申請。
    • プレイヤーが表示されるページのドメインを申請してください。
    • 申請はこちらから可能です。
    • ドメインの許可設定には5営業日程度のお時間をいただきます。
読み込みファイル
ソース
<!-- jQuery --> <script src="https://player-cdn.videog.jp/r/js/jquery.min.js"></script> <!-- Lodash --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> <!-- videogPlayer --> <script src="https://player-cdn.videog.jp/r/js/videog_player/2.0.5/videogplayer/videogplayer.min.js" defer></script> <!-- index.js--> <script src="./index.js" defer></script> <!-- videogPlayerTrace --> <script src="https://player-cdn.videog.jp/r/js/videog_player_trace2/stable/main.js" defer></script> <!-- ashino_transmitter --> <script src="https://player-cdn.videog.jp/r/js/ashino_transmitter/stable/transmitter.js" defer></script> <!-- ashino_handler --> <script src="https://player-cdn.videog.jp/r/js/ashino_handler/stable/ashino_handler.js" defer></script>
説明
ファイル名 説明
jQuery JavaScriptコードをより容易に記述できるようにするために設計された外部のJavaScriptライブラリです。
Lodash 一般的なプログラミングタスクのためのユーティリティ関数を提供する外部のJavaScriptライブラリです。
VideogPlayer ビデオグプレイヤーの本体ファイルです。
index.js プレイヤーの表示とアクセス解析のデータ取得処理を行うjsファイルです。お客様が自由に編集できます。
ashino_handler ビデオグアナリティクスに必要な各イベントにフックして、処理の開始をキックするビデオグアナリティクス専用ファイルです。
videogPlayerTrace,ashino_transmitter ビデオグアナリティクスの仕様に合わせた形にデータを整形し、サーバへ送信するビデオグアナリティクス専用ファイルです。
オプション
説明

視聴者識別IDや任意の文字列データをビデオグアナリティクスに送信したい場合は、以下のパラメーターを設定すると計測が可能になります。

仕様
パラメーター名 型 値 設定
aud_id integer number 任意
str1 string text 任意
str2 string text 任意
説明
パラメーター名 型
aud_id 視聴者を特定する一意な番号を設定します。
str1 配信者側で自由に設定できるデータです。
str2 配信者側で自由に設定できるデータです。
動画のhash
説明

ビデオグアナリティクスに視聴データを送る動画を指定します。

取得方法
コードサンプル
index.js
// Videogプレイヤー用にグローバルでユニークな変数を使用する try { if (VideogPlayerApp) { window.VideogPlayerApp = VideogPlayerApp; } else { window.VideogPlayerApp = {}; } } catch (error) { window.VideogPlayerApp = {}; } // アクセス解析用のデータを取得 let analyticsData = {}; $.ajax({ type: "GET", url: "//www.videog.jp/system/api/ajax/w6/get_videog_analytics_data.php", data: { hash: "xxxxxxx", // 集計する動画のhashを入力 } }).done(function( data ) { // データの追加。必要があればここに追加する。 data.aud_id = 1234; // オプション data.str1 = "other data 1"; // オプション data.str2 = "other data 2"; // オプション // 変数の設定 VideogPlayerApp.analyticsData = analyticsData = data; }).fail( function(jqXHR, textStatus, errorThrown) { console.error(errorThrown); console.error(jqXHR.responseText); }); // プレイヤー用のオプション設定 const options = { play_list: [ { sources: [ { file: 'https://sample.jp/media.mp4', }, ], }, ], }; // プレイヤーの初期化 const player = videogplayer('video_tag_id', options); // 変数の設定 VideogPlayerApp.player = player;
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Videog player & Videog analytics sample</title> <!-- CSS --> <link href="https://player-cdn.videog.jp/r/js/videog_player/2.0.5/videogplayer/videogplayer.min.css" rel="stylesheet"> </head> <body> <div id="video_tag_id"></div> <!-- jQuery --> <script src="https://player-cdn.videog.jp/r/js/jquery.min.js"></script> <!-- Lodash --> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script> <!-- videogPlayer --> <script src="https://player-cdn.videog.jp/r/js/videog_player/2.0.5/videogplayer/videogplayer.min.js" defer></script> <!-- index.js--> <script src="./index.js" defer></script> <!-- videogPlayerTrace --> <script src="https://player-cdn.videog.jp/r/js/videog_player_trace2/stable/main.js" defer></script> <!-- ashino_transmitter --> <script src="https://player-cdn.videog.jp/r/js/ashino_transmitter/stable/transmitter.js" defer></script> <!-- ashino_handler --> <script src="https://player-cdn.videog.jp/r/js/ashino_handler/stable/ashino_handler.js" defer></script> </body> </html>

results matching ""

    No results matching ""