Debug your page template to see if it works with Google Tag Manager's auto-event listeners.

Latest Version

Version
1.4
Update
May 16, 2020
Size
15.94KiB
Developer
www.simoahava.com
Category
Users
10,000+
Rating
5 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
See more

GTM Sonar Extension

The GTM Sonar can be used to debug the page template and its compatibility with Google Tag Manager's listeners.

TABLE OF CONTENTS
1. OVERVIEW
2. HOW TO USE IT
3. TO-DO
4. VERSION HISTORY

--------------------

1. OVERVIEW

Once you install the extension (and reload your page), clicking the red target in the extension pane will open a pop-up.

In this pop-up, you can choose which listener to activate on the page.

Click Listener: Halts default action of all clicks on the document node, pushes gtm.click and other data into debugDL upon clicking on the page.

Link Click Listener: Halts default action of all clicks on the document node, pushes gtm.linkClick and other data into debugDL upon clicking any link element on the page.

Form Submit Listener: Halts default action of all form submissions, pushes gtm.formSubmit and other data into debugDL upon submitting a form.

By choosing the listener and clicking \"Switch On\" you set up the listener on the page. By opening the pop-up and clicking \"Switch Off\", you cancel all extension actions.

Once an event is pushed into the debugDL array, a small badge icon in the Browser Action increases in count, signifying the number of items in the array. To view contents of the array, open the JavaScript console in your Chrome browser and type \"debugDL\" (without quotes).

If your page has jQuery available, you can kill all jQuery binds by clicking the respective button. This is to test if jQuery is interfering with GTM listeners.

The debugger is tab-specific, so actions in a tab are for that tab only. Once you browse away from the page, debugDL will not be available any more.

Note that canceling the default action of clicks and submits is not 100 % accurate. You might have interfering scripts which make it so that redirection or submission happens anyway.

2. HOW TO USE IT

The idea is that you can test how different elements perform with these three GTM listeners without actually setting up a real GTM listener. This is good for debugging, as you can now test freely with your markup before setting up listener tags in GTM. This is also very useful if you want to debug a site where you don't have access to the container or a preview version.

3. TO-DO

1) Make more stable and robust

4. VERSION HISTORY

v1.4 - May 13, 2020
- Fixed Click Listener to be properly removed when extension is inactive.
- Switched to using just the activeTab permission.

v1.3 - June 5, 2015
- Changed Click Listener to use Capture
- Changed Link Click Listener to climb through DOM tree until a link is found

v1.2 - June 1, 2014
- Added a badge icon which increases in count every time an event is pushed into debugDL
- Improved the pop-up instructions
- If the extension doesn't work, an error message will be displayed in the pop-up
- Changed the name of the extension to GTM Sonar (thanks Paul Gailey for the idea!)

v1.1 - May 26, 2014
- Added a popup to control debugger functions
- Added a switch to kill all jQuery binds
- Added the choice of Click Listener, Link Click Listener and Form Submit Listener

v1.0 - May 23, 2014
- First release version
- Clicking the Browser Action halts all click events and sets up the debugDL object
- Clicking anywhere on the page stores the gtm.click event in debugDL
- Clicking the Browser Action again removes all scripts and event handlers injected by this extension
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 2, "name": "GTM Sonar", "version": "1.4", "description": "Debug your page template to see if it works with Google Tag Manager's auto-event listeners.", "short_name": "GTM Sonar", "icons": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" }, "browser_action": { "default_icon": { "19": "icon19.png", "38": "icon38.png" }, "default_popup": "popup.html" }, "background": { "scripts": ["background.js"] }, "content_scripts": [{ "matches": [""], "js": ["debugger.js"], "run_at": "document_end" }], "permissions": [ "activeTab" ]}
Read more

How to download and manually install GTM Sonar extension for Chrome

Looking for a way to install GTM Sonar extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install GTM Sonar extensions manually, this article outlines two simple methods to effortlessly install GTM Sonar extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download GTM Sonar extension and manually install through Drag &Drop

If you ever need to manually install a GTM Sonar extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the GTM Sonar Extension by clicking the "Download CRX" button on the website.

Look for the GTM Sonar extension you wish to install. Go to the website and download the GTM Sonar extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for GTM Sonar extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the GTM Sonar extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download GTM Sonar extension for Chrome and install in Developer Mode

This is another method to install GTM Sonar extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the GTM Sonar extension file

Select and download the GTM Sonar extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the GTM Sonar extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your GTM Sonar extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the GTM Sonar extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install GTM Sonar extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

Google Analytics Debugger Extension · Developer Tools 10,000+ 37 ★ 27.1KiB

icon

Analytics Debugger Extension · Developer Tools 10,000+ 211 ★ 300KiB

icon

dataslayer Extension · Developer Tools 10,000+ 80 ★ 417KiB

icon

GTM Variable Builder Extension · Developer Tools 10,000+ 30 ★ 82.71KiB

icon

Adswerve - dataLayer Inspector+ Extension · Developer Tools 10,000+ 56 ★ 517KiB

icon

Datalayer Checker Extension · Developer Tools 10,000+ 33 ★ 93.13KiB

icon

WASP.inspector: Analytics Solution Profiler Extension · Developer Tools 10,000+ 189 ★ 401KiB

icon

PPC NegativeKeywords Tool Extension · Productivity 10,000+ 46 ★ 1.25MiB

icon

Page Analytics (by Google) Extension · Productivity 10,000+ 1065 ★ 417KiB

icon

PII Viewer for Google Analytics Extension · Productivity 10,000+ 9 ★ 3.09MiB

icon

ObservePoint Debugger Extension · Developer Tools 10,000+ 52 ★ 3.6MiB

icon

Google Analytics Debugger Extension · Developer Tools 10,000+ 533 ★ 28.88KiB

icon

Da Vinci Tools Extension · Developer Tools 10,000+ 34 ★ 1.2MiB

icon

GTM Copy Paste Extension · Productivity 10,000+ 49 ★ 726KiB

icon

UET Tag Helper (by Microsoft Advertising) Extension · Developer Tools 10,000+ 25 ★ 216KiB

icon

Table Booster for Google Analytics Extension · Productivity 10,000+ 53 ★ 94.14KiB

icon

[DEPRECATED] Tag Assistant Legacy Extension · Developer Tools 10,000+ 1165 ★ 866KiB

icon

Redirect Path Extension · Developer Tools 10,000+ 194 ★ 6.06MiB

icon

Web Data Assistant Extension · Developer Tools 10,000+ 62 ★ 80.57KiB

icon

Omnibug Extension · Developer Tools 10,000+ 50 ★ 1.35MiB

icon

Copy Css Selector Extension · Developer Tools 10,000+ 26 ★ 19.31KiB

icon

Yandex Metrica Debugger Extension · Developer Tools 10,000+ 8 ★ 22.03KiB

icon

Tagtician: Adobe Launch & DTM Debugger Extension · Developer Tools 10,000+ 24 ★ 228KiB

icon

Elevar GTM Event Builder Extension · Productivity 10,000+ 7 ★ 654KiB

User reviews

icon

smallstar1234 (ID: 0000003072f17a5a) Voted 5 ★ - Updated 09/24/2021 Excellent tool for debugging clicks which is difficult to debug with only native console

icon

John B. (ID: 00000044e68a8cc1) Voted 5 ★ - Updated 06/28/2019 A simple tool that makes checking tags so much easier!

icon

Susanne Fischer (ID: 00000029943b415d) Voted 5 ★ - Updated 11/16/2018 Very convenient for GTM testing.

icon

Yulia Perun (ID: 00000019a8cc031f) Voted 5 ★ - Updated 10/16/2018 very useful plugin

icon

Jędrzej (ID: 000000b553a672c5) Voted 5 ★ - Updated 09/25/2018 awesome tool, thanks Simo!