=== Fast Yandex Metrika ===
Contributors: pss777
Donate link: https://yoomoney.ru/to/4100183504074/200
Tags: яндекс, yandex, метрика, metrica, metrika, метрик, metrik, stats, statistics, tools, analytics, analytics tool
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
Stable tag: 1.1.5
License: GPLv2 (or later)
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Plugin for configuring the counter and Yandex Metrica goals.

== Description ==

Plugin for configuring the counter and Yandex Metrica goals.

= Features =

**Supports the following counter settings:**

* whether to collect data for a click map;
* track clicks on outbound links;
* accurate bounce rate;
* whether to use Session Replay (Webvisor 2.0);
* hash tracking in the browser's address bar.

**Loading by event:**

* scroll: when the page starts scrolling (recommended if the counter script affects the speed of the site);
* ready: after building the HTML document, but before loading external resources: styles, scripts, images, etc.

**Embedding in HTML:**

* adding before &lt;/head&gt;;
* adding after &lt;body&gt;;
* adding before &lt;/body&gt;.

**Easy goal setting for:**

* phone;
* form;
* button;
* link;
* HTML tag.

**Error control**

When working with goals on the user side, the plugin monitors the correct indication of CSS selectors. 
JavaScript with a syntax violation does not cause an error, but fixes it in the browser console (F12). 

*Goal #1. SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.class 777' is not a valid selector.*

To see information about errors, in the plugin settings, enable the "Error control in the browser console" option.

https://www.youtube.com/watch?v=tr9teIOTOqk

== Installation ==

= From your WordPress dashboard =

1. Visit "Plugins > Add New".
2. Search for "Fast Yandex Metrika".
3. Activate plugin from your Plugins page.
4. Visit "Settings > Yandex.Metrica".
5. Enter the counter number on the settings page.

= From WordPress.org =

1. Download Fast Yandex Metrika.
2. Upload the plugin directory to your "/wp-content/plugins/" directory, using your favorite method (ftp, sftp, scp, etc...).
3. Activate plugin from your Plugins page.
4. Visit "Settings > Yandex.Metrica".
5. Enter the counter number on the settings page.

= Need help? =

Contact me at [Telegram](https://t.me/contentreactor).

== Screenshots ==

1. Settings page

== Frequently Asked Questions ==

= How to set up goals? =

Before adding a goal, you need to create it in Yandex Metrica.

**Phone**

1. In the drop-down list, select "Phone (WhatsApp)".
2. Enter the name of the goal. For example: phone.
3. Enter the CSS selector in the format: tel:7XXXXXXXXXX.

&lt;a href=&quot;tel:7XXXXXXXXXX&quot;&gt;+7 (XXX) XXX-XX-XX&lt;/a&gt;

**WhatsApp**

1. In the drop-down list, select "Phone (WhatsApp)".
2. Enter the name of the goal. For example: whatsapp.
3. Write the CSS selector in the format: https://wa.me/7XXXXXXXXXX.

&lt;a href=&quot;https://wa.me/7XXXXXXXXXX&quot;&gt;+7 (XXX) XXX-XX-XX&lt;/a&gt;

*If your WhatsApp link looks like "https://wa.me/7XXXXXXXXXX?text=Text&source=&data=", in the goal settings, specify "https://wa.me/7XXXXXXXXXX". The script will still find the desired link on the page.*

**Form**

1. In the drop-down list, select "Form".
2. Enter the name of the goal. For example: form.
3. Write the CSS selector in the format: #id_form or .class-form.

&lt;form id=&quot;id_form&quot; class=&quot;class-form&quot; ... &gt;...&lt;/form&gt;

**Button**

1. Select "Button" from the drop-down list.
2. Enter the name of the goal. For example: button.
3. Enter the CSS selector in the format: #id_button or .class_button.

&lt;button id=&quot;id_button&quot; class=&quot;class-button&quot;&gt;...&lt;/button&gt;

**Link**

1. In the drop-down list, select "Link".
2. Enter the name of the goal. For example: links.
3. Write the CSS selector in the format: https://example.com/path/sub/?param=value&param1=value.

&lt;a href=&quot;https://example.com/path/sub/?param=value&param1=value&quot;&gt;example.com&lt;/a&gt;

*The link can be as full as "https://example.com/path/sub/?param=value&param1=value", and short "https://example.com/path/sub/", the script will still find it on the page. As GET parameters, the Cyrillic alphabet is not allowed.*

**HTML tag**

Allows you to set complex CSS selectors: header .contacts > div:nth-child(3) a[href= "tel:7XXXXXXXXXX"].

= How to differentiate clicks on the phone (header, footer, sidebar, content)? =

**Header**

1. Select "HTML tag" from the drop-down list.
2. Enter the name of the goal. For example: header_phone.
3. Write the CSS selector in the format: header a[href= &quot;tel:7XXXXXXXXXX &quot;].

&lt;header&gt; ... &lt;a href=&quot;tel:7XXXXXXXXXX&quot;&gt;+7 (XXX) XXX-XX-XX&lt;/a&gt; ... &lt;/headre&gt;

**Footer**

1. Select "HTML tag" from the drop-down list.
2. Enter the name of the goal. For example: footer_phone.
3. Write the CSS selector in the format: footer a[href= &quot;tel:7XXXXXXXXXX &quot;].

&lt;footer&gt; ... &lt;a href=&quot;tel:7XXXXXXXXXX&quot;&gt;+7 (XXX) XXX-XX-XX&lt;/a&gt; ... &lt;/footer&gt;

**Sidebar**

1. Select "HTML tag" from the drop-down list.
2. Enter the name of the goal. For example: sidebar_phone.
3. Write the CSS selector in the format: aside a[href= &quot;tel:7XXXXXXXXXX &quot;].

&lt;aside&gt; ... &lt;a href=&quot;tel:7XXXXXXXXXX&quot;&gt;+7 (XXX) XXX-XX-XX&lt;/a&gt; ... &lt;/aside&gt;

**Content**

1. Select "HTML tag" from the drop-down list.
2. Enter the name of the goal. For example: article_phone.
3. Write the CSS selector in the format: article a[href= &quot;tel:7XXXXXXXXXX &quot;].

&lt;article&gt; ... &lt;a href=&quot;tel:7XXXXXXXXXX&quot;&gt;+7 (XXX) XXX-XX-XX&lt;/a&gt; ... &lt;/article&gt;

*There can be many variations, and you don't have to link to header, footer, aside, or article. You can use .class or #id, as long as the selector belongs to the parent element of the HTML markup.*

*.content a[href=&quot;tel:7XXXXXXXXXX&quot;]*

*&lt;div class=&quot;content&quot;&gt; ... &lt;a href=&quot;tel:7XXXXXXXXXX&quot;&gt;+7 (XXX) XXX-XX-XX&lt;/a&gt; ... &lt;/div&gt;*

= How to track clicks on the order buttons in the price list? =

**Table**

1. Select "HTML tag" from the drop-down list.
2. Enter the name of the goal. For example: order_table.
3. Write the CSS selector in the format: table button.

&lt;table&gt; ... &lt;button&gt;Order&lt;/button&gt; ... &lt;/table&gt;

**Block layout**

1. Select "HTML tag" from the drop-down list.
2. Enter the name of the goal. For example: order_price.
3. Enter the CSS selector in the format: .price a.order.

&lt;div class=&quot;price&quot;&gt; ... &lt;a class=&quot;order&quot;&gt;Order&lt;/a&gt; ... &lt;/div&gt;

== Changelog ==

= 1.1.5 =

* Fix - updated JS code of the counter.

= 1.1.4 =

* Fix - changed JS code.

= 1.1.3 =

* Fix - changed the method of inserting the JS code of the counter after opening the body tag.

= 1.1.2 =

* Fix - changed the method of inserting the counter's JS code.

= 1.1.1 =

* Fix - the counter was not displayed on the main page of the site.

= 1.1 =

* Support for complex CSS selectors.
* Control of CSS selector errors in the browser console.
* If the JavaScript syntax is violated by specifying an incorrect CSS target selector, this part of the script is not executed and does not cause an error.

= 1.0 =

* First version with basic features.