Browser Agentを自社のサイトに簡易的に導入してBrowser Agentの動作を確認してみたいということがあるかと思います。
こういった場合、Google Tag Managerを使う方法やブラウザ拡張を使う方法もありますが、Chromeのデベロッパーツールにある、Content overrideを使った方法を紹介します。
本方法はHTMLファイルを直接編集して、コードスニペットを挿入します。そのため、対応にはHTMLファイルに関する基礎的な知識が必要となります。
Content overrideは、Chromeで提供されているデベロッパーツールで、サイトのコンテンツの一部をローカルのファイルで上書きするということができるというツールです。これを使うことで、自身が実行しているブラウザ上でだけ、Browser Agentを導入してデータを取得することができるようになります。
では、実際の導入方法です。まず、Browser Agentを導入したい対象のサイトを開いて、Chromeのデベロッパーツールを開いてみてください。
このblogでは、 https://newrelic.com/jp のページで試してみます。デベロッパーツールを開き、Sourcesのタブを開くと添付のように表示されるのができると思います。
ここで、対象のサイトのHTMLファイルを返しているファイルを左側から選択してください。通常、ページのURLのパスと同じになるはずです。今回は、newrelic.com配下のjpを選択します。
続いて、ファイルを右クリックして、Override contentをクリックしてください。
すると、上部 にSelect folderというのが表示されると思います。こちらをクリックして、上書き用のファイルを保存するフォルダを指定してください。
フォルダを設定すると、以下のように左側のメニューがOverridesのタブに切り替わり、上書きの準備ができました。
続いて、こちらのドキュメントページを参照の上、挿入するBrowser Agentのコードスニペットを取得してください。ドキュメント通り、HTMLのHEADタグ内のmetaタグより後ろに挿入します。今回のサイトの場合は、以下の画像のようにmetaタグとscriptの間に挿入します。
挿入すると以下の画像のようになったかと思います。なお、画像のようにファイル名の右上にアスタリスクが表示されている場合は編集した内容が保存されていないので、Control + Sなどで保存してください。保存が完了したら、次回以降のページロードでその上書きした内容で読み込まれます。
実際にページをリロードしてみてください。その後数分待って、New RelicのUIで確認していただくと、対象のページにて取得されたデータがUIに表示されるようになります。自身のローカルだけで試したい場合は、お試しいただければ幸いです。
本ブログに掲載されている見解は著者に所属するものであり、必ずしも New Relic 株式会社の公式見解であるわけではありません。また、本ブログには、外部サイトにアクセスするリンクが含まれる場合があります。それらリンク先の内容について、New Relic がいかなる保証も提供することはありません。
