oo

イベントの追跡

Liferay DXPのサイトページにJavaScriptのコードを追加することで、分析のためにイベントを追跡することができます。 追加したコードは、Analytic CloudのAPIと連動して、ユーザーがWebサイトで何をしているかを把握します。 これらのイベントは、 イベント分析 ツールを使用して分析できます。

そのためには、JavaScriptのコードで Analytics.track を使用し、イベント名と属性を定義します。

Field Description
event イベントの名前。 イベント分析を行う際に理解しやすいように、人間が理解できる名前にすることをお勧めします(例:「Add to Cart Click」など)。
attributes 追跡したいイベントのさまざまな属性(例:価格、商品名、数量など)。

例えば、ユーザーがどのようにショッピングカートにアイテムを追加しているかを追跡することができます。 これらのイベントを追跡するには、Webサイトの製品ページにJavaScriptコードを追加します。 イベントで追跡する価格、製品名、数量などの属性を選択します。 以下は簡単な例です:


// Add some event listener logic for when a user clicks the Add to Cart button

Analytics.track("Add to Cart Click",{
    'price': productPrice(),
    'productName': productName(),
    'quantity': productQuantity(),
});

属性に設定できるデータタイプキャストは以下の通りです:ブール値、日付、継続期間、数値、文字列。 Analytics Cloudは、その属性に対して収集された最初のデータに基づいて、自動的にデータタイプを検出してキャストしようとします。 必要に応じてAnalytics Cloudの設定ページにある イベント属性の定義 でタイプキャストを変更してください。

属性タイプ 説明
Boolean trueまたはfalse、大文字でも小文字でもOK
Date (Automatic Copy) ISO-8061形式(yyyy-MM-dd’T’HH:mm:ss.SSSX)。
継続期間 ミリ秒単位、非負
Number 千の位のセパレーターがなくても、10の位のセパレーターがあればOK
文字列 他のフォーマットが一致しない場合、Analytics Cloudは文字列を想定する

なお、指定した属性に加えて、すべてのイベントに自動的に関連付けられる グローバル属性 があります。

JavaScriptコードの追加

JavaScriptコードを追加して、イベントの追跡を有効にする方法がいくつかあります。 個々のページの変更、ページフラグメントの追加、またはカスタム実装の使用。

個々のページを変更する

JavaScriptコードを追加する最も簡単な方法は、個々のページを変更することです。 この時、ページにJavaScriptのコードを追加する機能を持つウィジェットページを使用するようにしてください。

  1. [プロダクトメニュー](Product Menu icon.)をクリックして、 [サイトビルダー] → [ページ] に移動します。

  2. 個々のページの [アクション] アイコン(Actions icon.)をクリックして、 [構成] をクリックします。

  3. JavaScriptコードをテキストボックスエリアの JavaScript に貼り付けます。 これは[詳細設定]タブの下にあります。

    JavaScriptコードをテキストボックスに貼り付けます。

  4. 保存] をクリックすると、ページでイベントを追跡する準備が整います。

詳しくは、 ページ単位での設定 を参照してください。

ページフラグメントの追加

Javascriptのコードを追加するもう一つの方法は、コンテントページに追加できるページフラグメントを作成することです。 ウェブサイトのどのページにも素早くフラグメントを追加することができるため、より高いスケーラビリティを得ることができます。

  1. [プロダクトメニュー](Product Menu icon.)をクリックして、 [デザイン] → [フラグメント] に移動します。

  2. フラグメントセットの プラス アイコン(Plus icon.)をクリックします。

  3. 追加] アイコン (Add icon.) をクリックして、新しいフラグメントを作成します。

  4. Code] タブをクリックし、JavaScriptフィールドにJavaScriptコードを貼り付けます。

    JavaScriptコードをJavaScriptフィールドに貼り付けます。

    なお、属性値をフェッチするコードや、 Analytics.track コードをトリガーするロジックを追加する必要がある場合もあります。

  5. 保存] をクリックすると、ページフラグメントが使えるようになります。

  6. フラグメントを追加したいコンテントページに移動します。 [編集] アイコン(Edit icon.)をクリックして、ページエディタを開きます。 先ほど作成したフラグメントを見つけ、自分のページにドラッグします。 [Publish] をクリックします。

詳細については、 フラグメントの開発 を参照してください。

カスタムインプリメンテーションの使用

最後に、JavaScriptコードをWebサイトに実装するために、独自の開発ツールやアプローチを使用することができます。