メインコンテンツにスキップ

Ahrefs ウェブアナリティクスでの追跡イベント

ページビューやカスタムイベントを用いてサイト上の特定のユーザーアクションを追跡する方法を学びましょう。

対応者:Andrey Kirillov

追跡されたイベントにより、訪問者がウェブサイトで行う具体的なアクション、例えば、ボタンを押す、フォームを送信する、または他の重要なインタラクションを測定できます。

自動で追跡されるもの

Ahrefs ウェブアナリティクスは、次のイベントを自動的に追跡します:

  • 外部リンクのクリック - プロジェクトの範囲外に行く有効なhrefを持つリンクをユーザーがクリックしたときにトリガーされます。event.preventDefault()が呼び出されない限り適用されます。

  • フォーム送信 - 有効なactionを持つフォームが送信されるとトリガーされます。event.preventDefault()が呼び出されない限り適用されます。

これらのイベントはセットアップを必要とせず、デフォルトでレポートに表示されます。 サイトで重要な他の具体的なアクションを測定するために、自分自身で追跡イベントを追加することもできます。

追跡されたイベントの種類

2種類のイベントを追跡できます:

  • ページビューイベント – 特定のページ (例えば、サンクスページやチェックアウトページ) を訪問した際にトリガーされます。

  • カスタムイベント – サイト内の要素に対してのインタラクション、例えばボタンクリックやフォームの送信、モーダルのオープン時にトリガーされます。


ページビューイベント

ページビューイベントは、確認ページや完了ページなどの重要なページへのアクセスをトラッキングするのに役立ちます。 サイトに、アクション完了用の専用URL(/thank-you/checkout/success など)がある場合は、それらをトラッキング対象のイベントとして設定できます。

ページビューイベントの設定手順:

  1. プロジェクトのためのWeb Analyticsレポートを開きます。

  2. 追跡されたイベントセクションまでスクロールし、新しいイベントをクリックします。

  3. ページビューをタイプとして選び、追跡したいページパスを正確に入力します。

  4. 認識しやすくするためにイベントに名前を付け、作成をクリックします。


カスタムイベント

カスタムイベントは、ボタンのクリックやフォーム送信、新しいページを読み込まないその他の操作をトラッキングするのに便利です。 HTMLに専用のクラス名を追加することで設定できます。

最も簡単な設定方法は、HTMLに AhrefsAnalytics-event-EventName 形式のクラスを追加することです。

例:

<a class="AhrefsAnalytics-event-signup" href="#">サインアップ</a>

リンクがクリックされると、signup というイベントがトラッキングされます。

フォームの場合も同様です:

<form class="AhrefsAnalytics-event-signup" action="/submit">
...
</form>

フォームが送信されると、signup というカスタムイベントがトリガーされます。

レポートでカスタムイベントを表示するには、レポートにも追加する必要があります:

  1. プロジェクトのためのWeb Analyticsレポートを開きます。

  2. 追跡されたイベントセクションまでスクロールし、新しいイベントをクリックします。

  3. カスタムイベントをタイプとして選び、HTMLに使用した正確なイベント名を入力します。

  4. 認識しやすくするためにイベントに名前を付け、作成をクリックします。

JavaScriptでカスタムイベントをトリガーする

より精度の高いトラッキングを行うには、JavaScriptを使ってカスタムイベントを送信できます。 イベントをトリガーするタイミングを、より細かく制御できます

以下のスニペットで、その方法を示します:

if (window.AhrefsAnalytics != null) {
window.AhrefsAnalytics.sendEvent('signup');
}


イベントプロパティ(任意)

イベントプロパティを使うと、トラッキング対象のイベントに追加情報を付加できます。
同じイベントを、バリエーション、プラン、その他のディメンション別に分類したい場合に便利です。

例:

  • plan = standardduration = monthly のようなプロパティを持つ signup イベント

  • button = headervariant = B のようなプロパティを持つ cta_click イベント

  • category = shoessize = 42 のようなプロパティを持つ purchase イベント

これらのプロパティは、後ほどイベントプロパティレポートで確認できます。

注:プロパティ名と値は文字列として扱われます。 以下の属性やクラス名を使用する場合、プロパティ名にはダッシュ(-)を含められません。ダッシュは区切り文字として使用されるためです。

イベントプロパティを付加する方法

イベントにプロパティを付加する方法は、次の3つです:

  1. トラッキングスクリプトを使って、すべてのイベントにプロパティを追加する。

  2. CSSクラスを使って、単一のカスタムイベントにプロパティを追加する。

  3. JavaScript(JS API)を使ってプロパティを追加する。

1. すべてのイベントにプロパティを付加する(トラッキングスクリプト)

トラッキング用の <script> タグに data-prop-NAME="VALUE" 属性を追加することで、すべてのイベントにプロパティを付加できます:

<script
src="https://analytics.ahrefs.com/analytics.js"
data-key="YOUR_DATA_KEY"
data-prop-plan="standard"
data-prop-duration="monthly">
</script>

これにより、このページから送信されるすべてのイベントに plan = "standard"duration = "monthly" が追加されます。

注:NAME にダッシュ(-)を含めることはできません。

2. 1つのカスタムイベントにプロパティを付加する(CSSクラス)

イベントをトリガーする要素に特別なCSSクラス名を付けることで、特定のカスタムイベントにプロパティを付加できます。

例:plan プロパティ付きの signup イベントをトリガーするボタン:

<div
class="
AhrefsAnalytics-event-signup
AhrefsAnalytics-prop-plan-standard
">
Sign up for Standard
</div>

この例では:

  • AhrefsAnalytics-event-signup は、この要素がクリックされたときに signup イベントを送信するよう、Ahrefs ウェブアナリティクススクリプトに指示します。

  • AhrefsAnalytics-prop-plan-standard は、このイベントにのみプロパティ plan = "standard" を追加します。

注:AhrefsAnalytics-prop-… のプロパティ名にも ダッシュ(-)は使用できません。

3. JavaScript(JS API)でプロパティを付加する

JavaScriptでイベントをトリガーしている場合は、sendEvent の第2引数としてオブジェクトを渡すことでプロパティを付加できます:

if (window.AhrefsAnalytics != null) {
window.AhrefsAnalytics.sendEvent(
'signup',
{
props: {
plan: 'standard',
duration: 'monthly'
}
}
);
}

ログインユーザーやA/Bテストのバリアントなど、アプリの状態に基づいてプロパティを設定する必要がある場合に、最も柔軟な方法です。

レポートでイベントプロパティを使用する

イベントプロパティは自動的には表示されません。 送信を開始したら、レポートに追加する必要があります。

イベントプロパティレポート

プロパティ値別の内訳を確認したい場合に使用します。

  1. プロジェクトのWebアナリティクスレポートを開きます。

  2. イベントプロパティレポートに移動します。

  3. 新しいプロパティをクリックします。

  4. イベントプロパティを選択し、名前を付けて、作成をクリックします。

これにより、訪問者とイベントを各プロパティ値別に分けて確認できます。たとえば、登録をプラン別、ボタンのバリエーション別、国別に確認できます。

イベントプロパティによるフィルタリング

イベントプロパティを使用して、他のレポートをセグメント化することもできます。

  1. フィルターを追加をクリックし、イベントプロパティを選択します。

  2. フィルタリングに使用するプロパティと値(複数可)を選択します。

これにより、任意のレポートを、たとえばplan is standardvariant is Bのような条件で絞り込めます。 複数のプロパティフィルターを追加して、セグメントをさらに絞り込むこともできます。

こちらの回答で解決しましたか?