Adobe Analytics

Adobe Analytics: AppMeasurement.jsの実装開発作業に使うツール Javascript編

こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。

今回はAdobe Analyticsの計測コードであるAppMeasurement.jsの実装時に使うと便利なツールについて紹介します。

AppMeasument.jsはJavascriptで書かれています。
つまりAdobe Analyticsを導入するためには、多少のJavascriptの開発が必要です。

Chrome デベロッパーツール

言わずと知れたデバッグツールです。
WindowsならF12ボタン、Macならoption + command + Jで起動します。

個人的に助かるのは、要素の「検証」で、右クリック > [Copy selector]でセレクタをクリップボードにコピーできる点です。

セレクタをクリップボードにコピーする

セレクタをクリップボードにコピーする

これでJQueryを使ったカスタムリンクの実装や、DTMでのイベントルールの設定が非常に楽になりました。
また、スマホのエミュレートモードも搭載されているので、スマホ用の実装の検証も捗ります。

あと、ユーザーエージェントの変更機能もあるのですが、デフォルトでは隠れています。
[More Tools] > [Network Conditions]を開くと、User-Agent設定項目が出て来ます。

Chromeのユーザーエージェント変更

Chromeのユーザーエージェント変更

あと、難読化されているJSファイルを綺麗にインデントして表示してくれるPretty Printという機能があります。
読みづらいJavascriptソースが、一気に読みやすくなります。

Pretty printを使えば読みやすい

Pretty printを使えば読みやすい

もし興味があれば、この機能を使ってAppMeasurement.jsファイルがどんな事をしているのか覗いてみてください。
昔、私がオムニチュアに入った時の入社試験の課題で、「s_code.js(SiteCatalystのレガシーJS)が何をしているのか解読する」という課題がありました。
このツールが当時から存在していたらもっと楽だったかも知れません。

Firefox 開発ツール

長年愛用し続けたFirebugがとうとう開発終了してしまいました。
Firefox 50からはFirebugが正常に動作しません。
試したところ「スクリプト」タブが全く動作せず、ページ内でロードされているJavascriptファイルのデバッグが出来ませんでした。

そのため、今後はFirefox標準の開発ツールを使う事になります。
UIがFirebugと異なるので、最初は慣れが必要ですが、慣れれば便利そうです。(まだ慣れてない。。。)
ローカルストレージ/セッションストレージのインスペクタもデフォルトで搭載されており、Firebugのように追加機能のインストールは不要です。

また、レスポンシブデザインモードがあり、これを使うと画面の解像度を自由に変更してテスト可能です。

Firefoxのレスポンシブモード

Firefoxのレスポンシブモード

レスポンシブモードのユーザーエージェントはFirefoxのままなので、カスタムのユーザーエージェントを設定するか、アドオンのUser-Agent Switcherも使うと便利です。
なお、2016年12月現在開発中のFirefox52ではレスポンシブモードにデバイス選択機能も搭載される予定で、これを使えばスマホのエミュレートも簡単に出来るようになります。
https://developer.mozilla.org/ja/docs/Tools/Responsive_Design_Mode
リリースが待ち遠しいです。

他には、Safariの開発メニュー、IE/EdgeのF12開発者ツールなども存在します。
いずれもユーザーエージェント変更機能やコンソールがあり、AppMeasurement.jsの実装・検証に役立つツールです。

各ブラウザそれぞれの開発ツールの使い方を覚えると、作業が捗る事、間違いなしです。

ブログへの記事リクエストはこちらまで

Adobe Analytics-分析ワークスペースの使い方前のページ

【学生向け】TableauのアカデミックプログラムでTableauが無料で使える!!次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Adobe Analytics

    Adobe Analytics: Mobile SDK 4.x でアプリ計測する際の小技

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  2. Ad Hoc Analysis

    Adobe Analytics: Ad Hoc Analysisでセグメントの条件を一気に追加する方…

    Adobe Analyticsでセグメントを作るとき、「A または B…

  3. Adobe Analytics

    訪問者数とは-Adobe Analyticsの指標説明

    今回は訪問者数について説明いたします。訪問者数とは期間中にサイトを…

  4. Adobe Analytics

    Adobe Analytics: カスタムリンク計測を1行で書く

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  5. Adobe Analytics

    Adobe AnaltyicsとGoogle Analytics の「生Webビーコン」をBigQu…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  6. Adobe Analytics

    Adobe Mobile SDK 4.xからAEP SDKに移行する

    こんにちは、エクスチュアの権泳東(コン・ヨンドン)です。Ado…

カテゴリ
最近の記事
  1. dbt Projects on SnowflakeをTASK…
  2. AWS発のAIエージェントIDE「Kiro」を使用した仕様駆…
  3. AWS発のAIエージェントIDE「Kiro」を使用した仕様駆…
  4. TableauとSnowflakeを接続する方法
  5. 【dbts25】Snowflake×PostgreSQLのニ…
  1. Adobe Analytics

    Adobe Analytics: BigQueryでパーティシペーション指標を集…
  2. IT用語集

    C言語、C++(シープラプラ)、C#(シーシャープ)って何?
  3. Adobe Analytics

    Adobe Analytics: データフィードをBigQueryで集計する
  4. Tableau

    Tableau : IF文の「集計」「非集計」の混在を解決
  5. IT用語集

    BIツール(Business Intelligence Tool)って何?
PAGE TOP