技術情報

コンテンツ・トラッキングのためにコンテンツをマークアップするには？

2025年01月21日 コンテンツ追跡 レポート 使用方法

 

コンテンツをトラッキングすべきものとしてマークアップするには、2つの異なる方法がある。ひとつはHTMLによる方法で、各要素の値を手動で指定できるため、ラベリングの点で最も柔軟性があります。あるいは、コンテンツにカスタムCSSクラスを追加して、それぞれの値を要素自体から動的に引き出すこともできます。後者のオプションは、構造化されたHTMLデータをラベルに設定したり利用したりすることができないシステムのカスタム・ページ・テンプレートに最適です。

HTMLデータタグ（優先）

HTMLを使ってコンテンツ・ブロックを定義する利点は、3つのコンテンツ要素の値を正確に指定できることです。これにより、ラベルをより柔軟に、より具体的にすることができます。可能な限り、この方法を使用することをお勧めします。

HTML属性

  • data-track-content
  • data-content-name="NAME"
  • data-content-piece="PIECE"
  • data-content-target="TARGET"
  • data-content-ignoreinteraction

バナー例

<a href="https://example.com/" data-track-content="" data-content-name="Banner Ad" data-content-target="https://example.com/">
    <img src="http://matomo.local/wp-content/uploads/buy-stuff.png" alt="Buy More" class="wp-image-45" data-content-piece="Buy Stuff Ad">
</a>

値の例

開発者のコメントこの場合のtargetはhref属性を含むa要素に設定されるため、技術的にはdata-content-targetは必須ではありませんが、ここでは分かりやすくするために追加しています。target属性は、例えば、標準的なリンクの代わりにJavaScriptのonClickイベントを使用する場合に必要です。

CSSタグ

追跡するコンテンツブロックを定義するもう一つの方法は、CSSクラスを設定することである。CSSの利点は、異なるコンテンツピースを動的に表示するテンプレートを作成できることですが、名前に一貫性のある値や使用可能な値を渡すことができないため、代わりにネイティブの値から引き出すことができます。この方法は、カスタムクラスやCSSを追加することはできるが、HTMLを直接編集することができないコンテンツ管理システムにも役立ちます。

  • .matomoTrackContent
  • .matomoContentPiece
  • .matomoContentTarget
  • .matomoContentIgnoreInteraction

バナー例

<a href="https://example.com/" class="matomoTrackContent matomoContentTarget">
    <img src="https://matomo.org/wp-content/uploads/buy-stuff.png" alt="Buy More" class="matomoContentPiece">
</a>

値の例

その他のマークアップ例

もし、まだ様々なコンフィギュレーションの可能性に自信がないのであれば、開発者向けドキュメントにはさらに多くのコンフィギュレーションが含まれています。HTMLとCSSによるコンテンツ追跡マークアップの例.