先週、オールスターの Adob​​e Dynamic Tag Management チームは、DTM のイベント ベースのルールにいくつかの魅力的な新機能を追加しました。 使用できるイベント ベースのルールには、2 つの新しいイベント タイプがあります。

1. カスタム
2. pushState または hashchange

各イベント タイプの詳細については、以下のセクションをお読みください。

イベントベースのルール: カスタム

まず、カスタム イベントを定義しましょう。 DTM の他のイベント ベースのルールの例をいくつか見てみましょう。 以下は、イベント ベースのルールのイベント タイプのリストです。

イベント ベースのルールを作成する場合、特定のデフォルト イベントに対して設定できます。 各ブラウザー (Internet Explorer も含む) には、特定のアクションに対してトリガーできる既定のイベントがあります。 簡単なもののいくつかは次のとおりです。

• マウスクリック
• マウス オーバー (ページ上の何かにカーソルを合わせる)
• フォーム フィールド フォーカス (カーソルがフォーム フィールド内に入ります)
• フォーム フィールドがぼやける (カーソルがフォーム フィールドから離れる)
• フォーム送信
• 等

これらはすべて理にかなっています。 これらは、私たちがウェブ上で毎日行っていることです。 何かを追跡する必要がある場合がありますが、正しく行うことはほとんど不可能です。 これが、私が JavaScript イベントの使用を好む理由です。 イベントを電波と考えてください。 それらは誰にでも聞こえるように放送されますが、聞くには適切な周波数に合わせなければなりません。 放送しても誰も聞いていなくても、大したことではありません (ラジオの広告主には言わないでください)。 イベントについても同様です。イベントをトリガーすることができ、それをリッスンしているものがない場合、問題が発生したり、エラーがスローされたりすることはありません。 また、発生しないイベントをリッスンしても、問題が発生したり、エラーがスローされたりすることはありません。

何でこれが大切ですか？ アクションを追跡する古い方法の 1 つは、カスタム JavaScript 関数を作成して呼び出すか、タグ管理システムまたは他のコード ベースに固有の特定のコード セットを実装することでした。 しかし、その関数が何らかの形で削除されたり、名前が変更されたりした場合はどうなるでしょうか? サイトを壊す可能性のある JavaScript エラーが表示されることがあります。 イベントはその問題を解決します。

DTM の直接呼び出しルールに精通している場合は、「なぜ直接呼び出しルールを使用しないのか?」と疑問に思うかもしれません。 有効な質問です。 問題は、直接呼び出しルールが DTM への依存関係を構築することです。 私が開発者で、誰かが私のコードに _satellite.track を参照するコードをたくさん入れるように言ったら、私はそれに疑問を呈し、おそらくノーと言うでしょう! 代わりに、依存関係のないイベントを使用できます。

イベントをリッスンできるようにするには、まずイベントをトリガーする必要があります。 イベントは、開発者がサイトのコードで定義する必要があります。 いつ、どこで使用するかを特定するのは少し難しいかもしれませんが、簡単な経験則として、追跡したいもので、定義済みの DTM イベント タイプで追跡できない場合は、カスタム イベントを使用します。 これを行う方法については、Mozilla から良い情報を見つけることができます。 2 つの基本的なイベント タイプがあります。

• イベント – イベントに関する追加データを送信せずに、何かが発生したことをトリガーします
• CustomEvent – イベントにデータを追加します

データを追加できるカスタム イベントの例を使用します。 ショッピング カートがあり、カートに何かを追加するときに AJAX を使用するとします。 これは、新しいページがロードされないことを意味しますが、代わりに、アイテムがカートに追加されたことを知らせるポップアップまたはメッセージが表示される場合があります。 これが発生した場合、何が追加されたかを正確に伝えるカスタム イベントを作成できます。

 var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice}); document.getElementById('minicart').dispatchEvent(addToCart);

上記のコードでは、「data」という名前のオブジェクトからデータを参照していることがわかります。 カスタムの「詳細」データをオブジェクトとして定義しています。これは、イベントをリッスンするときに参照できます。 イベントを作成した後、特定の要素 (この場合は、ID が「minicart」のページ上の要素) でイベントをトリガーします。 これで、聞きたい人のためにブロードキャストするカスタム イベントができました。

次に、DTM でリッスンするルールを構成します。

1. 新しいイベント ベースのルールを追加する
2. 名前を付けてください
3. イベントタイプ「カスタム」を選択し、「addToCart」として定義したイベント名を入力します
   
4. このイベントを持つタグまたは要素を定義します。 CSS セレクターを使用すると、これは「#minicart」になります。
   
5. ルールを構成します。 これが涼しくなるところです。 イベントで提供された「ディティール」は、そのままオブジェとしても使えます。 ありがとうアドビ！ ここでは、必要なデータを含む Google アナリティクス イベントを送信しています。 %event.detail% を使用してデータを参照できます。オブジェクトがある場合は、%event.detail.<<name>>% として参照できます。 以下の例を参照してください。
   
   私はおそらくこのようなイベントを送信することはありませんが、使用方法の要点は理解できます。 カスタム コードで使用する必要がある場合、たとえば Adob​​e Analytics ツールの場合、_satellite.getVar(“%event.detail.product_id%”) として参照できます。 素晴らしい醤油！！！

これは小説を意図したものではありませんでしたが、この機能がいかに素晴らしいかを示したかったのです。 私はダイレクト コール ルールが大好きですが、私の実装では後回しにされており、カスタム イベントはショットガンのままです。

pushState または hashchange

プッシュ状態

次に、pushState を見てみましょう。 基本的に、新しいページを実際にロードすることなく、ページ/サイトの URL を更新できます。 それ自体は何もしませんが、単一ページのアプリを使用できるようにします。 この機能を利用するフレームワークがいくつかあります。 したがって、サイトがこのように構築されている場合、pushState 機能は非常に便利です。

ルールを設定するときは、もちろん新しいイベント タイプを選択します。

さらに定義するために CSS セレクターは必要ありません。 ただし、いくつかの条件を確認する必要があります。 新しい URL を見るだけであれば、主に使用するのはパスです。 それでおしまい！

ハッシュチェンジ

Twitter のおかげで、ハッシュとは何か (ハッシュ タグ) を知っているので、hashchange はハッシュの変更を参照する必要があります。 ハッシュの優れた点は、必要に応じて変更でき、ページが読み込まれないことです。 ハッシュは多くの目的に使用できるため、ハッシュを使用する理由については説明しません。 pushState が登場する前は、AJAXy または単一ページ サイトの新しいコンテンツでハッシュを更新することは珍しくありませんでした。

新しいルールを構成するには、pushState と同じイベント タイプを選択します。 唯一の違いは、ハッシュを基準として見ることができるようになったことです。 例えば：

結論

Adobe DTM は最高のタグ管理システムであり、アドビのクライアントにとって幸運なことに、無料です! これらの役立つヒントを使用して、そのパワーと可能性を活用し、頻繁に確認してください。 ウェブサイトの分析に関するヘルプをお探しの場合は、お問い合わせください。どのように役立つかについての無料の提案をお送りします。