外掛說明
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 </head>;
- adding after <body>;
- adding before </body>.
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
螢幕擷圖
安裝方式
From your WordPress dashboard
- Visit “Plugins > Add New”.
- Search for “Fast Yandex Metrika”.
- Activate plugin from your Plugins page.
- Visit “Settings > Yandex.Metrica”.
- Enter the counter number on the settings page.
From WordPress.org
- Download Fast Yandex Metrika.
- Upload the plugin directory to your “/wp-content/plugins/” directory, using your favorite method (ftp, sftp, scp, etc…).
- Activate plugin from your Plugins page.
- Visit “Settings > Yandex.Metrica”.
- Enter the counter number on the settings page.
Need help?
Contact me at Telegram.
常見問題集
-
How to set up goals?
-
Before adding a goal, you need to create it in Yandex Metrica.
Phone
- In the drop-down list, select “Phone (WhatsApp)”.
- Enter the name of the goal. For example: phone.
- Enter the CSS selector in the format: tel:7XXXXXXXXXX.
<a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a>
WhatsApp
- In the drop-down list, select “Phone (WhatsApp)”.
- Enter the name of the goal. For example: whatsapp.
- Write the CSS selector in the format: https://wa.me/7XXXXXXXXXX.
<a href="https://wa.me/7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a>
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
- In the drop-down list, select “Form”.
- Enter the name of the goal. For example: form.
- Write the CSS selector in the format: #id_form or .class-form.
<form id="id_form" class="class-form" … >…</form>
Button
- Select “Button” from the drop-down list.
- Enter the name of the goal. For example: button.
- Enter the CSS selector in the format: #id_button or .class_button.
<button id="id_button" class="class-button">…</button>
Link
- In the drop-down list, select “Link”.
- Enter the name of the goal. For example: links.
- Write the CSS selector in the format: https://example.com/path/sub/?param=value¶m1=value.
<a href="https://example.com/path/sub/?param=value¶m1=value">example.com</a>
The link can be as full as “https://example.com/path/sub/?param=value¶m1=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”].
-
Header
- Select “HTML tag” from the drop-down list.
- Enter the name of the goal. For example: header_phone.
- Write the CSS selector in the format: header a[href= "tel:7XXXXXXXXXX "].
<header> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </headre>
Footer
- Select “HTML tag” from the drop-down list.
- Enter the name of the goal. For example: footer_phone.
- Write the CSS selector in the format: footer a[href= "tel:7XXXXXXXXXX "].
<footer> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </footer>
Sidebar
- Select “HTML tag” from the drop-down list.
- Enter the name of the goal. For example: sidebar_phone.
- Write the CSS selector in the format: aside a[href= "tel:7XXXXXXXXXX "].
<aside> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </aside>
Content
- Select “HTML tag” from the drop-down list.
- Enter the name of the goal. For example: article_phone.
- Write the CSS selector in the format: article a[href= "tel:7XXXXXXXXXX "].
<article> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </article>
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="tel:7XXXXXXXXXX"]
<div class="content"> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </div>
-
Table
- Select “HTML tag” from the drop-down list.
- Enter the name of the goal. For example: order_table.
- Write the CSS selector in the format: table button.
<table> … <button>Order</button> … </table>
Block layout
- Select “HTML tag” from the drop-down list.
- Enter the name of the goal. For example: order_price.
- Enter the CSS selector in the format: .price a.order.
<div class="price"> … <a class="order">Order</a> … </div>
使用者評論
這個外掛目前沒有任何使用者評論。
參與者及開發者
變更記錄
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.