【活用例】ライブ配信の視聴状況を取得する(Equipmedia)

1.Equipmediaとは

Jストリーム社の動画配信サービスです。
Synergy!ではカスタムイベント連携タグを利用して、 Equipmedia の視聴状況をSynergy!の行動履歴「カスタムイベント履歴」に格納することができます。

動画の視聴状況はEquipmedia側でもレポートを出力できますが、Synergy!と連携することで「10分以上視聴した人」「5分も視聴せず離脱した人」などを絞り込み、視聴してない人にリマインドする途中離脱した人に別の動画をお勧めするなどの施策を行えますので、ぜひご活用ください。

【サンプルフォームのURL】
https://ews.f.msgs.jp/webapp/form/12744_ews_621/index.do

サンプルフォームでは、Synergy!のフォーム(完了画面)でライブ配信用の画面を設置しています。※外部サイトでライブ配信したり、オンデマンド配信することもできます。

ライブ配信が開始されることで「アクセスURL」「カスタムイベント(キー)」「カスタムイベント(値)」が行動履歴「カスタムイベント履歴」に格納される仕組みです。※ライブ配信のため、配信中でないと画面やチャットが表示されません。
このページでは上記サンプルフォームの設定方法をご紹介します。

2.Equipmediaの準備

ライブ配信環境(カメラやマイクなどの機材、ネットワークなど)を用意し、Equipmediaの管理画面で下記を行ってください。
1. ライブ配信設定、エンコーダー設定などを行う
2. チャット設定で「チャットの自動リサイズ(レスポンシブデザイン)」に設定する
3. ライブ配信用のscriptタグを取得する
4. チャット用のiframeタグを取得する
※Equipmediaのご利用にはJストリーム社とのご契約が必要です。
※Equipmediaの設定方法はこちらをご覧ください。

3.Synergy!の設定

ここでは、フォームの完了画面に設置する方法を説明します。
まずは、フォームを作成し入力項目などを自由に設定してください。
フォームが作成できたら、Equipmediaで取得したタグを修正し、ライブ配信ページ(フォームの完了画面)に設置します。

以下はEquipmedia管理画面で取得したタグの一例です。
※ライブ配信ごとにパラメータは異なります。

<script type="text/javascript" charset="UTF-8" src="https://ssl-cache.stream.ne.jp/www50/○○○○○/jmc_pub/jmc_swf/liveplayer/t3/obj.js"></script>
<script type="text/javascript">
jstream_t3.PlayerFactoryLiveOBJ.create({
b:"○○○○○.eq.webcdn.stream.ne.jp/www50/○○○○○/jmc_pub/jmc_swf/liveplayer/",
c:"XXX",
lpid:"XXX",
s:{
hp:360,
il:"off",
pr:"0.5,0.7,1.2,1.5,2.0",
sn:"",
tg:"off",
wp:640
}});
</script>
<noscript>
<div>このコンテンツを見るためにはJavaScriptを有効にしてください。Please enable JavaScript to watch this content.</div>
</noscript>

これを手順に従って追記・修正してください。

(1)jstream_t3.PlayerFactoryLiveOBJ.create({ の前にvar eqPlayer1 = を追加してvar eqPlayer1 = jstream_t3.PlayerFactoryLiveOBJ.create({ に修正
追加した eqPlayer1 は、手順(4)で利用します。
(2)lpid:"XXX",の次行にo:{"synergyid":"(%%c1%%)"},を追加
※Equipmediaカスタム解析変数を利用しない場合は、上記タグの追加は不要です。
Equipmediaカスタム解析変数にSynergyIDを連携するため、Synergy!IDの埋め込みコマンドを設定します。これによりEquipmediaカスタム解析変数からエクスポートしたデータを、Synergy!へインポートすることができます。
(3)tg:"off",の次行にrp:"fit",を追加
※レスポンシブ対応の設定になり、上記タグの追加は任意です。
(4)}});</script>の間にEQLSyV1.addPlayer(eqPlayer1, {title: "ライブ配信テスト", lpid: 21});を追加
ライブ配信テストには指定したいライブ設定名を、21にはライブIDを設定してください。Synergy!の絞り込みで利用します。
ライブ設定名は、分かりやすい(半角・全角、大文字・小文字などを区別しやすい、他のライブ配信と混同しない)名称をつけてください。
※Equipmediaに登録したライブ設定名に合わせると管理しやすいです。
(5)先頭行に以下のタグを追加
■チャットを利用する場合

<style>
.eqlive{
width:100%;
position:relative;
padding-bottom:56.25%;
}
.eqchat{
width:100%;
min-height:600px;
border: none;
}
@media screen and (min-width: 1200px){
#title,#msg{
width:100%;
padding-left:30px;
padding-right:30px;
display:flex;
flex-wrap: nowrap;
}
.eqlive{
float:left;
width:70%;
padding-bottom:39.375%;
}
.eqchat{
width:30%;
}
}
</style>
<div class="eqlive">
<script src="/equipmedia/eqLive-sy.js"></script>

<style><div class="eqlive">はライブ配信とチャット欄のレスポンス対応になり、<script src="/equipmedia/eqLive-sy.js"></script>はファイルの中に、カスタムイベント連携タグが含まれています。
※横幅が1200px以上になると、チャット欄がライブ画像の右側に表示されます。

■チャットを利用しない場合

<div style="width:100%; position:relative; padding-bottom:56.25%;">
<script src="/equipmedia/eqLive-sy.js"></script>

<script src="/equipmedia/eqLive-sy.js"></script>はファイルの中に、カスタムイベント連携タグが含まれています。

(6)最終行に</div>を追加
※(5)で追加したdivの閉じタグを追加します。
(7)最終行にチャット用のiframeタグを追加し、style="width:100%;height:100%;border: none;"を削除してclass="eqchat"に置き換え
Webinerなどで利用する場合、視聴者からの質問をリアルタイムに受け付ける用途でチャットを利用します。チャットを利用しない場合は追加不要です。
以下はEquipmedia管理画面で取得したタグの一例です。
※ライブ配信ごとにパラメータが異なります。

<iframe src="https://ssl-cache.stream.ne.jp/www50/chat/jmc_pub/client.html?cid=NTk5Mw%3D%3D&lpid=MQ%3D%3D&b=http%3A%2F%2Feqg097lyvg.eq.webcdn.stream.ne.jp%2Fwww50%2Feqg097lyvg%2Fjmc_pub%2Fjmc_swf%2Fliveplayer%2F&em=both&icon1=1&icon2=1" style="width:100%;height:100%;border: none;" referrerpolicy="no-referrer-when-downgrade" ></iframe>
(8)フォームの「完了画面のメッセージ」欄に貼り付け
フォームの編集画面>画面設定枠の「完了画面」の【設定】をクリックし、貼り付けてください。

各種フォームの完了画面や、変更・解除フォームのログイン後(認証画面通過後)の画面で配信してください。
その他のフォーム画面に設置する場合はSynergy!で発行する「外部ID連携タグ」、外部のWebページに設置する場合は「トラッキングタグ」「外部ID連携タグ」の設置が必要です。

4.ライブ配信視聴状況の絞り込み

「3.Synergy!の設定」のフォームで取得した動画視聴における操作・状況はカスタムイベント履歴に保存されます。

操作・挙動 カスタムイベント(キー) カスタムイベント(値)の例
一時停止 equipmedia.pause 21,ライブ配信テスト,20201019135901
再生 equipmedia.play 21,ライブ配信テスト,20201019135007
再生中 equipmedia.viewing 21,ライブ配信テスト,s20201019135039,n20201019135109,t30(※)

(※)視聴期間:30,60,120,240秒を計測

オンデマンド配信で利用できる「equipmedia.first_play」と「equipmedia.complete」のカスタムイベント(キー)は、ライブ配信で利用できません。

■viewingの値に設定される時刻は、 yyyyMMddhhmmss の14桁の数字になり、視聴開始時間の先頭には s 、現在時間の先頭には n 、視聴累計時間の先頭には t が付与されます。

■Synergy!の絞り込みに利用できるのは、視聴累計時間の t のみです。

■動画を視聴した顧客のPCの時間が取得され、パラメーターで送信される仕組みです。
※視聴累計時間は、pause中でも累積されます。

視聴期間は、自動的に、30秒、60秒、120秒、240秒のタイミングで計測しますが、これをカスタマイズすることができます。

■ポイント通過型
たとえば、5分、10分、30分、60分で計測したい場合は、Synergy!の設定の手順(4)で
EQLSyV1.addPlayer(eqPlayer1, {title: "ライブ配信テスト", lpid: 21});
としている部分を以下のように設定します。
EQLSyV1.addPlayer(eqPlayer1, {title: "ライブ配信テスト", lpid: 21, points:[300, 600, 1800, 3600]});

■ビーコン型
一定時間の間隔でログを送出し続けます。
たとえば、60秒間隔でログを送出し続けたい場合は、Synergy!の設定の手順(4)で
EQLSyV1.addPlayer(eqPlayer1, {title: "ライブ配信テスト", lpid: 21});
としている部分を以下のように設定します。
EQLSyV1.addPlayer(eqPlayer1, {title: "ライブ配信テスト", lpid: 21, useBeacon: true});

5分(300秒)間隔にする場合は以下のように設定します。
EQLSyV1.addPlayer(eqPlayer1, {title: "ライブ配信テスト", lpid: 109, useBeacon: true, beaconInterval: 300});

たとえば、ライブID:21を再生した後、5分も視聴せず離脱した人に、別の動画をお勧めする場合の絞り込み条件はこのようになります。
※絞り込みはエクスポートやメール配信でご利用いただけます。

ライブIDは末尾にカンマをつけて「21,」「から始まる」と設定します。
※これはライブIDが121や211などを誤検索・誤配信しないための工夫です。
※「21,ライブ配信テスト」「等しい」と完全一致を利用する方法もあります。

視聴累計時間は先頭にカンマをつけて「,t300」「で終わる」と設定します。
※これはライブ設定名などで利用されている文言と誤検索・誤配信しないための工夫です。
※視聴開始時間の s や現在時間の n が指定できないため、完全一致は利用できません。

5.ご利用における注意点

・ここでご紹介しているJavaScriptは、フォーム機能のフォーム、外部のWebページを対象としていますデザインカスタマイズ機能を持たないアンケート機能等には適用できない場合があります。

・一部の端末を除き、基本的にフィーチャーフォン(ガラケー)ではJavaScriptが使用できません

JavaScriptの設置方法、書き方についてはサポートの対象外としております
こちらでは活用例のご紹介を目的としており、個別の案件に対応するためのJavaScriptの書き方/設置方法や動作についてのご質問は承りかねますのであらかじめご了承ください。

・お持ちのフォームにすでにJavaScriptを使ったデザインカスタマイズを行っている場合には、こちらに掲載したスクリプトがフォームの動作に影響を及ぼす可能性があります。
JavaScriptをお使いの場合には、十分に動作検証を行ってください

この記事は参考になりましたか?
参考になった参考にならなかった
読み込み中...
この記事への評価、ご指摘がございましたらご入力ください。
※ご入力内容への回答はできません。ご質問はフォームよりお問い合わせください。