代替資産追跡方法

Liferay Analytics Cloud は、それぞれのウィジェットを通じて、ブログ、ドキュメント、メディア、フォーム、Web コンテンツなどの組み込み Liferay DXP アセットを検出し、分析できます。 サイトにこれらのアセットを表示するカスタム フラグメントまたはウィジェットがあり、Analytics Cloud でそれらを追跡する場合は、HTML 属性を使用します。 Analytics Cloud の JavaScript プラグインは、これらの HTML 属性を検出し、ユーザーの操作を追跡し、それぞれのアセット タイプのダッシュボードにデータを表示します。 これらのタグを使用してカスタム アセットを追跡し、そのメトリックを他のアセット タイプのいずれかに含めることもできます。

アセットイベント

Analytics Cloud JavaScriptプラグインには、追跡できる以下のイベントが含まれています。

AssetClicked：ユーザーがアセット領域をクリック。 また、クリックされたタグの情報も掲載しています。

AssetDepthReached: アセットエリアのスクロールイベント。 また、ユーザーが到達したコンテンツの深さに関する情報（例えば、ユーザーがどれくらいブログ記事をスクロールしたか）も掲載されています。

AssetViewed: ユーザーがアセットを閲覧。

AssetDownloaded: ユーザーがアセットをダウンロードするリンクをクリック。

AssetSubmitted: アセットエリアでのフォーム送信。 これは、HTMLフォーム要素の下にサブミットの入力タイプを配置する必要があります。

必要なメタデータ

カスタム ウィジェットまたはフラグメントでトラッキングを有効にするには、次の HTML 属性を指定する必要があります。

名前	種類	説明
data-analytics-asset-action	文字列	イベントの種類 (プレビュー または ダウンロード)。 ドキュメントとメディアにのみ適用されます。
data-analytics-asset-id	文字列	各資産の一意の識別子。 文字列にはスペースを含めることはできません。
data-analytics-asset-title	文字列	資産のタイトル。
data-analytics-asset-type	文字列	アセットタイプ (ブログ、 ドキュメント、 フォーム、または Web コンテンツ)。

注

これらの属性は、Analytics Cloudにトラッキングさせたい個々のアセットに追加する必要があります。 ただし、スクリプトを使用して属性の値を入力し、各アセットに対してこのプロセスを自動化することができます。

ブログタイプの例

ブログを追跡するには、 data-analytics-asset-type="blog" をその他の必要な HTML タグとともに使用します。

<div
  data-analytics-asset-id="myBlogId"
  data-analytics-asset-title="Blog Title"
  data-analytics-asset-type="blog"
>
  <h3>Bringing Ideas To Life: A Look Into Creative Writing</h3>

  <p>
    This blog explores the ways in which we can use creativity to bring our
    ideas to life. We will be looking at techniques for how to inspire, generate
    and develop characters and plot lines for compelling stories. We will also
    look at real-life examples and discuss practical use cases to apply
    knowledge to real writing.
  </p>
</div>

ドキュメントとメディアタイプの例

ドキュメントとメディアを追跡するには、 data-analytics-asset-type="document" をその他の必要な HTML タグとともに使用します。

<div>
  <h3>List of the documents related to Analytics Cloud</h3>

  <ul>
    <li
      data-analytics-asset-action="preview"
      data-analytics-asset-id="myDocumentA"
      data-analytics-asset-title="Document A"
      data-analytics-asset-type="document"
    >
      <a data-analytics-asset-action="download" href="/document-a.pdf">Document A</a>
    </li>
    <li
      data-analytics-asset-action="preview"
      data-analytics-asset-id="myDocumentB"
      data-analytics-asset-title="Document B"
      data-analytics-asset-type="document"
    >
      <a data-analytics-asset-action="download" href="document-b.pdf">Document B</a>
    </li>
    <li
      data-analytics-asset-action="preview"
      data-analytics-asset-id="myDocumentC"
      data-analytics-asset-title="Document C"
      data-analytics-asset-type="document"
    >
      <a data-analytics-asset-action="download" href="document-c.pdf">Document C</a>
    </li>
  </ul>
</div>

フォームタイプの例

フォームを追跡するには、 data-analytics-asset-type="form" をその他の必要な HTML タグとともに使用します。

<form
  data-analytics-asset-id="myFormId"
  data-analytics-asset-title="Form Title"
  data-analytics-asset-type="form"
>
  <h3>Create new user</h3>

  <div class="content">
    <label for="name">Name</label>
    <input id="name" type="text" />
  </div>

  <div class="content">
    <label for="city">City</label>
    <input id="city" type="text" />
  </div>

  <div class="content">
    <label for="age">Age</label>
    <input id="age" type="text" />
  </div>

  <button type="submit">save</button>
</form>

Webコンテンツタイプの例

Web コンテンツを追跡するには、 data-analytics-asset-type="web-content" をその他の必要な HTML タグとともに使用します。

<div
  data-analytics-asset-id="myWebContentId"
  data-analytics-asset-title="Web Content Title"
  data-analytics-asset-type="web-content"
>
  <h3>Bringing Ideas To Life: A Look Into Creative Writing</h3>

  <p>
    This blog explores the ways in which we can use creativity to bring our
    ideas to life. We will be looking at techniques for how to inspire, generate
    and develop characters and plotlines for compelling stories. We will also
    look at real-life examples and discuss practical use cases to apply
    knowledge to real writing.
  </p>
</div>