Article sections
Advanced Mode is one of the most powerful features of our plugin. It is used in Click and Scroll tracking and allows you to track just about any element on your website, even if you don’t have the “class” or “id” of the target element.
WARNING: When using advanced mode may affect your website if not configured correctly.
This above warning is the reason we waited with this feature for such a long time. Because we know that a lot of our users don’t come from a development background, the standard mode puts a few restrictions on what is called the “Selector”; the mechanism of identifying the tracked element and binding the event to it. The limitations are there to simplify things and make the configuration easier and less intimidating.
Advanced introduces a third selector type – Advanced, which is a free-form input field that accepts jQuery (or CSS) selectors.
Using the Advanced Mode
To enable the Advanced Mode, open the general settings page and check the box and save the configuration.
From then on, Click and Scroll tracking will have the advanced type available for each event.
Note that single quotes will be converted to double quotes when you save the settings.
Here are a few examples of what you can do with it:
- Track all the pdf downloads on the site.
- Track all the buttons under the navigation section.
- Track form submissions even if you don’t have an id or class assigned to them.
- Other examples
* Note that these are just examples of what you can do with advanced mode and may not be directly applicable to your site
Track all the pdf downloads on the site
By using the [href$=”.pdf”] selector, you can track all the links that end with the .pdf extension on your website.
The Parent – Descendant selectors
Sometimes an element that you want to track doesn’t have a unique class or id attribute associated with it, but 0ne of its parents does. Let me give you a little example of such a use case:
Let’s say that we have a button that we want to track which has this underlying HTML code:
<div id=”product-3331″>
<span> Product Title</span>
<div>Product Description goes here</div>
<button>Buy Now</button>
</div>
Up until now, you had to manually assign an id or a class to the button to track it. But in quite a few cases, you had no option of doing that because it was part of a theme or generated by a shortcode you have no control over.
By using advanced mode, you can set the selector to #product-3331 button and track button clicks.
The Form Submit button
The : submit selector allows you to track form submissions even if you don’t have an id or class assigned to them. You can even use that in conjunction with the form’s action attribute if you have multiple forms – [action=”specific-action”] :submit
Here is the HTML code of a simple form:
<form action=”/contact”>
Name:<br>
<input type=”text” name=”yourname” value=””><br>
Message:<br>
<input type=”text” name=”message” value=””><br><br>
<input type=”submit” value=”Submit”>
</form>
The easiest way to track this form would be to set the selector to submit or form :submit
But if you have multiple forms, you will want to identify the specific form. There are many ways to do that, but for this example, we will use the action attribute of the form and use the selector [action=”/contact”] :submit
More Ideas
See jQuery’s documentation for more ideas – https://api.jquery.com/category/selectors/