ログイン
  1. すべてのコレクション
  2. トラッキング設定
  3. トラッキング
  4. ページビューのJavaScriptトラッキング
Image

ページビューのJavaScriptトラッキング

FunnelFluxのビュートラッキングJavaScriptの使用方法

Avatar

によって Zeno

August 20, 2024

まず、グローバルスニペットには既にページビューイベントが含まれており、グローバルスニペットコードの後に実行されることに注意してください:

そのため、単にページビューを追跡することが目的である場合は、さらにコードを追加する必要はありません。

通常通り、ユニバーサルJSスニペットをページに含めるだけです - これは、あなたが管理するすべてのページで行うことを強くお勧めします。

手動でビューを追跡する

flux.track("view")メソッドを使用して、いつでもページビューイベントを送信できます。

完全な形では、JavaScriptのビュー追跡メソッドは次のとおりです:

flux.track("view", { 
  optional: 'arguments'
}, optionalCallbackFunction)

オプションの引数

ビューおよびコンバージョンイベントの追加の属性オーバーライドは、flux.trackの2番目の引数として送信できます。これらはオブジェクト内に配置する必要があります。

追跡属性

ページには、JSの前に埋め込まれたfluxDefaultsがあり、ページID、ファネルIDなどのデフォルトの追跡属性を設定する場合があります。

さらに、これらをビューイベントコードに直接渡すこともできます。ここでの値は、JSのデフォルト値をオーバーライドします。

追跡APIがこれらを使用する優先順位は次のとおりです:

イベントレベルの引数 > URLパラメータ > fluxDefaultsオブジェクト

したがって、イベントにプッシュされたコードが最も優先順位が高くなります。

利用可能な属性は次のとおりです:

  • p - ページID
  • f - ファネルID
  • n - ノードID
  • ts - トラフィックソースID
  • vid - 訪問者ID

訪問者IDは自動的に検証されるため、誤った値をプッシュすると無視されることに注意してください。

たとえば、特定のページIDを宣言してビューイベントをプッシュできます:

flux.track("view", { p: 'some_page_id' })

または、特定のファネルとノードIDを使用して:

flux.track("view", { 
  f: 'some_funnel_id', 
  n: 'some_node_id'
})

解決するトークン

次に、APIが返すトークンを渡すことができます。これは、常に返される{visitor}、{current-node-id}、{hit}のデフォルトに加えて行われます。

トークンは、resolveTokensという名前で渡す必要があり、すべてのトークンは配列内に存在し、FunnelFlux UI内で使用されるように中括弧で囲まれている必要があります。

例えば:

flux.track("view", { resolveTokens: ['{country-name}','{isp}','{browser}'] })

送信されると、APIからのレスポンスにこれらの項目が含まれます。その後、flux.get()メソッドを使用してアクセスできます。詳細はこちらのドキュメントをご覧ください。

これらのトークンを使用する場合は、コールバック関数またはイベントリスナーを使用して、返された後にのみ処理して使用することをお勧めします。

オプションのコールバック関数

ビューメソッドの3番目のオプション引数はコールバック関数です。

flux.track("view", {}, callbackFunctionName)

2番目の引数にオプションの属性が送信されない場合は、空のオブジェクトを含める必要があります - 省略しないでください。次のコードは機能しません:

flux.track("view", callbackFunctionName)

これは、関数を3番目ではなく2番目の引数として送信するためです。

これは、トラックイベントが実行される前にコード内に存在する限り、作成した任意の関数にすることができます。関数がまだ定義されていない状態で上記のようにイベントを発火させると、ビューが失敗します。

この関数は、イベントリスナーfluxViewの直後に呼び出されるため、シーケンスの観点からは両方が事実上同等です。どちらか適切な方を使用してください。

利用可能なイベントリスナーについては、他のメソッド/関数に関するドキュメントをご覧ください。

Google Tag Managerの使用

Google Tag Managerを使用する場合は、次のことをお勧めします:

  1. Universal FunnelFlux Pro JSなどという名前のタグを作成します。優先度を10に設定します
  2. ユニバーサルJSスニペットで、lumetricv2.min.jsのソースパス参照を見つけ、これをlumetricv2gtm.min.jsに変更します - GTMが一部のヘルパー関数に不満を持たないように、一部を削除した別のJSファイルを作成しました
  3. flux.trackビューおよびコンバージョンイベント用に別のタグを作成し、それに応じて発火させます。fluxがまだ利用できない場合、これらのイベントはキューに入るため、シーケンスを強制する必要はありません
  4. ページビューを設定して両方のタグを発火させます

URLマッチングがうまく機能しない単一の複雑なウェブサイトで追跡用のページIDを強制したい場合は、GTMでルックアップまたは正規表現テーブル変数を作成することをお勧めします。

その後、異なるURL/パスをFunnelFluxのページIDにマッピングし、ページビューイベントタグでp: {{gtm_variable}}を渡して、GTMがページID値を強制するようにできます。

シングルページアプリでのビューの追跡

グローバルスニペットとは独立してページビューイベントを手動で送信したい場合（シングルページアプリなど）、グローバルスニペットの後に追加されるデフォルトのflux.trackコードを削除できます。

ここから、先ほど説明したようにページビューイベントを手動で発火させることができます。

ページURLがビューイベントの開始前に変更される限り、APIは予想されるURLを受け取り、現在のファネル内のページと照合してノードIDを決定します。

必要に応じて、URLマッチングを上書きするために、各イベントで引数としてページID値をプッシュできます。

fluxオブジェクトがまだ存在する限り、グローバルスニペットを1回以上ロードする必要はありません。

スニペットには既にfluxが存在するかどうかのチェックが含まれており、存在する場合はスクリプトのダウンロードと再挿入を試みません。

APIリクエストとレスポンス

ビューイベントは以下のようにhttps://your-custom-domain.com/js/funnelにPOSTリクエストを送信します:

"funnel"とFetch/XHRリクエストを検索することで、このリクエストをフィルタリングできます。

成功した場合、レスポンスは次のようになります:

resolvedToken項目にはflux.get()メソッドで簡単にアクセスできます。

場合によってはエラーが発生したり、レスポンスが壊れる可能性があります。

追跡リクエストが成功したかどうかを確認するための簡単なチェックがいくつかあります:

  • fluxViewイベントがディスパッチされた（イベントリスナーを参照）
  • POSTレスポンスのerrorがnullである
  • POSTレスポンスのresolvedTokens["{current-node-id}"]に実際の値がある
IMAGE

© FunnelFlux (HK) Limited