Livefyre とAdobe Analyticsおよび Dynamic Tag Manager(DTM) の使用

Livefyre アプリのデータを収集するためのAdobe Analyticsと Dynamic Tag Manager(DTM) の設定。

手順 1:Adobe Analyticsでのイベントの設定

Adobe Analytics Report Suite Manager で、Livefyre イベントを 1 つ以上のカスタム成功イベントにマッピングします。

Report Suite Manager の詳細については、「Report Suite Manager」を参照してください。

  1. 管理者ユーザーとしてAdobe Analyticsにログインします。
  2. Adobe Analytics Admin Report Suite Manager を開きます。
  3. 新しいレポートスイートを作成するか、既存のレポートスイートを選択します。
  4. 変更するレポートスイートをクリックし、Edit Settings > Conversion > Success Events に移動して、レポートスイートを編集します。
  5. Livefyre イベントを 1 つ以上のカスタム成功イベントにマッピングします。

手順 2:コンバージョン変数の設定

Livefyre コンバージョン変数 (eVar) をAdobe Analytics Admin Report Suite Manager でコンバージョン変数にマッピングします。 コンバージョン変数は、並べ替え関数のように機能し、Livefyre イベントから収集されたデータを識別する方法を決定します。

  1. Report Suite Manager で Edit Settings > Conversion > Conversion Variables をクリックします。

  2. 使用するカスタムコンバージョン変数 (eVar) を選択し、Livefyre コンバージョン変数にマッピングします。 Livefyre コンバージョン変数をカスタムコンバージョン変数にマッピングするには:

    • コンバージョン変数の有効化
    • コンバージョン変数の名前を設定します。
    • コンバージョン変数に型を指定します。
  3. カスタムコンバージョン変数を保存します。

手順 3:DTM を使用した Livefyre イベントでのレポートスイートの追加

タグを使用して Analytics と Livefyre イベントを統合する。 これをおこなうには、新しいプロパティとツールを作成し、Livefyre イベントを含む新しいレポートスイートをプロパティに追加します。 詳しくは、 タグの概要 を参照してください。

Livefyre イベントで設定したレポートスイート用に既にプロパティまたはツールが設定されている場合は、この手順を実行する必要はありません。

  1. DTM で、既存のプロパティを作成または編集します。

  2. 既存のAdobe Analyticsツールを作成または編集します。

  3. 既存のAdobe Analyticsツールが存在しない場合は、「Add a Tool」ボタンをクリックします。
    ツールに次のパラメータを設定します。

    • Tool TypeAdobe Analytics に設定します。
    • 有効にする Automatic Configuration.
    • 有効にする Authenticate via Marketing Cloud.
  4. Livefyre イベントを含むレポートスイートの名前を Report Suites フィールドに追加するか、または確認します。

手順 4:Analytics の処理を設定するページ型ルールの設定

すべてのデータを取り込むページ型ルールを設定します。 ページ型ルールを使用すると、ページの読み込み時にイベントを記録するルールにカスタム JavaScript を配置できます。

メモ

イベント型ルールやダイレクト型ルールは使用しないでください。

  1. DTM で、「Rules」タブを選択します。

  2. クリック Page Load Rules.

  3. Create New Rule ボタンをクリックします。

  4. Plus ボタンをクリックして、Conditions セクションを開きます。

  5. ルールをトリガーします。 ルールを遅延または非同期で実装する場合は、 DOM Ready または Onload​トリガータイプを選択します。

  6. (オプション)追加のパラメーターを追加して、Livefyre Apps を表示するページを制限します。 追加の設定オプションについて詳しくは、 タグの概要 を参照してください。

  7. Javascript/ Third Party Tags の下の「Non-sequential」タブをクリックし、「Add New Script」をクリックします。

  8. スクリプトタイプとして Sequential HTML を選択します。

  9. 次のスクリプトをコードエディターに追加して、Save Code をクリックします。

    次のスクリプトは、Livefyre JavaScript の読み込み後に livefyre_analytics 直接呼び出しルールを呼び出します。 次のスクリプトの例では、400 ミリ秒ごとに livefyre.analytics がページ上にあるかどうかを確認します。 ページが読み込まれると、 livefyre.analytics はトラッキング情報を送信します。

    /**
    * Poll for Livefyre.analytics object to exist since it gets loaded via the
    * Livefyre.js JavaScript file. Depending on the timing, this could already
    * exist or need a little time.
    */
    function pollForAnalytics() {
    if (Livefyre.analytics) {
      _satellite.track('livefyre_analytics');
        return true;
      }
      setTimeout(pollForAnalytics, 400);
    }
    setTimeout(pollForAnalytics, 400);
    
  10. クリック Save Code.

  11. クリック Save Rule.

手順 5:Livefyre 用のAdobe Analyticsマッピング設定を構築するための直接呼び出しルールの作成

カスタムイベント、DTM 内のAdobe Analytics UI フィールド、データ要素を使用して DTM で Livefyre を実装する方法は他にもあります。 このドキュメントでは、カスタム JavaScript を使用して同じ効果を実現します。

  1. DTM で、「ルール」タブを選択し、「直接呼び出しルール」をクリックします。

  2. 新規ルールを作成」ボタンをクリックします。

  3. 新しいルールに Livefyre Analytics と名前を付けます。

  4. 条件 設定領域を展開します。

  5. 文字列」フィールドに、livefyre_analytics と入力します。

  6. 「 Javascript /サードパーティタグ」セクションを展開し、「新しいスクリプトを追加 」ボタンをクリックします。

  7. Livefyre Analytics Configタグ名 入力ボックスに入力します。

  8. 非順次 JavaScript」を選択します。

  9. 次の Livefyre 設定コードをコードエディターに入力し、「コードを保存」ボタンをクリックします。

    var s = _satellite.getToolsByType('sc')[0].getS();
    
    var evarMap = {
      appId: 'eVar81',
      appType: 'eVar82'
    };
    
    var eventMap = {
      FlagCancel: 'event82',
      FlagClick: 'event82',
      FlagDisagree: 'event82',
      FlagOffensive: 'event82',
      FlagOffTopic: 'event82',
      FlagSpam: 'event82',
      Like: 'event82',
      Load: 'event81',
      RequestMore: 'event82',
      ShareButtonClick: 'event82',
      ShareFacebook: 'event82',
      ShareOnPostClick: 'event82',
      ShareTwitter: 'event82',
      ShareURL: 'event82',
      SortStream: 'event82',
      TwitterLikeClick: 'event82',
      TwitterReplyClick: 'event82',
      TwitterRetweetClick: 'event82',
      TwitterUserFollow: 'event82'
    };
    
     function trackLivefyreEvent(data) {
      var event = eventMap[data.type];
      console.log('Track:', data.type, event);
    
      if (!event) {
        console.warn(data.type, 'is not mapped   to an event in AA');
        return;
      }
      var vars = ['events'];
      switch (event) {
        case 'event82': s.eVar83 = data.type;
          vars.push('eVar83');
          break;
        default:
      }
        ['generator', 'evars'].forEach(function (type) {
        var obj = data[type];
        for (var d in obj) {
          if (obj.hasOwnProperty(d) && evarMap[d]) {
            s[evarMap[d]] = obj[d];
            vars.push(evarMap[d]);
          }
        }
      });
      s.linkTrackVars = vars.join(',');
      s.linkTrackEvents = event;
      s.events = event;
    
      console.log('linkTrackVars:',  s.linkTrackVars);
      console.log('linkTrackEvents:',  s.linkTrackEvents);
      console.log('events:', s.events);
      s.tl();
      }
      ]
    
      /**
    
    • Livefyre のすべての Analytics イベントに対して Analytics ハンドラーを追加します。 イベントごとに、データをグローバルオブジェクトに設定し、イベントをディスパッチします。
    */
    function addAnalyticsHandler() {
      Livefyre.analytics.addHandler(function (events) {
        (events || []).forEach(function (data) {
          console.log('Event handled:', data.type);
          trackLivefyreEvent(data);
        });
      });
    }
    addAnalyticsHandler();
    
  10. ルールを保存」をクリックします。

手順 6:ページ型ルールの変更の承認

  1. Approvals タブに移動します。
  2. クリック Approve.
  3. Yes, approve をクリックして、承認を確定します。
  4. 移動 Overview > Publish Queue.
  5. 発行するルールを選択します。
  6. クリック Publish Selected.
  7. Publish をクリックして、公開することを確認します。

script

以下のサンプルコードは、特定の eVar を使用可能な Livefyre eVar にマッピングします。 Livefyre コンバージョン変数 (eVar) の名前(例えば appId)は、Report Suite Manager で設定した名前(例えば、eVar81)にマッピングされます。 このスクリプト内の eVar 名をカスタムコンバージョン変数に変更します。

var s = _satellite.getToolsByType`('sc')[0]`.getS();
var evarMap = {
  appId: 'eVar81',
  appType: 'eVar82'
};

次のサンプルコードは、Report Suite Manager で設定した特定のイベントと、使用可能な Livefyre イベントを対応付けます。 この例では、 event82 は、どの種類のユーザーインタラクションイベント(コンテンツの「いいね!」や共有など)を区別することなく、任意のユーザーインタラクションイベントとして設定されます。 これは、すべてのユーザーインタラクション情報を 1 つのブロックに記録する効率的な方法です。 また、DTM Analytics UI のイベントを、データ要素の参照先にマッピングすることもできます。

var eventMap = {
  FlagCancel: 'event82',
  FlagClick: 'event82',
  FlagDisagree: 'event82',
  FlagOffensive: 'event82',
  FlagOffTopic: 'event82',
  FlagSpam: 'event82',
  Like: 'event82',
  Load: 'event81',
  RequestMore: 'event82',
  ShareButtonClick: 'event82',
  ShareFacebook: 'event82',
  ShareOnPostClick: 'event82',
  ShareTwitter: 'event82',
  ShareURL: 'event82',
  SortStream: 'event82',
  TwitterLikeClick: 'event82',
  TwitterReplyClick: 'event82',
  TwitterRetweetClick: 'event82',
  TwitterUserFollow: 'event82'
};

次のサンプルでは、このリストにイベントがない場合は何も実行しないことを示しています。 このコードセクションを変更する必要はありません。

function trackLivefyreEvent(data) {
  var event = eventMap[data.type];
  console.log('Track:', data.type, event);

  if (!event) {
    console.warn(data.type, 'is not mapped to an event in AA');
    return;
  }

次のコードは、event82 が記録するイベントタイプを区別します。 コンバージョン変数 eVar83 は、ユーザーインタラクションのタイプを記録し、スクリプトは、ユーザーインタラクションデータをタイプ別に分けるように eVar83 を設定します。 したがって、eVar83 では、記録されたデータを特定のタイプのユーザーインタラクションに分割できます。

  var vars = ['events'];
  switch (event) {
    case 'event82': s.eVar83 = data.type;
      vars.push('eVar83');
      break;
    default:
  }

  ['generator', 'evars'].forEach(function (type) {
    var obj = data[type];
    for (var d in obj) {
      if (obj.hasOwnProperty(d) && evarMap[d]) {
        s[evarMap[d]] = obj[d];
        vars.push(evarMap[d]);
      }
    }
  });

  s.linkTrackVars = vars.join(',');
  s.linkTrackEvents = event;
  s.events = event;

  console.log('linkTrackVars:', s.linkTrackVars);
  console.log('linkTrackEvents:', s.linkTrackEvents);
  console.log('events:', s.events);

  s.tl();
}

次のコードサンプルでは、発生するすべてのイベントをリッスンするハンドラーを追加しています。 読み込み時にページ型ルールを使用し、はイベントが存在するのを待ってから、アプリ内のすべてのイベントに対してハンドラーを設定して追跡します。 このコードを変更する必要はありません。

/**
* Adds an analytics handler for all analytics events from Livefyre. For each event, it sets the data on a global object and then dispatches the event.
*/
function addAnalyticsHandler() {
  Livefyre.analytics.addHandler(function (events) {
    (events || []).forEach(function (data) {
      console.log('Event handled:', data.type);
      trackLivefyreEvent(data);
    });
  });
}

詳細情報

このページで取り上げるトピックの詳細は、次を参照してください。

このページ