dataLayer Explorer is a powerful Chrome extension designed to simplify the analysis of a site's dataLayer for developers and digital marketers. This tool provides real-time insights into dataLayer events, enabling users to effortlessly monitor and inspect event data for informed decision-making.
- Access detailed data effortlessly. View a comprehensive list of events, each expandable to reveal rich, detailed information. The intuitive interface allows for quick navigation through events, ensuring important insights are easily accessible.
- Identify GA4 events quickly. A visual indicator
helps distinguish Google Analytics 4 (GA4) events, making it simpler to focus on relevant data. - Facilitate sharing. The "Copy" function enables easy copying of event details to the clipboard for quick access or sharing with team members, streamlining collaboration.
- Analyze event timing precisely. Gain insights into the time elapsed between page load and each event push by simply hovering over the event name. This feature enables detailed analysis of event timing, contributing to a deeper understanding of site performance and user experience. Such precise timing information can be invaluable for optimizing page load sequences and improving overall site responsiveness.
- Stay updated with ease. The extension features a refresh button that allows users to update the events list manually, ensuring access to the latest data whenever needed.
- Open Source advantage. This extension is open source, allowing users to benefit from community-driven development and transparency. By being open source, it ensures that anyone can contribute to its improvement, fostering innovation and responsiveness to user needs.
This extension is built with simplicity and transparency in mind. The source code is written in vanilla JavaScript and utilizes Chrome APIs directly, without the use of bundlers or frameworks. This approach ensures that the code you see in the repository is identical to what is deployed to the Chrome Web Store, facilitating easier review, modification, and understanding of the extension's functionality.
background.js: Serves as the extension's service worker, responsible for updating the browser icon based on the presence of thedataLayerfor the currently viewed site.popup.html/popup.js: Provides the user interface for debugging and interacting with thedataLayer.contentScript.js: Facilitates communication betweenbackground.jsandpopup.html, detecting when thedataLayeris present and relaying the events pushed to it.init.js: Loaded bycontentScript.js, this script captures dataLayer events and sends them back tocontentScript.js. This is necessary becausecontentScript.jslacks direct access to the window object and relies on these events when requested bypopup.html.
Install the extension from the ./src directory as an unpacked extension by following the instructions outlined in this guide.
The extension provides a streamlined development process for the popup interface by utilizing a development server. When the ENVIRONMENT constant is set to development (which is done by the server), this setup allows developers to work without relying on Chrome APIs and instead uses simulated event data in place of actual dataLayer events. This approach enables efficient testing and iteration without the need to constantly close and reopen the extension.
- Install the supported
Node.jsversion usingnvm.
nvm install- Install dependencies.
npm install- Start the development server.
npm run start-
Navigate to http://localhost:8100.
-
Start editing
popup.html/popup.jsin the ./src directory.
If you encounter a bug while using the extension, please file an issue to report it. Suggestions for improvements are also welcome—feel free to submit an issue outlining your ideas. Additionally, if you'd like to contribute directly, you can provide enhancements through a merge request.
Your contributions help improve the extension and benefit the entire community.
The code has been licensed under the MIT license.