Configuration of vistor tracking events

Copy the link to the article

Copied

What can be configured

1. Pageview - is transmitted by default when tracking is enabled. The mechanics of the event is as follows: if there is no event for the entire system in the database when connecting a site to tracking, this event will be created and will be automatically linked to the connected site. If the “Pageview” event already exists - the site (store) being connected to tracking will be linked to it;
2. Clicks on elements;
3. Interacting with forms: starting filling in a form and sending a form. ;
4. Visitor registration on the site - records the moment when a user tries to register on the site;
5. Login - the moment a visitor logs in to the site;
6. File upload. The selector is applied to the link - the widget automatically extracts the file name or similar information from it;
7. A click on communications - an event which is recorded when a user clicks on WhatsApp, Telegram or other control elements with the help of which the user contacts an operator for support.

Important!

To track the created events, you have to enable tracking in the “Connection” section.

You can create an event, following Marketing → Site Visitor Tracking → Event Tracking, by clicking New Event.

Selection of event type

To save a customer when the event is executed, you should activate the “Automatically create a customer” switch. This will allow you to collect a database of target customers. The customer will be saved provided that the event data contains enough information to create a customer (full name, mail, etc.). Routine pageviews do not create a new customer in the system.

Next, you need to specify on which pages this event will be tracked. If you select the “On a specific page” option, you will need to specify the page URL in the following format: https://example.ru/product/123.

URL filtering in preconfigured tracker events

The following wildcard characters are supported:

• * — any number of characters. Example:wh* will find what, white and why, but not awhile or watch.
• ? — one character in the specified position. Example: b?ll will find ball, bell and bill.
• [] - one character from the bracketed group. Example: b[ae]ll will find ball, bell, but not bill.
• ! — inverts the bracketed group. Example: b[!ae]ll will find bill and bull but not ball or bell, [!a]* will find everything that doesn't start with “a”.
• - — range. You need to specify the range in ascending order (from A to Z, not Z to A). Example: b[a-c]d will find bad, bbd and bcd.
• # — any digit. Example: 1#3 will find 103, 113 and 123.
• \ — token shielding. Example: * will find exactly the asterisk character, not just any character.

For filtering, you should explicitly specify places that are not taken into account by the filter. For example, if you want to filter only the /register address, you can specify a filter with the whole domain: https://example.com/register*. A filter of the form *register* will be taken into account on all pages that have the word “register” in their address, for example, https://example.com/faq/why-register.

Selection of CSS selector

The option is used to precisely identify the elements that the user interacts with on the page. Selectors make it possible to track only the necessary elements even in a complex page structure.

To copy a CSS selector of an element on a website, you can use the developer tools in the browser or additional browser extensions (for example, Selector Gadget). Using the Google Chrome browser as an example, we will consider the instruction, which also works in most other modern browsers.

How to copy an element selector:

1. Open the site in a browser.
2. Right-click on the desired element (e.g. button, header, image).
3. In the context menu, select “View code” or “Inspect” (depending on the browser language).
4. In the developer panel that opens, the element will be automatically highlighted in the HTML structure.
5. Right-click on the element in the code and select: Copy → Copy selector.

Another way to select an element on a HTML page:

1. Open the site in a browser.
2. Right-click anywhere on the page.
3. In the context menu, select “View code” or “Inspect” (depending on the browser language)..
4. In the developer panel that opens, click the button .
5. Select the desired element on the page
6. In the developer panel, the element will be automatically highlighted in the HTML structure.
7. Right-click on the element in the code and select: Copy → Copy selector.

Using CSS selector in a tracker

Using as an example a part of the website code, we consider the #contactForm in the tracker in RetailCRM:

1. The found selector is specified
2. Selector name
3. Selector type

Next you need to save the changes on the page.

The created event can be edited or deleted.

Events and selector types

• Click on element: specifies a selector for any clickable element: button, link, etc.
• User registration: specifies the selector of the registration form to be filled in. The event is executed when an attempt is made to submit the registration form. The parameters specify the selectors of the input fields, from which the data for the parameters is taken (for example, a selector like input[type=email] may be suitable for filling the customer_email property of this event).
• Account login: specifies the selector of the login form. Contains only the customer_email property, for which the input field selector is specified.
• Click on communication: specifies the selector of the button or link. Contains the customer_email property, for which the input field selector is specified.
• Beginning of form filling: specifies the form selector.
• Submit form: specifies the form selector.
• File download: specifies the selector of a link to a file, or a link to the button that initiates the download.

List of events

You can find the required event using filters. The principle of their operation is similar to filters in the list of orders and is described in detail in the corresponding article.