トリガーとルール
トリガーは、ツールがアクションを開始する条件を定義します。ほとんどの場合、あなたの目的は、ビジネスに関連する特定のウェブサイトイベントに一致するトリガーを作成することです。トリガーは、ボタンを選択した後や特定のページを読み込んだ後など、ウェブサイトで発生したイベントに基づくことができます。
これらのウェブサイトイベントは、さまざまな方法でCloudflare Zarazに渡すことができます。Web APIのTrackメソッドやdataLayerコールを使用できます。あるいは、ウェブサイトでのイベントを追跡するためにコードを書くことを望まない場合は、クリックリスナーやフォーム送信などのさまざまなタイプのルールを使用して、ブラウザ側のウェブサイトイベントをリッスンするようにトリガーを設定できます。
トリガーの正確な構成は、選択したルールのタイプによって変わります。
Zarazは、変数名に入力した変数を一致文字列の下のテキストと一致させます。サポートされている変数の完全なリストについては、プロパティリファレンスを参照してください。
トリガーの例: 一致 zaraz.track("purchase")
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | イベント名 | 等しい | purchase |
ページプロパティ、クッキー、デバイスプロパティ、またはその他のカテゴリからの変数を使用して一致ルールを持つトリガーを作成する場合、通常はPageviewと一致する2番目のルールを追加したいと思うでしょう。そうしないと、トリガーはこのページで発生する他のすべてのイベントにも有効になります。トリガーに複数の条件を追加する方法については、トリガーを作成を参照してください。
トリガーの例: /blog以下のすべてのページ
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | URLパス名 | で始まる | /blog |
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | イベント名 | 等しい | Pageview |
トリガーの例: ログインしているすべてのユーザー
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | クッキー: 名前: isLoggedIn | 等しい | true |
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | イベント名 | 等しい | Pageview |
一致ルールを使用する際に使用できる変数についての詳細は、プロパティリファレンスを参照してください。
ウェブページでのクリックを追跡します。CSSセレクターやXPath式を使用してクリックリスナーを設定できます。アクションを待つ（ミリ秒単位）は、Zarazに指定された時間だけページの変更を防ぐよう指示します。これにより、クリックリスナーによってトリガーされたすべてのリクエストが目的地に到達します。
CSSセレクターのトリガー例:
| ルールタイプ | タイプ | セレクター | アクションを待つ |
|---|---|---|---|
| クリックリスナー | CSS | #my-button | 500 |
ウェブページのパフォーマンスを向上させるために、クリックリスナーを特定のURLに制限することができます。一致ルールと組み合わせることで、特定のページでのボタンクリックを追跡するために、次のルールをトリガーに設定できます。
| ルールタイプ | タイプ | セレクター | アクションを待つ |
|---|---|---|---|
| クリックリスナー | CSS | #myButton | 500 |
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | URLパス名 | 等しい | /my-page-path |
CSSセレクターを使用して要素のリンクを追跡する必要がある場合、たとえばクリック可能なボタンの場合は、<a>タグのhref属性のリスナーを作成する必要があります。
| ルールタイプ | タイプ | セレクター | アクションを待つ |
|---|---|---|---|
| クリックリスナー | CSS | a[href$='/#my-css-selector'] | 500 |
複数のルールをトリガーに追加する方法については、トリガーを作成を参照してください。
XPathのトリガー例:
| ルールタイプ | タイプ | セレクター | アクションを待つ |
|---|---|---|---|
| クリックリスナー | XPath | /html/body//*[contains(text(), 'Add To Cart')] | 500 |
CSSセレクターが画面に表示されるとアクションをトリガーします。
| ルールタイプ | CSSセレクター |
|---|---|
| 要素の可視性 | #my-id |
ユーザーが予め定められたピクセル数をスクロールするとアクションをトリガーします。これは固定のピクセル数または画面の割合である可能性があります。
ピクセルの例
| ルールタイプ | CSSセレクター |
|---|---|
| スクロール深度 | 100px |
画面の割合の例
| ルールタイプ | CSSセレクター |
|---|---|
| スクロール深度 | 45% |
CSSセレクターを使用してフォーム送信を追跡します。バリデートトグルボタンを選択すると、フォームにバリデーションエラーがない場合にのみトリガーが発火します。
トリガーの例:
| ルールタイプ | CSSセレクター | バリデート |
|---|---|---|
| フォーム送信 | #my-form | トグルオンまたはオフ |
ウェブページのパフォーマンスを向上させるために、特定のURLにフォーム送信トリガーを制限することができます。一致ルールと組み合わせることで、特定のページでのフォームを追跡するために、次のルールをトリガーに設定できます。
| ルールタイプ | CSSセレクター | バリデート |
|---|---|---|
| フォーム送信 | #my-form | トグルオンまたはオフ |
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | URLパス名 | 等しい | /my-page-path |
複数の条件をトリガーに追加する方法については、トリガーを作成を参照してください。
各間隔の後にトリガーを発火させるタイマーを設定します。間隔時間をミリ秒単位で設定します。制限には、間隔が実行される回数を指定し、トリガーを発火させます。制限を指定しない場合、タイマーはページが表示されている限り繰り返されます。
トリガーの例:
| ルールタイプ | 間隔 | 制限 |
|---|---|---|
| タイマー | 5000 | 1 |
上記のタイマーは、5秒後に1回発火します。ウェブページのパフォーマンスを向上させるために、特定のURLにタイマートリガーを制限することができます。一致ルールと組み合わせることで、特定のページでタイマーを設定するために、次のルールをトリガーに設定できます。
| ルールタイプ | 間隔 | 制限 |
|---|---|---|
| タイマー | 5000 | 1 |
| ルールタイプ | 変数名 | 一致操作 | 一致文字列 |
|---|---|---|---|
| 一致ルール | URLパス名 | 等しい | /my-page-path |
複数の条件をトリガーに追加する方法については、トリガーを作成を参照してください。