@alexsab-ru/scripts 0.0.3 → 0.1.0

package/README.md

@@ -1,36 +1,86 @@
-# scripts
-common libs for our websites
+# @alexsab-ru/scripts
 
-## Install and update
+common libs for websites
+
+## Installation
 ```bash
-pnpm i https://github.com/alexsab-ru/scripts
+pnpm i @alexsab-ru/scripts
+```
+
+## Analytics module
+
+`reachGoal` and `pageView` functions push to `dataLayer` some data with goal name
+```js
+reachGoal("goalName");
+pageView(goalName);
+```
+
+In GTM you can use them for send goals to your analytic system
+
+```js
+{
+	event: "reachGoal-goalName",
+	eventAction: "goalName"
+}
 ```
 
-### Send goals Analytics.js
+Use example:
 
 ```js
-import '/node_modules/scripts/js/analytics.js';
-
-window.WebsiteAnalytics.dataLayer("phone-click");
-window.WebsiteAnalytics.dataLayer("phone-copy");
-window.WebsiteAnalytics.dataLayer("phone-contextmenu");
-window.WebsiteAnalytics.dataLayer("email-click");
-window.WebsiteAnalytics.dataLayer("email-copy");
-window.WebsiteAnalytics.dataLayer("email-contextmenu");
-window.WebsiteAnalytics.dataLayer("video-click");
-window.WebsiteAnalytics.dataLayer("form-open");
-window.WebsiteAnalytics.dataLayer("form-submit");
-window.WebsiteAnalytics.dataLayer("form-required");
-window.WebsiteAnalytics.dataLayer("form-submit");
-window.WebsiteAnalytics.dataLayer("form-error");
+import { reachGoal } from '@alexsab-ru/scripts';
+
+// automatic assign from module
+reachGoal("phone_click");
+reachGoal("phone_copy");
+reachGoal("phone_contextmenu");
+reachGoal("email_click");
+reachGoal("email_copy");
+reachGoal("email_contextmenu");
 ```
 
-Insert before send
+For form's analytics you may use these goals
+
 ```js
-var formDataObj = window.WebsiteAnalytics.getFormDataObject(formData, form.id);
+reachGoal("form_open");
+reachGoal("form_click"); // automatic assign from module
+reachGoal("form_change"); // automatic assign from module
+reachGoal("form_submit");
+reachGoal("form_required");
+reachGoal("form_error");
+reachGoal("form_success");
 ```
 
-Insert when Success callback
+`getFormDataObject` is needed for Calltouch request tag.
+
 ```js
-window.WebsiteAnalytics.dataLayer("form-success", formDataObj);
-```
+import { getFormDataObject } from '@alexsab-ru/scripts';
+
+document.querySelectorAll("form").forEach((form) => {
+	form.onsubmit = async (event) => {
+
+		var formData = new FormData(form);
+		// ...
+		var formDataObj = getFormDataObject(formData, form.id);
+
+		await fetch("https://example.com/api/lead/", {
+			// ...
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				if (data.answer == "required") {
+					reachGoal("form_required");
+					return;
+				} else if (data.answer == "error") {
+					reachGoal("form_error");
+					return;
+				} else {
+					reachGoal("form_success", formDataObj);
+				}
+				form.reset();
+			})
+			.catch((error) => {
+				reachGoal("form_error");
+			});
+	};
+});
+```

package/lib/analytics.js

@@ -1,7 +1,21 @@
 window.dataLayer = window.dataLayer || [];
 
-export function dataLayer(event, t = {}) {
-		console.log(event);
+export function reachGoal(eventAction, t = {}) {
+		t.eventAction = eventAction;
+		dl("reachGoal-"+eventAction, {
+			...t
+		})
+	}
+
+export function pageView(eventAction, t = {}) {
+		t.eventAction = eventAction;
+		dl("pageView-"+eventAction, {
+			...t
+		})
+	}
+
+export function dl(event, t = {}) {
+		// console.log(event, t);
 		void 0 !== window.dataLayer && window.dataLayer.push({
 			event: event,
 			...t
@@ -9,10 +23,10 @@ export function dataLayer(event, t = {}) {
 	}
 
 export function getFormDataObject(formData, form_id) {
-		let obj = {"EventProperties":{}};
-		formData.forEach((value, key) => (obj["EventProperties"][key] = value));
-		obj['EventCategory'] = 'Lead';
-		obj["EventProperties"]['formID'] = form_id;
+		let obj = {"eventProperties":{}};
+		formData.forEach((value, key) => (obj["eventProperties"][key] = value));
+		obj['eventCategory'] = 'Lead';
+		obj["eventProperties"]['formID'] = form_id;
 		obj['sourceName'] = 'page';
 		return obj;
 	}
@@ -39,25 +53,25 @@ export function ymPage(pageName,goalParams) {
 
 export function addPhoneGoals(item) {
 		item.addEventListener('click', function(evt) {
-			dataLayer('phone-click');
+			reachGoal('phone_click');
 		});
 		item.addEventListener('copy', function(evt) {
-			dataLayer('phone-copy');
+			reachGoal('phone_copy');
 		});
 		item.addEventListener('contextmenu', function(evt) {
-			dataLayer('phone-contextmenu');
+			reachGoal('phone_contextmenu');
 		});
 	}
 
 export function addEmailGoals(item) {
 		item.addEventListener('click', function(evt) {
-			dataLayer('email-click');
+			reachGoal('email_click');
 		});
 		item.addEventListener('copy', function(evt) {
-			dataLayer('email-copy');
+			reachGoal('email_copy');
 		});
 		item.addEventListener('contextmenu', function(evt) {
-			dataLayer('email-contextmenu');
+			reachGoal('email_contextmenu');
 		});
 	}
 
@@ -72,13 +86,13 @@ export function addEmailGoals(item) {
 		{
 			selector: 'form input',
 			action: 'click',
-			goal: 'form-click',
+			goal: 'form_click',
 			title: 'Клик в поле любой формы',
 		},
 		{
 			selector: 'form input',
 			action: 'change',
-			goal: 'form-change',
+			goal: 'form_change',
 			title: 'Изменения полей любой формы',
 		},
 
@@ -87,25 +101,23 @@ export function addEmailGoals(item) {
 	goals.forEach(function(value, index, array){
 		if(value.goal != null) {
 			document.querySelectorAll(value.selector).forEach(function(element) {
-				console.log(["Set \"" + value.goal + "\" goal", element]);
+				// console.log("Set \"" + value.goal + "\" goal", element);
 				element.addEventListener(value.action, function(){
-					dataLayer("reachGoal", {
-						eventAction: value.goal,
+					reachGoal(value.goal, {
 						title: value.title,
 					});
 				});
 			});
 		} else if(value.hit != null) {
 			document.querySelectorAll(value.selector).forEach(function(element) {
-				console.log(["Set \"" + value.goal + "\" hit", element]);
+				// console.log("Set \"" + value.goal + "\" hit", element);
 				element.addEventListener(value.action, function(){
-					dataLayer("pageView", {
-						eventAction: value.hit,
+					pageView(value.hit, {
 						title: value.title,
 					});
 				});
 			});
 		} else {
-			console.warn(["Ошибка в списке целей", value]);
+			console.warn("Ошибка в списке целей", value);
 		}
 	});

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@alexsab-ru/scripts",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "common libs for websites",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alexsab-ru/scripts.git"
@@ -25,5 +22,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://github.com/alexsab-ru/scripts#readme"
-}
+  "homepage": "https://github.com/alexsab-ru/scripts#readme",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}