Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/manifestinteractive/analytics-debug-panel

Chrome, Firefox & Opera Browser Extension - Analytics Debug Panel
https://github.com/manifestinteractive/analytics-debug-panel

adobe analytics cross-browser facebook firefox-addon google google-chrome-extension opera-extension

Last synced: 3 months ago
JSON representation

Chrome, Firefox & Opera Browser Extension - Analytics Debug Panel

Awesome Lists containing this project

README 

        
Project Support

===



If you or your company enjoy using this project, please consider supporting my work and joining my discord. 💖



[![Become a GitHub Sponsor](https://img.shields.io/badge/Sponsor-171515.svg?logo=github&logoColor=white&style=for-the-badge "Become a GitHub Sponsor")](https://github.com/sponsors/manifestinteractive)

[![Become a Patreon Sponsor](https://img.shields.io/badge/Sponsor-FF424D.svg?logo=patreon&logoColor=white&style=for-the-badge "Become a Patreon Sponsor")](https://patreon.com/peter_schmalfeldt)

[![Donate via PayPal](https://img.shields.io/badge/Donate-169BD7.svg?logo=paypal&logoColor=white&style=for-the-badge "Donate via PayPal")](https://www.paypal.me/manifestinteractive)

[![Join Discord Community](https://img.shields.io/badge/Community-5865F2.svg?logo=discord&logoColor=white&style=for-the-badge "Join Discord Community")](https://discord.gg/568FxkUx6v)



------



#  ![icon](./static/icons/48.png) Analytics Debug Panel



> Analytics Debug Panel is an Open Source browser extension to inspect, search & filter analytics traffic in your Developer Console.



#  ![demo](./demo.gif)



[Red Van Workshop](https://redvanworkshop.com) works with online retailers that have a variety of Analytic Providers for their differing business needs.  Working on new integrations and debugging existing ones is an integral part of our developer process.  We built this Browser Extension to help make that process easier.  We hope you will find it as useful as we do, and if you want to help make it better, we'd love to hear from you.



## Features



- [X] Works on Chrome, Firefox & Opera

- [X] Adds new `Analytics` tab to Developer Console

- [X] Works with Adobe, Google & Facebook Analytics

- [X] Copy Requests to Clipboard

- [X] Supports Light & Dark Themes



## Installation



> Select your browser:



[![Install Chrome](https://img.shields.io/badge/Install-Chrome-blue.svg?style=for-the-badge)](https://chrome.google.com/webstore/detail/analytics-debug-panel/poaajdjaghjhnampllfkclmepngmaekb)

[![Install Firefox](https://img.shields.io/badge/Install-Firefox-orange.svg?style=for-the-badge)](https://addons.mozilla.org/en-US/firefox/addon/analytics-debug-panel/)

[![Install Opera](https://img.shields.io/badge/Install-Opera-red.svg?style=for-the-badge)](https://addons.opera.com/en/extensions/details/analytics-debug-panel/)



_( Opera Addon Pending Review )_



## Manual Install



> Here is how to install this browser extension in your favorite browsers:



Add to Google Chrome



1. Download [Webkit Extension](https://github.com/redvanworkshop/analytics-debug-panel/raw/master/dist/analytics-debug-panel.crx)

2. Click **Keep** when prompted to download the file

3. Go to the following URL in a new Google Chrome tab:  `chrome://extensions/`

4. In the top right corner, Enable **Developer Mode**

5. Drag and Drop `analytics-debug-panel.crx` file into Extension page



Add to Firefox



1. Download [Firefox Addon](https://github.com/redvanworkshop/analytics-debug-panel/raw/master/dist/analytics-debug-panel.zip)

2. Open Firefox

3. Go to the following URL in a new tab:  `about:debugging`

4. Select `Enable add-on debugging` checkbox

5. In the top right corner, Click **Load Temporary Add-on**

6. Select the `analytics-debug-panel.zip` file



Add to Opera



1. Download [Webkit Extension](https://github.com/redvanworkshop/analytics-debug-panel/raw/master/dist/analytics-debug-panel.crx)

2. Go to the following URL in a new Opera tab:  `chrome://extensions/`

3. In the top right corner, Enable **Developer Mode**

4. Drag and Drop `analytics-debug-panel.crx` file into Extension page

5. Select **Yes, Install** when prompted



## Developers



> Here is how to develop the browser extension



Support New Providers



> Adding New Analytics Providers is Easy



1. Create a new folder in `./src/providers` following the standard we have in place

2. Create a new `index.js` file inside that new folder

3. See `./src/providers/google-universal-analytics/index.js` for an example

4. Submit a PR for use to review the new Providers

5. High Five on a Job Well Done



Build Extension



```bash

git clone [email protected]:redvanworkshop/analytics-debug-panel.git

cd analytics-debug-panel

npm install

npm run build

```



Load Unpacked Extension to Google Chrome



1. Open Google Chrome

2. Go to the following URL in a new tab:  `chrome://extensions/`

3. In the top right corner, Enable **Developer Mode**

4. Click the **LOAD UNPACKED** link in the header

5. Select the `./analytics-debug-panel/build` folder



Load Temporary Add-on to Firefox



1. Open Terminal in project root and run `npm run pack:zip`

2. Open Firefox

3. Go to the following URL in a new tab:  `about:debugging`

4. Select `Enable add-on debugging` checkbox

5. In the top right corner, Click **Load Temporary Add-on**

6. Select the `analytics-debug-panel.zip` file



Load Unpacked Extension to Opera



1. Open Opera

2. Go to the following URL in a new tab:  `chrome://extensions/`

3. In the top right corner, Enable **Developer Mode**

4. Drag and Drop `./analytics-debug-panel/build` folder into Extension page



Pack Extensions



```bash

cd analytics-debug-panel

npm run pack

```