Adobe DTM デバッガーの紹介

公開: 2023-03-21

Disruptive Advertising では、Adobe DTM が大好きです。 これは本当に (私の意見では) マーケティング分析に最適なタグ マネージャーです。 私はほとんどすべてのものを使用してきましたが、別のツールを使用しているときは、Adobe DTM を使用していればよかったのにと思います。

DTM は優れていますが、開発者ツール (Chrome Developer Tools、Firebug、Firefox Inspector など) を使用しないと、実際に何が起動しているのかを知ることは不可能です。 どのページでも Adob​​e DTM で何が起こっているかを簡単にデバッグして確認するためのより良い方法があることを知っていたので、最終的に役立つ小さなツールを作成しました。

Adobe DTM デバッガーをご紹介します! 詳細に入る前に、インストールしてみましょう。 Adobe DigitalPulse Debugger を使用したことがある場合、これを使用する方法は非常に似ています。 お気に入りのブラウザーで新しいブックマークを作成し、そのブックマークの場所を次のコードに設定します。

 javascript:void(window.open("","disruptive_dtm_debugger","width="+screen.width+",height="+screen.height+",location=0,menubar=0,status=1,toolbar=0,resizable=1,scrollbars=1").document.write("<script id=\"disruptive_dtm_debugger\" src=\"https://static.disruptive.co/disruptive/dtm_launch_debugger.js\"></"+"script>"));

私がそこで何をしたか見ましたか？ DTM のデバッグに役立つツールを Adob​​e DTM でホストしています。

次に、機能に進みます。

設定

ルールの最上部には、いくつかの基本的な設定があります。 次のように表示されます。

ものすごく単純。 読み込まれている DTM 環境 (本番環境またはステージング環境) が表示され、クリックするボタンが表示され、ページがリロードされて新しい環境が読み込まれます。 しかし、待ってください。他にもあります。

ステージング ライブラリが既にページに読み込まれている開発環境にいる場合、混乱を招く可能性があります。 本番ライブラリをステージング ライブラリにロードすることはできません。 そのため、混乱を避けるために、実稼働ライブラリをロードするオプションは表示されません。

ルール

ページでルールが実行されたかどうかを知るための以前の方法は、DTM デバッグ モードをオンにしてから、ブラウザーでコンソールを精査することでした。 その文が意味をなさない場合でも、心配する必要はありません。ページで何が起こっているのかを理解するのがかなり難しいことを知っておいてください.

これで、DTM デバッガーを開くと、すべてのルールのリストが表示されます。ルールが現在のページにあるかどうか、ルールが実行されたかどうか、ルールの種類が表示されます。

dtm-debugger-rules-list

ルールが実行されたかどうかが表示されるだけではありません。 ただし、イベントベースのルールやダイレクト コール ルールなど、そのルールが最初のページの読み込み後に起動する場合、ルールは起動時に強調表示され、起動された小さな緑色のタグが表示されます。

すべてのルールを表示すると圧倒され、多くのスクロールが必要になる可能性があるため、実行されたルールのみを表示する便利な機能も含まれています。 そのボックスをチェックするだけで、ルールが自動的にフィルタリングされます。 最初のページの読み込み後に発火する新しいルールは、発火後にも表示されます。

dtm-debugger-fired-rules-checkbox

今のところはここまでですが、次のような機能を拡張する計画がいくつかあります。

  • さまざまな条件とその詳細をリストします。
  • ルール用に構成されているツールとその設定を一覧表示します。
  • サードパーティのタグを一覧表示します。 また、可能であれば、各タグのコードをリンクまたは表示して、簡単にアクセスできるようにします。

データ要素

過去に DTM を使用したことがある場合は、ブラウザのコンソールを使用してデータ要素の値を確認する必要がありました。 これには以下が含まれます。

  1. コンソールで use _satellite.getVar を使用する
  2. 大文字か小文字かを含め、データ要素の正確な名前を知る

簡単そうに見えますが、結構大変でした。 このツールは、すべてのデータ要素のリストと、そのデータ要素の現在の値を自動的に表示します!

dtm-debugger-data-elements

データ要素の下線付きの「タイプ」をクリックすることもでき、データ要素の定義が表示されます。

dtm-debugger-data-element-definition-custom-js

dtmデバッガデータ要素定義クエリパラメータ

データ要素の値を自動的に表示することは素晴らしいことですが、データ要素が単に値を返す以上のことを行う実装があるかもしれないため、クリックして値を取得できる場所をオプションにする予定です。

DTM 通知

以前は、DTM をデバッグする方法は、デバッグ モードをオンにしてブラウザのコンソールを確認することでした。 現在、DTM は、ツールの読み込み時、ルールの起動時、およびその他の多くのイベントで、デバッガーに情報を自動的に入力します。

_satellite.notify 関数を使用して、独自のコンテンツをデバッガーに入れることもできます。 デバッグ メッセージと通知の典型的なビューは次のようになります。

Adobe DTM Debugger コンソール通知

私は adobe.com から私の例を実行しているので、ここにはたくさんの情報があるので、これは単なるプレビューです。

DTM デバッガーでは、コンソールを開かなくてもこの同じリストを表示でき、コンソールに出力される非 DTM メッセージだけでなく、メッセージのプレフィックス「SATELLITE:」も除外します。

dtm-debugger-notifications-default

しかし、待ってください。他にもあります。 このリストは、新しいアイテムがページに印刷されると自動的に更新され、2 つの非常に便利なチェックボックスがあります。

1. カスタム通知のみを表示する

コードで _satellite.notify を使用し、メッセージがデフォルトの DTM メッセージのいずれとも一致しない場合、それらのメッセージのみが表示されます。

これは、多くの通知に煩わされることなく、意図的にコーディングした内容を確認するのに非常に便利です。 上記のスクリーンショットと、カスタム通知のフィルタリング後の表示の違いを見てください。

dtm-debugger-custom-notifications

2. 最新の通知を一番上に表示する

このボックスをオンにすると、ページの最新情報を確認するために一番下までスクロールする必要がなくなり、最新の通知が一番上に表示されます。 これにより、デバッグが非常に簡単になります。

dtm-debugger-最新の通知

構成

DTM デバッガーの最後の機能は構成です。 ロードされている環境が表示されます (はい、一番上にも表示されます)。 現在、環境とインストールされているツールのみが表示されます。 adobe.com の場合、多くの分析ツールがインストールされています。 dtm デバッガー構成

これの計画は、ツールをクリックして、ツールの構成/設定を表示できるようにすることです。

DTM がインストールされていませんか?

これは私のお気に入りの部分かもしれません。 2015 年の Adob​​e Summit で、DTM チームは「RUN DTM」と書かれた Run DMC ロゴをあしらったこれらのシャツを着用しました。 彼らは天才です。 このシャツ (私はまだ持っていません) へのオマージュとして、DTM がインストールされていないサイトで DTM デバッガーを開くと、次のように表示されます。

スクリーン ショット 2015 年 10 月 6 日午後 5 時 14 分 40 秒

助ける！ (お金ではなく、あなたの時間とアイデア)

このツールは非常に優れていますが、いくつかのバグが発生する可能性があり、さらに優れた機能が追加される可能性があります。 どうぞ、バグや推奨事項を私たちの方法で送ってください！ DTM デバッガーの一番下に電子メールを自動作成するリンクがありますが、この投稿にコメントを送信することもできます。