サポートに連絡する| システムステータス
ページコンテンツ

    Brightcove Playerサンプル：Google

    アナリティクスの高度な統合このトピックでは、Brightcove Playerを使用するときに、実行時に Google アナリティクスのトラッキング ID を動的に設定する方法を学習します。

    プレーヤーの例

    この例では、Brightcove プレーヤーを使用し、プログラムで Google アナリティクスを追加し、実行時にトラッキング ID を動的に割り当てます。この方法は、複数のGAアカウントを持っていますが、それぞれに固有のプレーヤーが必要ない場合に便利です。

    GA を動的に追加する場合、Video Cloud Studio に Google アナリティクスプラグインを追加しません。Studioで設定すると、プレーヤーのロード時に初期化され、設定を変更するには遅すぎます（オーバーライドすることはできません）。

    このアプローチのもう1つの利点は、API統合によってGAアカウントにフィールドが作成されないことです（Googleでは既存のフィールドの名前を変更できません）。

    trackerこの例の値を独自の Google アナリティクストレース ID に置き換えると、Google アナリティクスページにメトリックスが表示されます。

    Google Analytics home page
    Google アナリティクスのホームページ

    ペンを見るGoogle Analytics Advanced Integration Brightcove Learning Services（ @ bcls1969） オンCodePen。


    ソースコード

    上記のCodePenでHTML 、 CSS 、 JSボタンを選択することで、ソースコードを表示できます。または、GitHubの完全なソリューション。

    CodePen を使用する

    上記のCodePenを効果的に使用するためのヒントは次のとおりです。

    • [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
    • HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
    • この文書の後半で、アプリケーションで使用されるロジック、フロー、およびスタイリングについては、 Player/HTML 設定、アプリケーションフロー、およびアプリケーションのスタイリングで説明しますセクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
      1. CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
      2. CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
      3. 別のブラウザ/ブラウザタブで、プレーヤー/HTML設定、アプリケーションフローおよび/またはアプリケーションのスタイル設定セクションを表示します。これで、コードの説明に従い、同時にコードを表示できるようになります。

    開発シーケンス

    推奨される開発順序は次のとおりです。

    1. インページ埋め込みプレーヤーの実装を使用して、プレーヤー、プラグイン、CSS の機能をテストします (CSS が必要な場合)
    2. ローカルテストのためにプラグインのJavaScriptとCSSを別々のファイルに置く
    3. エラーを解決したら、プラグインコードとCSSをサーバーにデプロイします
    4. Studio を使用してプラグインと CSS をプレイヤーに追加する
    5. iframe 実装がより適していると判断した場合は、インページ埋め込みプレーヤーの実装を置き換えます (次のセクションに詳述)

    これらの手順の詳細については、ステップバイステップを参照してください。プラグイン開発ガイド

    iframe またはページ内埋め込み

    Brightcove Playerの拡張機能を開発する際には、コードが iframe またはページ内埋め込みの実装に最も適しているかどうかを判断する必要があります。ベストプラクティスの推奨事項は、iframe 実装で使用するプラグインを構築することです。iframe プレーヤーを使用する利点は次のとおりです。

    • 既存のJavaScriptおよび/またはCSSとの衝突はありません
    • 自動応答性
    • iframe は、ソーシャルメディアアプリ（または動画が他のアプリに「移動」する必要があるとき）での使用を容易にします。

    インページ埋め込みプレーヤーの統合はより複雑になりますが、その実装に関するコードを計画する場合もあります。一般化するために、このアプローチは、包含ページがプレイヤーと通信する必要がある場合に最適です。具体的には、いくつかの例を挙げます。

    • 含まれているページのコードは、プレイヤーイベントをリッスンして行動する必要があります
    • プレーヤーは包含ページのスタイルを使用します
    • iframe は、含まれているページからのリダイレクトのように、アプリロジックが失敗します。

    最終実装で iframe コードを使用しない場合でも、JavaScript 用のプラグインと CSS 用の別のファイルを使用して、ページ内埋め込みコードを使用できます。これにより、ロジックがカプセル化され、複数のプレーヤーで簡単に使用できます。

    API/プラグインリソースを使用

    API メソッド API イベント
    BCGA ()  

    プレーヤー/HTML構成

    このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

    プレーヤーの設定

    この例では、Brightcove Player を使用しています。

    1. Video Cloud Studio で、プレーヤーモジュールに移動します。新しいプレーヤーを作成します。

    2. 左側のナビゲーションで、[ サードパーティ分析] を展開します。[ Googleアナリティクス] オプションの場合は、[Google アナリティクスを有効にする ] を選択しないでください。このオプションはオフのままにします。

      Google Analytics in Studio
      スタジオでグーグルアナリティクス

    その他のHTML

    Brightcove Player の埋め込みコードの後にスクリプトが追加されました。

    1. Player の埋め込みコードの後に、ブライトコーブ Google アナリティクスプラグイン用の次のスクリプトを追加します。Video Cloud Studio で設定する代わりに、プラグインを手動でロードしています。 

          <script src="//players.brightcove.net/videojs-bc-ga/1/videojs-bc-ga.min.js"></script>

    アプリケーションフロー

    このアプリケーションの背後にある基本的なロジックは次のとおりです。

    • Google アナリティクスプラグインを設定せずにBrightcove Playerを作成する
    • Googleアナリティクスプラグインを手動で読み込む
    • トラッキングするパラメータやイベントなど、プラグインのオプションを定義します。
    • トラッキング ID を設定する
    • 動画を再生する

    1. プレーヤーを作成する

      すでに行っている場合は、プレーヤー/ HTML構成上記のセクションで、Studioでプレーヤーを作成します。

    2. プラグインをロードする

      を参照してくださいその他のHTML上記のセクションで、GoogleAnalyticsプラグインスクリプトを追加します。

    3. プラグインオプションの定義

      CodePenのJSセクションで、ラベルが付いているコードを見つけます： 

          // Set up the Google Analytics plugin options

      プレイヤーは BCGA () メソッドを呼び出してプラグインを初期化します。トラッキングするパラメータとイベントを設定できることに注意してください。 

      myPlayer.bcGa({
  "paramsToTrack": {
    "bcvideo_video_seconds_viewed": "dimension7",
    "bcvideo_range": "dimension8",
    "bcvideo_video_duration": "dimension9",
    "bcvideo_player": "dimension10",
    "bcvideo_account": "dimension11",
    "bcvideo_session": "dimension12",
    "bcvideo_platform_version": "dimension13"
  },
  "eventsToTrack": {
    "video_impression": "Video Impression",
    "play_request": "Play Request",
    "video_engagement": "Video Engagement",
    "ad_start": "Ad Start",
    "ad_end": "Ad End",
    "player_load": "Player Load",
    "error": "Error"
  },
  "tracker": "UA-150904906-1"
})
/*
	Two extra events can be added:
		video_view
		video_complete
*/

      イベントとディメンションの詳細については、「Google アナリティクスのイベントトラッキングの設定」を参照してください。

    4. トラッキング ID を設定する

      上記の JavaScript コードで、tracker値を Google アナリティクストラッキング ID に置き換えます。 

          "tracker": "your tracking id"

    5. HTML と JavaScript コードをウェブページに置き、動画を再生します。メトリックスは、

    プラグインコード

    通常、JavaScript を Brightcove Player プラグインに変換する場合は、公称の変更が必要です。必要な変更の 1 つは、ready()メソッドの標準使用をプラグインを定義するコードに置き換えることです。

    ここでは、プレーヤーで動作するJavaScriptコードへの非常に一般的に使用されるスタートです：

    videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

    最初の行を変更して、標準の構文を使用して Brightcove Player プラグインを起動します。

    videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

    前述のように、このドキュメントの対応する GitHub レポ: advanced-ga.js には、プラグインの JavaScript コードが表示されます。

    プレーヤーでプラグインを使用する

    プラグインの CSS ファイルと JavaScript ファイルをインターネットでアクセス可能な場所に保存したら、プレーヤーでプラグインを使用できます。Studio の PLAYERSモジュールでは、プレーヤーを選択し、[ プラグイン ] セクションで CSS ファイルと JavaScript ファイルに URL を追加し、名前を追加することもできます。オプションが必要な場合は、[Options] と [Options]

    ページの最終更新日30 Sep 2021