Brightcove Player 向け Google Tag Manager プラグイン

このトピックでは、Brightcove Player 向け Google Tag Manager（GTM）プラグインの使用方法について説明します。

概要

Google Tag Manager（GTM）を使用すると、Web サイト、動画コンテンツ、モバイル アプリの利用状況を追跡できます。まず、アセットにコンテナ タグを追加します。次に、Web ベースのユーザー インターフェースを使用して、ビジネス ルールに基づき、コンテナ タグに関連付けられた個々のタグをカスタマイズします。

タグの例を以下に示します：

  • Google Analytics 4 のトラッキングコード
  • Adwords リマーケティングおよび／またはコンバージョン トラッキング コード
  • カスタム HTML スクリプト

GTM を初めて使用する場合は、Google の Tag Manager の概要 ドキュメントを確認してください。

すでに Google Analytics、Adwords、DoubleClick を使用している場合、これらのツールと高い親和性を持つ Google Tag Manager の利用も推奨されます。GTM には、多数の変数およびトリガー オプションが用意されています。

ワークフロー

GTM プラグインは、まず eventsToTrack および trackerID の存在を確認し、その後 GTM を初期化します。次に、analytics-beacons または analytics_request イベントをリッスンすることで、すべてのプレーヤー イベントを監視します。各プレーヤーイベント発生時に、そのイベントがトラッキング対象イベントのリストに含まれているかを確認します。含まれている場合、プラグインはイベントに関連付けられたカスタム ディメンション（paramsToTrack にも含まれるもの）を取得します。GA プラグインで処理されるイベントや関連するカスタム ディメンションについては、イベント、ディメンション、変数の確認 を参照してください。

主な実装手順

概要レベルで、GTM を実装して使用するために必要な主な手順は以下のとおりです：

  1. GTM アカウントを作成し、コンテナを設定する（いずれも初期の GTM セットアップの一部です）
  2. Web ページに実装する必要があるコンテナ スニペットをコピー＆ペーストする。Google では、このコードを <head> タグ内、または <body> タグの直後に配置することを推奨しています
  3. Google Analytics または Brightcove Player 用のタグを作成する
  4. タグが正しく動作することを確認する
  5. タグを公開する

セットアップの詳細については、Google の Tag Manager の設定とインストール ドキュメントを参照してください。

Brightcove Player との連携

Brightcove の GTM プラグインを使用すると、Google Analytics ダッシュボードを通じて Brightcove Player のイベントをトラッキングできます。以下のプレーヤー イベントを追跡できます：

  • プレーヤーの読み込み
  • 動画インプレッション
  • 動画再生
  • 動画エンゲージメント
  • 再生リクエスト
  • ad_mode_begin、ad_mode_complete などの高度なプレーヤー イベント
  • 再生体験を妨げるエラー

タグ管理の用語

Google Tag Manager（GTM）を使用する際によく遭遇する一般的な用語を以下に示します。

用語 説明
コンテナ タグ管理システムのアカウントには、タグや変数をそれぞれ持つ複数のコンテナ（プロファイル）を作成できます。各コンテナには複数の環境を設定でき、通常は開発、ステージング、本番用に構成されます。
データ レイヤー データ レイヤーとは、Web ページのコード内に存在するデータの集合を指します。この JavaScript オブジェクトは、Web サイトからタグマネージャーのコンテナへ情報を渡すために使用されます。この情報を基に、変数の設定やタグ構成内のトリガーの起動を行うことができます。
イベント イベントは、レポートツールにデータを送信するために使用されるデータポイントです。 これらは、動画の読み込みや再生に関連しています。
タグ タグは、ユーザーの操作データを収集するために Web ページに配置されるコード スニペットです。タグ管理システムを使用することで、タグ ID とタグ イベント タイプを指定するだけでサイトにタグを追加でき、実装作業が簡素化されます。
タグ マーケットプレイス タグ マーケットプレイスのテンプレートは、タグをデプロイするためのコード スニペットを提供します。 これにより必要なコーディング知識は軽減されますが、正しく実装するためには JavaScript および HTML に関する基本的な知識が必要です。
トラッカー トラッカーは、データを収集・保存し、そのデータを Google Tag Manager に送信するオブジェクトです。
トリガー トリガーは、タグのコードをいつページに追加するかを指定するための条件です。これらはユーザーが定義する条件です。

要件

GTM プラグインを使用するには、以下の要件が必要です：

  • Brightcove Player v6.46.0 以降。
  • Google Tag Manager プラグインを使用するには、プレーヤー公開時に Videoタグ埋め込みコードを使用する必要があります。このプラグインでは、iFrame 埋め込みコードは使用しないでください。詳細については、Brightcove との統合 セクションを参照してください。

イベント、ディメンション、変数の確認

Brightcove Player からトラッキングしたいイベントおよびディメンションを選択します。

イベント

Brightcove Player の analytics-beacon イベントで使用される任意のイベント名を使用できますが、以下のイベントは GTM プラグイン内で特別な処理が行われます。

イベント 説明
player_load プレーヤーが読み込まれ、操作可能な状態になります
video_impression 動画がプレーヤーに読み込まれ、再生可能な状態になります
video_view 自動再生またはユーザー操作により、動画の再生が開始されます
video_engagement ユーザーが動画のタイムライン上の一定時間を視聴したことを示します。このイベントは動画エンゲージメントを追跡するためのハートビートとして機能し、ユーザーの操作内容や動画の長さに応じて、再生中に複数回送信される可能性があります。
play_request ユーザーが明示的に再生ボタンをクリックした場合、または自動再生シナリオにおいてプラットフォームが再生をトリガーした場合に、再生が開始されます
ad_mode_begin 再生プラットフォームから広告エージェントに制御が引き渡されます
ad_mode_complete 広告エージェントから再生プラットフォームへ制御が戻されます
error 再生体験を妨げる致命的なエラーが発生しました
video_complete 動画の再生が終了します


ディメンション

以下のディメンションは、すべてのイベント（error を除く）に対して送信されます。

パラメータ 説明
bcvideo_account Video Cloud Studio のアカウント ID
bcvideo_destination 再生場所
bcvideo_platform_version Brightcove Player のバージョン
bcvideo_player Brightcove Player ID
bcvideo_player_name Brightcove Player 名
bcvideo_session プレーヤーに関連付けられたセッション
bcvideo_video 動画 ID
bcvideo_video_name 動画名
bcvideo_tags 動画に関連付けられたタグの一覧

イベント固有のディメンション

これらのカスタム ディメンションは、特定のイベントで送信されます。

パラメータ 説明
bcvideo_video_playhead play_request および engagement イベントで送信されます
bcvideo_video_duration engagement イベントで送信されます
bcvideo_range engagement イベントで送信されます
bcvideo_video_percent_viewed engagement イベントで送信されます
bcvideo_video_seconds_viewed engagement イベントで送信されます
bcvideo_video_milestone engagement イベントで送信されます

GTM 変数

これらは、GTM 変数として作成できる Brightcove のパラメータです。

変数名 説明
account Brightcove アカウント ID
player プレーヤー ID
player_name プレーヤー名
platform_version プラットフォームのバージョン番号
session セッション識別子
video 動画 ID
video_name 動画名
range 視聴された秒数の範囲（StartSecond..EndSecond 形式）
seconds_viewed 視聴された秒数
duration 動画の長さ（秒）
percent_viewed 動画の視聴率（％）
error イベントに関連付けられたプラットフォーム固有のエラーコード
milestone 動画で達成されたマイルストーン（25%、50%、75%、100%）
playhead イベントがトリガーされた時点の動画内の再生位置
destination イベントの発生元となった URI

Google Tag Manager の設定

Google Tag Manager を設定するには、以下の手順に従ってください：

手順

  1. Tag Manager にアクセスし、アカウントを作成するか、既存のアカウントを使用します。新しいアカウントを作成する場合は、Create Account ボタンをクリックします。

    デフォルトでは、新しいアカウントを作成すると新しいコンテナが作成されます。各アカウント内で追加のコンテナを作成することもできます。

    Create account
    Create account

  2. アカウント名やコンテナ名など、新しいアカウント ページに必要な値を入力し、ターゲット プラットフォームを選択します。

    New account information
    New account information
  3. Create ボタンをクリックします。
  4. 利用規約に同意します。

トリガー、変数、タグの作成

トラッキングしたいすべての Brightcove イベントは、Google Tag Manager（GTM）でイベントタグとして作成する必要があります。GTM で作成したイベント ID は、その後 Players モジュール内で使用されます。これにより、Brightcove のイベントデータを GTM イベントに渡すことができます。

各イベント タグごとに、イベントを Google Analytics に送信するための GTM トリガーを作成する必要があります。次に、GTM の Variables タブで、各イベントに関連付けられたカスタム パラメータを作成します。

前提条件

まず、Google Analytics：GA4 Event タイプのタグを追加するために、Google Tag タイプのタグを 1 つ追加する必要があります。以下の手順に従って設定してください：

  1. Tag Type に Google Tag を追加します。
    google-tag
    google-tag
    Google tag found in this container というメッセージが表示されることを確認してください。この手順を省略すると、エラーメッセージが表示されます。
    google-tag-success
    google-tag-success

GTM へのトリガーの追加

トラッキングしたいイベントを決定したら、Google Tag Manager でトリガーを作成します。

Google Tag Manager でトリガーを作成するには、以下の手順に従ってください：

  1. Google Tag Manager アカウントにログインします

  2. 左側のナビゲーションで Triggers をクリックし、New ボタンをクリックします
    Create a new trigger
    Create a new trigger
  3. Trigger Configuration ボックスをクリックします
    Trigger Configuration Modal
    Trigger Configuration

  4. Trigger Type として Custom Event を選択します。

    Trigger configuration
    Trigger configuration
  5. Event name を入力します。イベント名は、以下の画像の例のような形式になります。
    Trigger configuration name
    Trigger configuration name

  6. トラッキングしたい各イベントごとにトリガーを作成します。

  7. GTM 上では、トリガーは以下のように表示されます：

    Triggers in GTM
    Triggers in GTM

GTM への変数の追加

Brightcove のパラメータには追加データが含まれており、イベントとともに送信されます。記録するすべての Brightcove パラメータは、Google Tag Manager で変数として作成する必要があります。パラメータ名はプレーヤー内で使用され、Brightcove のパラメータを Google Tag Manager の変数に渡すことができます。

Google Tag Manager で変数を作成するには、以下の手順に従ってください。

  1. Google Tag Manager アカウントにログインします

  2. 左側のナビゲーションで Variables をクリックします。

  3. User-Defined Variables セクションで、New ボタンをクリックします。

    Data Layer Variable
    Data Layer Variable
  4. Variable Configuration ボックスをクリックします。
    Variable Configuration Modal
    Variable Configuration

  5. variable type として Data Layer Variable を選択します。

    Data Layer Variable
    Data Layer Variable

  6. 設定内容は以下のとおりです：

    • Data Layer Variable Name - 変数名
    • Data Layer Version - バージョン 2

  7. 次に、Brightcove のパラメータを反映するために必要な変数を作成します。この場合、Data Layer Variable の名前は、GTM 変数内の customDimensions の後にある paramsToTrack に対するプレーヤーの JSON 設定と一致している必要があります。GTM 変数として作成できる Brightcove パラメータの一覧については、こちら を参照してください。 以下は例です：

    Account variable
    Account variable

  8. GTM では、ユーザー定義変数は以下のように表示されます：

    User-defined variables
    User-defined variables

GTM へのタグの追加

トラッキングしたい各イベントごとに、Google Tag Manager でタグを作成する必要があります。

Google Tag Manager でタグを作成するには、以下の手順に従ってください。

  1. Google Tag Manager アカウントにログインします

  2. 左側のナビゲーションで Tags をクリックし、New ボタンをクリックした後、Tag Configuration をクリックします。
    Create a new tag
    Create a new tag
  3. Tag Configuration ボックスをクリックします。
    Tag Configuration Modal
    Tag Configuration

  4. Google Analytics を選択します。

    Tag configuration

  5. Tag Type として Google Analytics: GA4 Event を選択します。

    Tag configuration
    Tag configuration

  6. タグの詳細を入力します：

    • Measurement ID - 「G-」で始まる ID を入力するか、変数を選択します。
    • Event Name - イベント名を指定します。
    • Web サイトに訪問者が入力したデータを活用して、より詳細な分析を行いたい場合は、user-provided data オプションを有効にしたままにします。

    任意の設定：

    • Parameters - Fields to Set で設定するパラメータを追加します。
    • Custom properties - User Properties で設定するカスタム ユーザー プロパティを追加します。

    以下は例です：

    Tag configuration
    Tag configuration
  7. Triggering ボックスをクリックします
    Triggering Modal
    Triggering

  8. タグを発火させるため、対応するトリガーを選択します。

    Tags in GTM
    Trigger

  9. GTM では、タグは以下のように表示されます：

    Tags in GTM
    Tags in GTM

Brightcove との統合

GTM を Brightcove Player と統合するには、Google Tag Manager プラグインをプレーヤーに追加します。

Studio を使用する場合

以下の手順では、Video Cloud Studio を使用してプラグインを読み込む方法を説明します。

  1. Video Cloud Studio で PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
  2. プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
  3. 左側のナビゲーションメニューで プラグイン をクリックします。

  4. 次に、プラグインの追加 ボタンをクリックし、Brightcove プラグイン を選択します。

    Add a Plugin button
    Add a Plugin button

  5. Brightcove プラグイン のドロップダウンを展開し、Google Tag Manager を選択します。

    Google Tag Manager plugin
    Google Tag Manager plugin

  6. トラッキングしたいイベントおよびカスタム ディメンションをプレーヤーに指定するため、JSON オブジェクトを作成し、オプション(JSON) テキストボックスに貼り付けます。

    フィールドの説明：

    • tracker - Google Tag Manager のトラッキング ID（GTM-XXXXXXX）
    • eventsToTrack - トラッキングしたいイベント
    • paramsToTrack - トラッキングしたいカスタムディメンション
    • milestones - デフォルトの 25%、50%、75%、100% からマイルストーンを変更するための整数配列。これは bcvideo_video_milestone をトラッキングする場合にのみ適用されます。

    以下は例です：

       { 
    "tracker":"your Google Tag Manager id", 
    "eventsToTrack": {
      "ad_mode_complete": "Ad Mode Complete",
      "ad_mode_begin": "Ad Mode Begin",
      "error": "Error",
      "play_request": "Play Request",
      "player_load": "Player Load",
      "video_complete": "Video Complete",
      "video_engagement": "Video Engagement", 
      "video_impression": "Video Impression", 
      "video_view": "Video View"
    },
    "paramsToTrack": {
      "bcvideo_video_duration": "duration",
      "bcvideo_error_code": "error",
      "bcvideo_account": "account",
      "bcvideo_session": "session",
      "bcvideo_video_milestone": "milestone", 
      "bcvideo_video_name": "video_name",
      "bcvideo_range": "range",
      "bcvideo_video_seconds_viewed": "seconds_viewed", 
      "bcvideo_player_name": "player_name",
      "bcvideo_video_percent_viewed": "percent_viewed", 
      "bcvideo_destination": "destination",
      "bcvideo_video_playhead": "playhead"
    }
  
   }

  7. 保存 ボタンをクリックします。これで、Google Tag Manager プラグインがプレーヤーのプラグイン一覧に追加されていることを確認できます。

    Save button
    Save button
  8. プレーヤーを公開するには、 公開と埋め込み > 変更の公開 を選択します。
  9. ダイアログを閉じるには、閉じる をクリックします。

  10. MEDIA モジュールに戻り、Google Tag Manager 用に更新したプレーヤーを使用して、動画またはプレイリストを公開します。プレーヤーを公開する際は、Videoタグ埋め込みコードを選択してください。

    Advanced embed code
    Advanced embed code

  11. プレーヤーが読み込まれ、ユーザーがプレーヤーを操作すると、指定したイベントおよびパラメータがトラッキングされます。

カスタム ディメンションの作成

カスタム ディメンションは、Google Analytics でユーザー自身が作成する指標です。Google Analytics の UI でカスタム ディメンションを作成するには、以下の手順に従ってください。

  1. Google Analytics アカウントにログインします。
  2. GA の画面で：
    1. 画面左下にある Admin（歯車アイコン）をクリックします。
    2. Property 列で Custom Definitions をクリックします。
      custom dimensions
  3. Create custom dimension をクリックします。

  4. 必要な情報を各フィールドに入力します：

    • Dimension name：パラメータの分かりやすい名前。
    • Scope：Brightcove GA プラグインでは常に Event を選択します。
    • Description：適切な説明を入力します。
    • Event parameter：直前に示したパラメータの中から 1 つを選択します。

Google Analytics UI の使用方法に関する詳細については、以下を参照してください：

カスタム ディメンションの表示

Google Analytics でカスタム ディメンションを表示するには、以下の手順に従ってください：

  1. Google Analytics にログインします。

  2. Admin をクリックします。

    Analytics admin
    Analytics admin

  3. Custom Definitions をクリックします。

    Custom dimensions
    Custom dimensions

  4. 作成したカスタムディメンションが表示されます。

    Dimensions and indices
    Dimensions