ランディングページの展開

Engage メディアプレーヤーは、お客様が所有するランディングページに配置されます。Engage メディアビューアは、ランディングページ内のウィンドウで、ピクセル寸法は CLM メディアプレーヤーよりも小さいです。Engage メディアプレーヤーのサイズは、お客様の既存のウェブサイトテンプレートに収まるように、通常 600 x 400 ピクセルです。そのため、固定サイズの CLM のコンテンツはそのままでは収まりません。これが、Engage コンテンツが CLM コンテンツとは個別に構築されることがある理由です。

CoBrowse ランディングページは全画面表示され、ページから離れる URL などのコンテンツ内容に依存しないものである必要があります。ビューアは、他のコンテンツに邪魔されたり、クリックするとプレゼンテーションから離れたりしない必要があります。CoBrowse メディアビューアは、フルサイズのランディングページであることが多く、コンテンツのデザインによって追加の面積を作り出します。

一般に、メディアビューアは、ピクセル幅とピクセル高さを 100% にして埋め込むことが推奨されます。そうすることで、ページサイズが変更されても DIV コンテナ内でビューアがスケールします。

ただし、コンテンツが固定サイズの場合、Veeva では、メディアビューアを、ピクセル幅とピクセル高さを固定して定義される DIV に埋め込むことが推奨されます。これにより、コンテンツが確実に固定サイズで表示されます。ユーザのブラウザがコンテンツよりも小さい場合は、スクロールしてコンテンツを表示させる必要があります。

Engage for Portals の設定 - ウェブサイトの設定

Engage メディアプレーヤーの埋め込み

Engage メディアプレーヤーをウェブサイトに埋め込むには:

1. CRM の Engage 管理ページからプレーヤーの埋め込みコードを選択します。
2. 高さと幅の属性を div 要素における割合で入力します。これにより、プレーヤーがブラウザのサイズに応じて変更されます。注：固定サイズに設定するには、属性をピクセルで入力してください。

Engage コンテンツの外観をミニサイトのように見せるには、他の HTML なしで Engage メディアプレーヤーをサイトに埋め込みます。プレーヤーは自動的にウェブサイトに表示され、ミニサイトのように動作します。

第三者 (Engage メディアプレーヤー) によってクッキーが使用されていることを通知するメッセージをユーザに表示するかどうかは、ホストウェブサイトの責任において判断されます。また、クッキーの使用により、変更する必要が生じる可能性があるプライバシーポリシーの文言を更新することは、お客様の責任により実施いただく必要があります。

HTML コンテンツマトリクス

Engage メディアプレーヤーの設定

プレーヤーは 2 つの埋め込みモードがあります:

• デフォルトプレゼンテーションの表示
• デフォルトコンテンツを常に表示したい、公開されているサイトにデフォルトプレゼンテーションを表示します。このページを再使用して、Approved Email 経由で配信された Engage コンテンツを表示することもできます。メール内にリンクされた Engage プレゼンテーションがデフォルトプレゼンテーションを上書きして置換します。
• 埋め込みコードは、サイトマネージャセクションの Engage コンテンツ管理者ページにあります。埋め込みコードはすべてのサイトに汎用性があります。
• デフォルトプレゼンテーションを表示しない。
• この設定では、公開されているサイトに Engage メディアプレーヤーを配置できますが、コンテンツは表示されず、デフォルトでプレーヤーは非表示で表示されません。Engage プレゼンテーションは、Approved Email または CoBrowse の案内からリンクされている場合にのみ表示されます。
• 埋め込みコードは、コンテンツ公開マネージャセクションの Engage コンテンツ管理者ページにあります。埋め込みコードは、すべてのサイト + マルチチャネルコンテンツ名 (プレゼンテーション) に一意です。この表の各行に対して一意の埋め込みコードがあり、「Engage」トークンには値があります。

以下の任意のパラメータを使用して、Engage メディアプレーヤーを設定することができます。

デフォルトプレゼンテーションを表示します。デフォルトでは、プレゼンテーションは表示されず、ビューアは非表示です。

デフォルトでビデオスライドが自動再生されます。ユーザが [再生] ボタンをクリックする必要はありません。デフォルトでは「OFF」で、ビデオは自動再生されません。

Engage メディアプレーヤーが Veeva CRM に接続できない場合にエラーを表示します。

Engage メディアプレーヤーを設定して CoBrowse でサポートする

Engage メディアプレーヤー埋め込みコードにパラメーターを追加するための設定オプションがいくつかあります。

CoBrowse の Engage パラメーターを NULL にするとデフォルトのプレゼンテーションは表示されません。

CoBrowse を使用する場合は、ページナビゲーションを除き、コンテンツの画面面積の大部分を使用する簡素な HTML ページに Engage メディアプレーヤーを埋め込むことを推奨します。

CoBrowse に 1 つの Engage メディアプレーヤーが実装されすべてのブランドに再利用されることが想定されていますが、これは企業としての一般ブランドを使用する場合や、ブランディングをしない場合を想定しています。お客様は、ブランドごとの CoBrowse サイトを選択することができるため、Engage メディアプレーヤーを多数のブランドサイトに埋め込むことができます。

CoBrowse を使用するサイトの関連コンテンツナビゲーションバーを有効化しないでください。関連コンテンツは CoBrowse プレゼンテーションでサポートされていません。

• チャット – デフォルトでは無効になっています。お客様は CoBrowse コントロールのチャットセクションを有効化することができます。チャットメッセージはすべてのプレゼンテーションとすべてのビューアに表示されます。プライベートチャットはありません。テキストは、Multichannel_Activity_Line_vod オブジェクトの User_Input_vod フィールドに書込まれます。インテグレーションユーザがこのフィールドに書き込み権限を持つようにします。
• パラメータ名 – chat

値 – True = ON、False = OFF

• ウェルカム/待機メッセージ – お客様は、プレゼンターが [プレゼンテーションの開始] ボタンを押す前にビューアに表示される「コール前」のメッセージと、プレゼンターの接続が切れた場合、または [プレゼンテーションの停止] ボタンをした場合にビューアに表示される「コール中」のメッセージを設定することができます。

• これらのメッセージは、Engage メディアプレーヤーの中央に設置されるよう Engage メディアプレーヤーの形式に従います
• pre_call が表示されると、プレーヤーはコンテンツを表示しません
• during_call メッセージが表示されるとスピナーアイコンも表示され、コンテンツが消えます

• 翻訳メッセージ – 以下のパラメータ/値および翻訳コードをサイト HTML に追加し、代わりのテキストを翻訳コードの引用符内に使用することで、CoBrowse の Engage メディアプレーヤーに使用されるすべてのラベルを翻訳することができます。ホストページごとに 1 つの翻訳のみサポートされます。

var translations = {

“connected”: "接続しました",

“autoplayBlocked”: "ここをクリックまたはタップしてビデオをご覧ください",

“disconnected”: "接続が解除されました",

“userArrived”: "{name} さんが到着しました",

“userLeft”: "{name} さんが退出しました",

“startPresentation”: "プレゼンテーションの開始",

“stopPresentation”: "プレゼンテーションの停止",

“attendees”: "参加者",

“presenter”: "プレゼンター",

“me”: "自分",

“chat”: "チャット",

“typeMessage”: "メッセージを入力してください"

"changePresentation": "変更",

"thumbnailBack": "戻る",

"thumbnailCancel": "キャンセル",

"allPresentations": "すべてのプレゼンテーション",

"slideCount": "{0} 枚のスライド",

"slideCounts": "{0} 枚のスライド",

"presentationCounts": "{0} 件のプレゼンテーション",

"search": "検索"

};

以下に、CoBrowse の翻訳およびチャットに対応した設定をした Engage 埋め込みコード設定を使用するための HTML ページの例を示します。

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

<script>

var tag = document.createElement('script');

tag.src = "//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage.js";

var engage = document.getElementById('engage');

engage.parentNode.insertBefore(tag, engage.nextSibling);

var translations = {

"connected": "已连接",

"disconnected": "接続が解除されました",

"userArrived": "{name} 已经到来",

"userLeft": "{name} 已经离开",

"chat": "交谈"

"startPresentation": "プレゼンテーションの開始",

"stopPresentation": "プレゼンテーションの停止",

"attendees": "参加者",

"presenter": "プレゼンター",

"me”: "自分",

"typeMessage": "メッセージを入力してください"

};

var player;

function onVeevaEngageReady() {

player = new VeevaEngage.initialize('engage', {

dns: '//cdnmc1.vod309.com/multichannel/release/engage/index.html',

mc: 'https://mc1.vod309.com/multichannel',

height: '100%',

width: '100%',

error: 'メディアプレーヤーが Veeva に接続できない場合にエラーメッセージが表示されます',

translations：encodeURIComponent(JSON.stringify(translations)),

chat：true,

pre_call: "開始しようとしています",

during_call: "参加しようとしています",

});

}

</script>

</body>

</html>

以下に、CoBrowse 機能もデフォルトのプレゼンテーションも不要な場合の、ビデオ自動再生に対応した簡単な Engage 埋め込みコード設定を使用するための HTML ページの例を示します。

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

<script>

var tag = document.createElement('script');

tag.src = '//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage.js';

var engage = document.getElementById('engage');

engage.parentNode.insertBefore(tag, engage.nextSibling);

var player;

function onVeevaEngageReady() {

player = new VeevaEngage.initialize('engage', {

dns: '//cdnmc1.vod309.com/multichannel/release/engage/index.html',

mc: 'https://mc1.vod309.com/multichannel',

autoplay: true,

height: '100%',

width: '100%',

error: 'メディアプレーヤーが Veeva に接続できない場合にエラーメッセージが表示されます',

});

}

</script>

</body>

</html>

以下に、デフォルトプレゼンテーション付きの簡単な Engage 埋め込みコードの設定を使用するための HTML ページの例を示します。

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

<script>

var tag = document.createElement('script');

tag.src = '//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage.js';

var engage = document.getElementById('engage');

engage.parentNode.insertBefore(tag, engage.nextSibling);

var player;

function onVeevaEngageReady() {

player = new VeevaEngage.initialize('engage', {

dns: '//cdnmc1.vod309.com/multichannel/release/engage/index.html',

mc: 'https://mc1.vod309.com/multichannel',

autoplay: true,

engage: '1XFDrucGEh98IuQaLnrjrtatpkGhkDEAJE%2FI%2FmJ2EaIkqe3qdmgUlwhdAmsyE%2BZnRTrpc0CMiUNRoyWEYYZGUIdHTKtKBaE4Jgg9Sjc02M2ob%2FExXzc7H2bYLOuXeEmCR5d10lFkpK5KYuQ9%2BpftonQWxhjnLtsrp5AIU6yLWAioX3lE42ffKkoY4YtBGZ0yOWgZfs2Klr7IJNSFXDqB9ttL48DqZfaIJHuSmm5JPF70IuF5zZmuaoRRRsuEk%2FQwRAzcWcY5ThkQZ%2FhEKCVHEg%3D%3D',

height: '100%',

width: '100%',

error: 'メディアプレーヤーが Veeva に接続できない場合にエラーメッセージが表示されます',

});

}

</script>

</body>

</html>

以下に、考えられるすべての埋め込みコード設定を使用するためのコード設定の例を示します。

<title>VerteoBiopharma</title>

<body>

<div id="engage" style="position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px;"></div>

<script>

var tag = document.createElement('script');

tag.src = "//cdnmc1.vod309.com/multichannel/veeva/js/engage/embed-engage-v1.js";

var engage = document.getElementById('engage');

engage.parentNode.insertBefore(tag, engage.nextSibling);

var translations = {

"connected": "已连接",

“disconnected”: "接続が解除されました",

"userArrived": "{name} 已经到来",

"userLeft": "{name} 已经离开",

"chat": "交谈"

“startPresentation”: "プレゼンテーションの開始",

“stopPresentation”: "プレゼンテーションの停止",

“attendees”: "参加者",

“presenter”: "プレゼンター",

“me”: "自分",

“typeMessage”: "メッセージを入力してください"

};

var player;

function onVeevaEngageReady() {

player = new VeevaEngage.initialize('engage', {

dns: 'https://mc1.vod309.com/multichannel/app/engage/index',

engage: '1XFDrucGEh98IuQaLnrjrtatpkGhkDEAJE%2FI%2FmJ2EaIkqe3qdmgUlwhdAmsyE%2BZnRTrpc0CMiUNRoyWEYYZGUIdHTKtKBaE4Jgg9Sjc02M2ob%2FExXzc7H2bYLOuXeEmCR5d10lFkpK5KYuQ9%2BpftonQWxhjnLtsrp5AIU6yLWAioX3lE42ffKkoY4YtBGZ0yOWgZfs2Klr7IJNSFXDqB9ttL48DqZfaIJHuSmm5JPF70IuF5zZmuaoRRRsuEk%2FQwRAzcWcY5ThkQZ%2FhEKCVHEg%3D%3D',

height: '100%',

width: '100%',

error: "エラーが発生しました！",

autoplay：false,

translations：encodeURIComponent(JSON.stringify(translations)),

chat：true,

pre_call: "開始しようとしています",

during_call: "参加しようとしています",

});

}

</script>

</body></html>