@alexsab-ru/scripts 0.0.4 → 0.1.0

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.
Files changed (3) hide show
  1. package/README.md +74 -24
  2. package/lib/analytics.js +5 -5
  3. package/package.json +6 -6
package/README.md CHANGED
@@ -1,36 +1,86 @@
1
- # scripts
2
- common libs for our websites
1
+ # @alexsab-ru/scripts
3
2
 
4
- ## Install and update
3
+ common libs for websites
4
+
5
+ ## Installation
5
6
  ```bash
6
- pnpm i https://github.com/alexsab-ru/scripts
7
+ pnpm i @alexsab-ru/scripts
8
+ ```
9
+
10
+ ## Analytics module
11
+
12
+ `reachGoal` and `pageView` functions push to `dataLayer` some data with goal name
13
+ ```js
14
+ reachGoal("goalName");
15
+ pageView(goalName);
16
+ ```
17
+
18
+ In GTM you can use them for send goals to your analytic system
19
+
20
+ ```js
21
+ {
22
+ event: "reachGoal-goalName",
23
+ eventAction: "goalName"
24
+ }
7
25
  ```
8
26
 
9
- ### Send goals Analytics.js
27
+ Use example:
10
28
 
11
29
  ```js
12
- import '/node_modules/scripts/js/analytics.js';
13
-
14
- window.WebsiteAnalytics.dataLayer("phone-click");
15
- window.WebsiteAnalytics.dataLayer("phone-copy");
16
- window.WebsiteAnalytics.dataLayer("phone-contextmenu");
17
- window.WebsiteAnalytics.dataLayer("email-click");
18
- window.WebsiteAnalytics.dataLayer("email-copy");
19
- window.WebsiteAnalytics.dataLayer("email-contextmenu");
20
- window.WebsiteAnalytics.dataLayer("video-click");
21
- window.WebsiteAnalytics.dataLayer("form-open");
22
- window.WebsiteAnalytics.dataLayer("form-submit");
23
- window.WebsiteAnalytics.dataLayer("form-required");
24
- window.WebsiteAnalytics.dataLayer("form-submit");
25
- window.WebsiteAnalytics.dataLayer("form-error");
30
+ import { reachGoal } from '@alexsab-ru/scripts';
31
+
32
+ // automatic assign from module
33
+ reachGoal("phone_click");
34
+ reachGoal("phone_copy");
35
+ reachGoal("phone_contextmenu");
36
+ reachGoal("email_click");
37
+ reachGoal("email_copy");
38
+ reachGoal("email_contextmenu");
26
39
  ```
27
40
 
28
- Insert before send
41
+ For form's analytics you may use these goals
42
+
29
43
  ```js
30
- var formDataObj = window.WebsiteAnalytics.getFormDataObject(formData, form.id);
44
+ reachGoal("form_open");
45
+ reachGoal("form_click"); // automatic assign from module
46
+ reachGoal("form_change"); // automatic assign from module
47
+ reachGoal("form_submit");
48
+ reachGoal("form_required");
49
+ reachGoal("form_error");
50
+ reachGoal("form_success");
31
51
  ```
32
52
 
33
- Insert when Success callback
53
+ `getFormDataObject` is needed for Calltouch request tag.
54
+
34
55
  ```js
35
- window.WebsiteAnalytics.dataLayer("form-success", formDataObj);
36
- ```
56
+ import { getFormDataObject } from '@alexsab-ru/scripts';
57
+
58
+ document.querySelectorAll("form").forEach((form) => {
59
+ form.onsubmit = async (event) => {
60
+
61
+ var formData = new FormData(form);
62
+ // ...
63
+ var formDataObj = getFormDataObject(formData, form.id);
64
+
65
+ await fetch("https://example.com/api/lead/", {
66
+ // ...
67
+ })
68
+ .then((res) => res.json())
69
+ .then((data) => {
70
+ if (data.answer == "required") {
71
+ reachGoal("form_required");
72
+ return;
73
+ } else if (data.answer == "error") {
74
+ reachGoal("form_error");
75
+ return;
76
+ } else {
77
+ reachGoal("form_success", formDataObj);
78
+ }
79
+ form.reset();
80
+ })
81
+ .catch((error) => {
82
+ reachGoal("form_error");
83
+ });
84
+ };
85
+ });
86
+ ```
package/lib/analytics.js CHANGED
@@ -15,7 +15,7 @@ export function pageView(eventAction, t = {}) {
15
15
  }
16
16
 
17
17
  export function dl(event, t = {}) {
18
- console.log(event, t);
18
+ // console.log(event, t);
19
19
  void 0 !== window.dataLayer && window.dataLayer.push({
20
20
  event: event,
21
21
  ...t
@@ -86,13 +86,13 @@ export function addEmailGoals(item) {
86
86
  {
87
87
  selector: 'form input',
88
88
  action: 'click',
89
- goal: 'form-click',
89
+ goal: 'form_click',
90
90
  title: 'Клик в поле любой формы',
91
91
  },
92
92
  {
93
93
  selector: 'form input',
94
94
  action: 'change',
95
- goal: 'form-change',
95
+ goal: 'form_change',
96
96
  title: 'Изменения полей любой формы',
97
97
  },
98
98
 
@@ -101,7 +101,7 @@ export function addEmailGoals(item) {
101
101
  goals.forEach(function(value, index, array){
102
102
  if(value.goal != null) {
103
103
  document.querySelectorAll(value.selector).forEach(function(element) {
104
- console.log("Set \"" + value.goal + "\" goal", element);
104
+ // console.log("Set \"" + value.goal + "\" goal", element);
105
105
  element.addEventListener(value.action, function(){
106
106
  reachGoal(value.goal, {
107
107
  title: value.title,
@@ -110,7 +110,7 @@ export function addEmailGoals(item) {
110
110
  });
111
111
  } else if(value.hit != null) {
112
112
  document.querySelectorAll(value.selector).forEach(function(element) {
113
- console.log("Set \"" + value.goal + "\" hit", element);
113
+ // console.log("Set \"" + value.goal + "\" hit", element);
114
114
  element.addEventListener(value.action, function(){
115
115
  pageView(value.hit, {
116
116
  title: value.title,
package/package.json CHANGED
@@ -1,11 +1,8 @@
1
1
  {
2
2
  "name": "@alexsab-ru/scripts",
3
- "version": "0.0.4",
3
+ "version": "0.1.0",
4
4
  "description": "common libs for websites",
5
5
  "main": "index.js",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
9
6
  "repository": {
10
7
  "type": "git",
11
8
  "url": "git+https://github.com/alexsab-ru/scripts.git"
@@ -25,5 +22,8 @@
25
22
  "publishConfig": {
26
23
  "access": "public"
27
24
  },
28
- "homepage": "https://github.com/alexsab-ru/scripts#readme"
29
- }
25
+ "homepage": "https://github.com/alexsab-ru/scripts#readme",
26
+ "scripts": {
27
+ "test": "echo \"Error: no test specified\" && exit 1"
28
+ }
29
+ }