@alexsab-ru/scripts 0.5.2 → 0.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -2
- package/README_RU.md +154 -0
- package/lib/form.js +7 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# @alexsab-ru/scripts
|
|
2
2
|
|
|
3
|
+
[Русский](README_RU.md)
|
|
4
|
+
|
|
3
5
|
common libs for websites
|
|
4
6
|
|
|
5
7
|
* [Installation](#Installation)
|
|
@@ -91,6 +93,32 @@ document.querySelectorAll("form").forEach((form) => {
|
|
|
91
93
|
});
|
|
92
94
|
```
|
|
93
95
|
|
|
96
|
+
### Goals can be achieved as follows
|
|
97
|
+
|
|
98
|
+
Interaction with the form
|
|
99
|
+
|
|
100
|
+
- **form_open** – opened the form
|
|
101
|
+
- **form_click** – clicked on the form
|
|
102
|
+
- **form_change** – changes in the form
|
|
103
|
+
- **form_submit** – pressed the Submit button
|
|
104
|
+
- **form_required** – incomplete form filling
|
|
105
|
+
- **form_error** – error, data did not send for some reason
|
|
106
|
+
- **form_success** – received a positive response from the server, i.e., data was sent
|
|
107
|
+
- **form_close** – closed the form
|
|
108
|
+
|
|
109
|
+
Interaction with the phone
|
|
110
|
+
|
|
111
|
+
- **phone_click** — clicked on it with the mouse
|
|
112
|
+
- **phone_contextmenu** — opening the context menu on it with the right mouse button
|
|
113
|
+
- **phone_copy** — copying the selected text
|
|
114
|
+
|
|
115
|
+
If there is a clickable email on the page, goals will be triggered on it
|
|
116
|
+
|
|
117
|
+
- **email_click** — clicked on it with the mouse
|
|
118
|
+
- **email_contextmenu** — opening the context menu on it with the right mouse button
|
|
119
|
+
- **email_copy** — copying the selected text
|
|
120
|
+
|
|
121
|
+
|
|
94
122
|
## Cookie module
|
|
95
123
|
|
|
96
124
|
```js
|
|
@@ -107,10 +135,10 @@ cookiecook(days);
|
|
|
107
135
|
```js
|
|
108
136
|
import { createRequest } from '@alexsab-ru/scripts';
|
|
109
137
|
|
|
110
|
-
//
|
|
138
|
+
// Sending a callback request to CallTouch
|
|
111
139
|
createRequest("ct_callback", "+7 (987) 654-32-10");
|
|
112
140
|
|
|
113
|
-
//
|
|
141
|
+
// to display the log, the third parameter must be used
|
|
114
142
|
createRequest("ct_callback", "+7 (987) 654-32-10", true);
|
|
115
143
|
```
|
|
116
144
|
|
package/README_RU.md
ADDED
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
# @alexsab-ru/scripts
|
|
2
|
+
|
|
3
|
+
[English](README.md)
|
|
4
|
+
|
|
5
|
+
Общие пакеты для вебсайтов
|
|
6
|
+
|
|
7
|
+
* [Установка](#Установка)
|
|
8
|
+
* [Модуль аналитики](#Модуль-аналитики)
|
|
9
|
+
* [Модуль куков](#Модуль-куков)
|
|
10
|
+
* [Модуль Calltouch](#Модуль-Calltouch)
|
|
11
|
+
* [Модуль для форм](#Модуль-для-форм)
|
|
12
|
+
|
|
13
|
+
## Установка
|
|
14
|
+
```bash
|
|
15
|
+
pnpm i @alexsab-ru/scripts
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Модуль аналитики
|
|
19
|
+
|
|
20
|
+
`reachGoal` и `pageView` функции добавляют в `dataLayer` данные с названием цели
|
|
21
|
+
```js
|
|
22
|
+
reachGoal("названиеЦели");
|
|
23
|
+
pageView("названиеЦели");
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
в GTM вы можете использовать их чтобы отправить цели в вашу систему аналитики
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
{
|
|
30
|
+
event: "reachGoal-названиеЦели",
|
|
31
|
+
eventAction: "названиеЦели"
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Пример:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import { reachGoal } from '@alexsab-ru/scripts';
|
|
39
|
+
|
|
40
|
+
// Автоматически подключаются из модуля форм
|
|
41
|
+
reachGoal("phone_click");
|
|
42
|
+
reachGoal("phone_copy");
|
|
43
|
+
reachGoal("phone_contextmenu");
|
|
44
|
+
reachGoal("email_click");
|
|
45
|
+
reachGoal("email_copy");
|
|
46
|
+
reachGoal("email_contextmenu");
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Для аналитики форм вы можете использовать следующие цели
|
|
50
|
+
|
|
51
|
+
```js
|
|
52
|
+
reachGoal("form_open");
|
|
53
|
+
reachGoal("form_click"); // автоматически подключаются из модуля форм
|
|
54
|
+
reachGoal("form_change"); // автоматически подключаются из модуля форм
|
|
55
|
+
reachGoal("form_submit");
|
|
56
|
+
reachGoal("form_required");
|
|
57
|
+
reachGoal("form_error");
|
|
58
|
+
reachGoal("form_success");
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
`getFormDataObject` нужна для отслеживания заявок в Calltouch
|
|
62
|
+
|
|
63
|
+
```js
|
|
64
|
+
import { getFormDataObject } from '@alexsab-ru/scripts';
|
|
65
|
+
|
|
66
|
+
document.querySelectorAll("form").forEach((form) => {
|
|
67
|
+
form.onsubmit = async (event) => {
|
|
68
|
+
|
|
69
|
+
var formData = new FormData(form);
|
|
70
|
+
// ...
|
|
71
|
+
var formDataObj = getFormDataObject(formData, form.id);
|
|
72
|
+
|
|
73
|
+
await fetch("https://example.com/api/lead/", {
|
|
74
|
+
// ...
|
|
75
|
+
})
|
|
76
|
+
.then((res) => res.json())
|
|
77
|
+
.then((data) => {
|
|
78
|
+
if (data.answer == "required") {
|
|
79
|
+
reachGoal("form_required");
|
|
80
|
+
return;
|
|
81
|
+
} else if (data.answer == "error") {
|
|
82
|
+
reachGoal("form_error");
|
|
83
|
+
return;
|
|
84
|
+
} else {
|
|
85
|
+
reachGoal("form_success", formDataObj);
|
|
86
|
+
}
|
|
87
|
+
form.reset();
|
|
88
|
+
})
|
|
89
|
+
.catch((error) => {
|
|
90
|
+
reachGoal("form_error");
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
});
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Цели могут выполняться такие
|
|
97
|
+
|
|
98
|
+
Взаимодействия с формой
|
|
99
|
+
|
|
100
|
+
- **form_open** – открыл форму
|
|
101
|
+
- **form_click** – кликнул по форме
|
|
102
|
+
- **form_change** – изменения в форме
|
|
103
|
+
- **form_submit** – нажал кнопку Отправить
|
|
104
|
+
- **form_required** – не полное заполнение формы
|
|
105
|
+
- **form_error** – ошибка, данные по какой-то причине не отправились
|
|
106
|
+
- **form_success** – получит положительный ответ от сервера, т.е. данные отправились
|
|
107
|
+
- **form_close** – закрыл форму
|
|
108
|
+
|
|
109
|
+
Взаимодейтсвие с телефоном
|
|
110
|
+
|
|
111
|
+
- **phone_click** — клик по телефону мышкой
|
|
112
|
+
- **phone_contextmenu** — открытие контекстного меню на телефоне правой кнопкой мыши
|
|
113
|
+
- **phone_copy** — копирование выделенного телефона
|
|
114
|
+
|
|
115
|
+
Если где-то есть кликабельный email на странице, то будут отрабатываться цели на нем
|
|
116
|
+
|
|
117
|
+
- **email_click** — клик по email мышкой
|
|
118
|
+
- **email_contextmenu** — открытие контекстного меню на email правой кнопкой мыши
|
|
119
|
+
- **email_copy** — копирование выделенного email
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
## Модуль куков
|
|
123
|
+
|
|
124
|
+
```js
|
|
125
|
+
import { getCookie, setCookie, deleteCookie, cookiecook } from './cookie';
|
|
126
|
+
|
|
127
|
+
getCookie('cookie_name');
|
|
128
|
+
setCookie('cookie_name');
|
|
129
|
+
deleteCookie('cookie_name');
|
|
130
|
+
cookiecook(days);
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Модуль Calltouch
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
import { createRequest } from '@alexsab-ru/scripts';
|
|
137
|
+
|
|
138
|
+
// Отправка заявки на обратный возов в CallTouch
|
|
139
|
+
createRequest("ct_callback", "+7 (987) 654-32-10");
|
|
140
|
+
|
|
141
|
+
// для показа лога нужно использовать третий парамтер
|
|
142
|
+
createRequest("ct_callback", "+7 (987) 654-32-10", true);
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Модуль для форм
|
|
146
|
+
|
|
147
|
+
```js
|
|
148
|
+
import { connectForms, cookiecook } from '@alexsab-ru/scripts';
|
|
149
|
+
|
|
150
|
+
cookiecook();
|
|
151
|
+
connectForms('https://alexsab.ru/lead/test/', function() {
|
|
152
|
+
console.log("sucess lead");
|
|
153
|
+
});
|
|
154
|
+
```
|
package/lib/form.js
CHANGED
|
@@ -119,8 +119,7 @@ const showMessageModal = (messageModal, icon, message) => {
|
|
|
119
119
|
messageModal.classList.remove("hidden");
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
|
|
123
|
-
export const connectForms = (url, callback, callback_error, ct_routeKey = 'ct_callback', verbose = false) => {
|
|
122
|
+
export const connectForms = (url, callback, callback_error, ct_routeKey = '', verbose = false) => {
|
|
124
123
|
|
|
125
124
|
// Отправка всех форм
|
|
126
125
|
document.querySelectorAll("form").forEach((form) => {
|
|
@@ -188,9 +187,13 @@ document.querySelectorAll("form").forEach((form) => {
|
|
|
188
187
|
let formDataObj = {};
|
|
189
188
|
try {
|
|
190
189
|
// Отправка заявки на обратный возов в CallTouch
|
|
191
|
-
|
|
192
|
-
|
|
190
|
+
if(ct_routeKey != '') {
|
|
191
|
+
const requestData = await createRequest(ct_routeKey, phone.value, verbose);
|
|
192
|
+
formData.append("ct_callback", true);
|
|
193
|
+
formData.append("ctw_createRequest", JSON.stringify(requestData));
|
|
194
|
+
}
|
|
193
195
|
} catch (error) {
|
|
196
|
+
formData.append("ctw_createRequest", error);
|
|
194
197
|
verbose && console.error("Error during request Calltouch callback:", error);
|
|
195
198
|
formDataObj = getFormDataObject(formData, form.id);
|
|
196
199
|
}
|