https://github.com/xkeshav/tagwatcher

A chrome extension to save tagging details
https://github.com/xkeshav/tagwatcher

analytics chrome-extension html-css-javascript

Last synced: 2 months ago
JSON representation

A chrome extension to save tagging details

• Host: GitHub
• URL: https://github.com/xkeshav/tagwatcher
• Owner: xkeshav
• License: mit
• Created: 2022-12-10T11:40:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-23T20:23:50.000Z (over 2 years ago)
• Last Synced: 2025-02-17T02:59:10.981Z (3 months ago)
• Topics: analytics, chrome-extension, html-css-javascript
• Language: JavaScript
• Homepage:
• Size: 696 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tag Watcher

A browser extension which provide facility to display sitecat data in a separate panel in devTools.

following are the main features in current version

- Display tagging data in accordion format in a new **Tagging** panel added in dev tools

- An option page to change and customize the sitecat data such as parameter to capture and server list whose data need to capture

- user can clear the tagging data to get fresh result set

- user can download tagging data in CSV format

- works well in chrome and Edge browser.

- extension have light and dark mode based on system default theme.

## How to Install

1. clone/download the zip and save on your file system.

2. open google chrome and write _chrome://extensions/_ in address bar, in Edge type _edge://extensions_

3. turn on the Developer mode ( top right side of the page )

4. click on load unpacked and browse to the folder where you have downloaded the file in step 1

5. check this extension will be added in the list and there should be no errors

6. extension also visible in toolbar, click on extension icon in toolbar and pin the tagWatcher for handy access.

## How it Works

1. Open chrome dev tools by using **Cmd/ctrl + Option + I** or click _inspect_ from right click on any page.

2. Find the **Tagging** in the panel. it may not visible as many of default panel such as Console, Element, Network are listed.

3. Move the **Tagging** panel in visible area and keep it active.

4. Now click on the page and where tagging being fired

5. **Tagging** panel automatically capture the detail of tagging such as page load or button click event and add a separate row for each tagging.

6. Extend each section for the complete detail of every tagging, label and original adobe parameter will on right side of each row and value of the parameter will be on left side.

7. Action and page Load labelled will be separate as each section title

## Option Page

This is an option page for the extension which allow user to customize the behavior of extension. user can check for option page by right click the extension icon in the toolbar and then click on Option. alternatively, open **chrome://extensions** and locate the TagWatcher extension , click on details and select option link.

1. when you click on tagWatcher extension icon in toolbar, a pop-up will appear and there is a go to options button, click on that and it will open the option page in new tab

2. on option page, user can see the default settings which has default parameter list json and server domain list.

3. user can edit the parameter json and server domain and click on save on individual section

4. user need to enter valid JSON format for parameter JSON and valid domain server list.

5. changes will be affective on re-open of dev tools page and navigate to **Tagging** panel.

6. on reload of extension from **chrome://extension** will restored to default options.

## Technology used

- HTML

- CSS

- Vanilla JavaScript

- Chrome Extension API

## extension screenshot

Pop up Page

![Pop up](src/images/tagwatcher-popup-page.png)

Options Page

![Option](src/images/tagwatcher-option-page.png)

**Tagging** Panel in Dev Tools

![Panel](src/images/tagwatcher-panel-page.png)

## Known issues

1. when tagging panel is not active and user do some click, it will not displayed when Tagging panel become visible but when we download the CSV, it contains all click details.

2. when there is comma `,` in any of parameter value then CSV report will be incorrect.

## TODO

- filter and search feature

- add more CSP ( content security policy)

- download in other format such as pdf, excel

- multi language support

## References

- Chrome Devtool guide

- Chrome Extension API

- Adobe analytics parameters