dbm 1.4.15 → 1.4.16

package/site/BrowserUpdater.js

@@ -16,12 +16,12 @@ export default class BrowserUpdater extends Dbm.core.BaseObject {
 		return this;
 	}
 
-	_trackPage(aUrl) {
+	_trackPage(aUrl, aTitle) {
 		//console.log("_trackPage");
 		
 		let trackingController = Dbm.getInstance().repository.getItem("trackingController").controller;
 		if(trackingController) {
-			trackingController.trackPage(aUrl);
+			trackingController.trackPage(aUrl, aTitle);
 		}
 	}
 
@@ -59,6 +59,6 @@ export default class BrowserUpdater extends Dbm.core.BaseObject {
 
 		window.scrollTo(0, 0);
 
-		this._trackPage(document.location.href);
+		this._trackPage(document.location.href, document.title);
 	}
 }

package/startup/index.js

@@ -1,4 +1,5 @@
 import Dbm from "../index.js";
+import React from "react";
 
 export {default as Runner} from "./Runner.js";
 export {default as Controller} from "./Controller.js";
@@ -34,5 +35,4 @@ export const setupLibrary = function() {
     library.setValue("Dbm/flow/addUpdateCommandWhenMatched", Dbm.flow.addUpdateCommandWhenMatched);
     library.setValue("Dbm/flow/updatefunctions/logic/Condition", Dbm.flow.updatefunctions.logic.Condition);
     library.setValue("Dbm/flow/updatefunctions/logic/Switch", Dbm.flow.updatefunctions.logic.Switch);
-    
 }

package/tracking/Controller.js

@@ -18,11 +18,7 @@ export default class Controller extends Dbm.core.BaseObject {
         //aItem.propertyInput("allowMarketing", this.item.getProperty("allowMarketing"));
         //aItem.propertyInput("allowStatistics", this.item.getProperty("allowStatistics"));
 
-        let trackers = [].concat(this.item.trackers);
-
-        trackers.push(aItem);
-
-        this.item.trackers = trackers;
+        this.item.addToArray("trackers", aItem);
 
         if(this.item.active) {
             aItem.controller.startTracking();
@@ -37,12 +33,22 @@ export default class Controller extends Dbm.core.BaseObject {
         return this;
     }
 
+    removeTracker(aItem) {
+        this.item.removeFromArray("trackers", aItem);
+
+        if(this.item.active) {
+            aItem.controller.stopTracking();
+        }
+
+        return this;
+    }
+
     setupPermissionsFromCookies() {
 		this.item.allowStatistics = Cookies.get("cookie/allowStatistics") === "1";
 		this.item.allowMarketing = Cookies.get("cookie/allowMarketing") === "1";
 
         let cookieBarHiddenInitialSetting = Cookies.get("cookie/hideCookieBar") === "1";
-        let showingCookieBar = Dbm.getInstance().repository.getItem("userSettings").setValue("hideCookieBar", cookieBarHiddenInitialSetting);
+        Dbm.getRepositoryItem("userSettings").setValue("hideCookieBar", cookieBarHiddenInitialSetting);
 		
 		return this;
 	}
@@ -135,14 +141,14 @@ export default class Controller extends Dbm.core.BaseObject {
         return this;
     }
 
-    trackPage(aUrl) {
+    trackPage(aUrl, aTitle = null) {
         if(this.item.active && this.item.allowStatistics) {
             let currentArray = this.item.trackers;
             let currentArrayLength = currentArray.length;
             
             for(let i = 0; i < currentArrayLength; i++) {
                 let currentTracker = currentArray[i];
-                currentTracker.controller.trackPage(aUrl);
+                currentTracker.controller.trackPage(aUrl, aTitle);
             }
         }
     }

package/tracking/DataLayerTracker.js

@@ -7,6 +7,8 @@ export default class DataLayerTracker extends Dbm.core.BaseObject {
 		this._statisticsTracking = false;
 		this._marketingTracking = false;
 
+		this.item.setValue("setConsent", true);
+		this.item.setValue("sendMarketingEvents", true);
 		this.item.setValue("ecommerceDataWrapper", null);
 		this.item.setValue("eventNameMap", new Dbm.repository.Item());
     }
@@ -29,12 +31,15 @@ export default class DataLayerTracker extends Dbm.core.BaseObject {
 			window.dataLayer = [];
 		}
 		
-		this._gtag("consent", "default", {
-			"ad_storage": "denied",
-			"ad_user_data": "denied",
-			"ad_personalization": "denied",
-			"analytics_storage": "denied"
-		});
+		if(this.item.setConsent) {
+			this._gtag("consent", "default", {
+				"ad_storage": "denied",
+				"ad_user_data": "denied",
+				"ad_personalization": "denied",
+				"analytics_storage": "denied"
+			});
+		}
+		
 		
 		return this;
 	}
@@ -42,9 +47,11 @@ export default class DataLayerTracker extends Dbm.core.BaseObject {
     startStatisticsTracking() {
 		
 		this._statisticsTracking = true;
-		this._gtag("consent", "update", {
-			"analytics_storage": "granted"
-		});
+		if(this.item.setConsent) {
+			this._gtag("consent", "update", {
+				"analytics_storage": "granted"
+			});
+		}
         this.addToDataLayer({"event": "enableStatistics"});
 		this.addToDataLayer({"event": "trackCurrentPage"});
 		
@@ -54,11 +61,13 @@ export default class DataLayerTracker extends Dbm.core.BaseObject {
 	startMarketingTracking() {
 		
 		this._marketingTracking = true;
-		this._gtag("consent", "update", {
-			"ad_storage": "granted",
-			"ad_user_data": "granted",
-			"ad_personalization": "granted"
-		});
+		if(this.item.setConsent) {
+			this._gtag("consent", "update", {
+				"ad_storage": "granted",
+				"ad_user_data": "granted",
+				"ad_personalization": "granted"
+			});
+		}
         this.addToDataLayer({"event": "enableMarketing"});
 		
 		return this;
@@ -98,7 +107,7 @@ export default class DataLayerTracker extends Dbm.core.BaseObject {
 			
 		}
 
-        if(this._marketingTracking) {
+        if(this._marketingTracking && this.item.sendMarketingEvents) {
 			this.addToDataLayer({"event": "trackMarketingEvent", "value": {"name": aEventName, "data": aData}});
 			if(aDataStructure === "raw") {
 				let adjustedData = {
@@ -118,10 +127,10 @@ export default class DataLayerTracker extends Dbm.core.BaseObject {
     }
 
     trackCurrentPage() {
-        this.trackPage(document.location.href);
+        this.trackPage(document.location.href, document.title);
     }
 
-    trackPage(aUrl) {
-        this.addToDataLayer({"event": "trackPage", "value": {"url": aUrl}});
+    trackPage(aUrl, aTitle = null) {
+        this.addToDataLayer({"event": "trackPage", "value": {"url": aUrl, "title": aTitle}});
     }
 }

package/tracking/GtagTracker.js

@@ -0,0 +1,112 @@
+import Dbm from "../index.js";
+
+export default class GtagTracker extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this.item.setValue("tagId", null);
+		this.item.setValue("eventNameMap", new Dbm.repository.Item());
+
+		this.item.eventNameMap.setValue("Product list view", "view_item_list");
+		this.item.eventNameMap.setValue("Product view", "view_item");
+		this.item.eventNameMap.setValue("Added to cart", "add_to_cart");
+		this.item.eventNameMap.setValue("View cart", "view_cart");
+		this.item.eventNameMap.setValue("Add shipping", "add_shipping_info");
+		this.item.eventNameMap.setValue("Purchase", "purchase");
+		this.item.eventNameMap.setValue("Checkout started", "begin_checkout");
+		this.item.eventNameMap.setValue("Add payment", "add_payment_info");
+
+		this.item.setValue("conversionIds", new Dbm.repository.Item());
+    }
+
+	addPurchaseTrackingId(aId) {
+		
+		this.item.conversionIds.setValue("purchase", aId);
+
+		return this;
+	}
+
+    addToDataLayer(aData) {
+		
+		window.dataLayer.push(aData);
+		
+		return this;
+	}
+	
+	_gtag() {
+		window.dataLayer.push(arguments);
+		
+		return this;
+	}
+
+    startTracking() {
+		if(!window.dataLayer) {
+			window.dataLayer = [];
+		}
+
+		this._gtag("config", this.item.tagId, {
+			"send_page_view": false
+		});
+		
+		return this;
+	}
+
+    startStatisticsTracking() {
+		
+		return this;
+	}
+	
+	startMarketingTracking() {
+		
+		return this;
+	}
+	
+	stopTracking() {
+		
+		return this;
+	}
+
+	_getSendData(aData) {
+		let sendData = {
+			...aData,
+			"send_to": this.item.tagId
+		}
+
+		return sendData;
+	}
+
+    trackEvent(aEventName, aData, aDataStructure = null) {
+        console.log("trackEvent");
+        console.log(aEventName, aData, aDataStructure);
+
+		let translatedEventName = this.item.eventNameMap[aEventName];
+		if(translatedEventName) {
+			aEventName = translatedEventName;
+			
+			this._gtag("event", aEventName, this._getSendData(aData));
+
+			let conversionId = this.item.conversionIds[aEventName];
+			if(conversionId) {
+				let sendData = this._getSendData(aData);
+				sendData["send_to"] += "/" + conversionId;
+				this._gtag("event", "conversion", sendData);
+			}
+		}
+
+		
+    }
+
+    trackCurrentPage() {
+        this.trackPage(document.location.href, document.title);
+    }
+
+    trackPage(aUrl, aTitle = null) {
+
+		let data = {
+			page_location: aUrl,
+			page_title: aTitle
+		};
+
+        this._gtag("event", "page_view", this._getSendData(data));
+    }
+}

package/tracking/MetaPixelTracker.js

@@ -111,7 +111,7 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
         window.fbq("track", "PageView");
     }
 
-    trackPage(aUrl) {
+    trackPage(aUrl, aTitle = null) {
 		if(!this._isStarted) return;
         window.fbq("track", "PageView");
     }

package/tracking/SingleAccountMetaPixelTracker.js

@@ -0,0 +1,118 @@
+import Dbm from "../index.js";
+
+export default class SingleAccountMetaPixelTracker extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this._isStarted = false;
+		this.item.requireProperty("pixelId");
+    }
+
+    _setupFunction() {
+		
+		if(window.fbq) return;
+		
+		let fbq = function() {
+			fbq.callMethod ? fbq.callMethod.apply(fbq, arguments) : fbq.queue.push(arguments);
+		}
+		window.fbq = fbq;
+		
+		if(!window._fbq) {
+			window._fbq = fbq;
+		}
+		
+		fbq.push = fbq;
+		fbq.loaded = true;
+		fbq.version = "2.0";
+		fbq.queue = [];
+		fbq.disablePushState = true;
+		
+		return this;
+	}
+
+    startTracking() {
+
+		//MENOTE: do nothing
+		
+		return this;
+	}
+
+    startStatisticsTracking() {
+
+		//MENOTE: do nothing
+		
+		return this;
+	}
+	
+	startMarketingTracking() {
+
+		this._isStarted = true;
+		this._setupFunction();
+		Dbm.loading.loadScript("https://connect.facebook.net/en_US/fbevents.js");
+
+		let pixelId = this.item.pixelId;
+		
+		if(this.item.pixelId) {
+			window.fbq("init", this.item.pixelId);
+			window.fbq("trackSingle", this.item.pixelId, "PageView");
+		}
+		
+		return this;
+	}
+	
+	stopTracking() {
+		
+		return this;
+	}
+
+	_convertGooogleAnalyctisData(aData) {
+
+		let data = {
+			content_type: "product",
+			value: aData.value,
+			currency: aData.currency,
+			contents: aData.items,
+			num_items: aData.items.length,
+			content_ids: Dbm.utils.ArrayFunctions.mapField(aData.items, "id")
+		};
+
+		if(aData.items.length === 1) {
+			data["content_name"] = aData.items[0]["item_name"];
+		}
+
+		return data;
+	}
+
+    trackEvent(aEventName, aData) {
+        console.log("trackEvent");
+        console.log(aEventName, aData);
+
+		if(!this._isStarted) return;
+
+		if(aEventName === "Purchase") {
+			window.fbq('trackSingle', this.item.pixelId, 'Purchase', this._convertGooogleAnalyctisData(aData), {eventID: aData.transaction_id});
+		}
+		else if(aEventName === "Product view") {
+			window.fbq('trackSingle', this.item.pixelId, 'ViewContent', this._convertGooogleAnalyctisData(aData));
+		}
+		else if(aEventName === "Added to cart") {
+			window.fbq('trackSingle', this.item.pixelId, 'AddToCart', this._convertGooogleAnalyctisData(aData));
+		}
+		else if(aEventName === "Checkout started") {
+			window.fbq('trackSingle', this.item.pixelId, 'InitiateCheckout', this._convertGooogleAnalyctisData(aData));
+		}
+		else {
+			window.fbq("trackSingleCustom", this.item.pixelId, aEventName, aData);
+		}
+    }
+
+    trackCurrentPage() {
+		if(!this._isStarted) return;
+        window.fbq("trackSingle", this.item.pixelId, "PageView");
+    }
+
+    trackPage(aUrl, aTitle = null) {
+		if(!this._isStarted) return;
+        window.fbq("trackSingle", this.item.pixelId, "PageView");
+    }
+}

package/tracking/TagManagerTracker.js

@@ -27,7 +27,7 @@ export default class TagManagerTracker extends Dbm.core.BaseObject {
 	}
 
     startStatisticsTracking() {
-		console.log("TagManagerTracker::startStatisticsTracking");
+		//console.log("TagManagerTracker::startStatisticsTracking");
 		this.loadTagManager();
 		
 		return this;
@@ -52,7 +52,7 @@ export default class TagManagerTracker extends Dbm.core.BaseObject {
         
     }
 
-    trackPage(aUrl) {
+    trackPage(aUrl, aTitle = null) {
         
     }
 }

package/tracking/index.js

@@ -4,6 +4,16 @@ export {default as Controller} from "./Controller.js";
 export {default as DataLayerTracker} from "./DataLayerTracker.js";
 export {default as MetaPixelTracker} from "./MetaPixelTracker.js";
 export {default as TagManagerTracker} from "./TagManagerTracker.js";
+export {default as GtagTracker} from "./GtagTracker.js";
+export {default as SingleAccountMetaPixelTracker} from "./SingleAccountMetaPixelTracker.js";
+
+export const addStartTagManagerMarker = function() {
+    window.dataLayer=window.dataLayer || [];
+	window.dataLayer.push({
+        "gtm.start": new Date().getTime(),
+        "event": "gtm.js"
+    });
+}
 
 export const setup = function() {
     
@@ -18,6 +28,20 @@ export const setup = function() {
     controller.addTracker(dataLayerTracker.item);
 }
 
+export const setupExternalTagManager = function() {
+    let controller = new Dbm.tracking.Controller();
+    controller.item.register("trackingController");
+
+    controller.item.allowStatistics = true;
+    controller.item.allowMarketing = true;
+    controller.start();
+
+    let dataLayerTracker = new Dbm.tracking.DataLayerTracker();
+    dataLayerTracker.item.setConsent = false;
+    dataLayerTracker.item.register("tracking/dataLayerTracker");
+    controller.addTracker(dataLayerTracker.item);
+}
+
 export const addMetaPixel = function(aPixelId) {
     let tracker = new Dbm.tracking.MetaPixelTracker();
     tracker.item.pixelId = aPixelId;

package/utils/svg/ColorMatrixFunctions.js

@@ -3,10 +3,23 @@ import Dbm from "../../index.js";
 export const floodColor = function(aR, aG, aB, aNumberOfDecimals = 4) {
     let values = "";
 
+    console.log(aR, aG, aB);
+
     values += "0 0 0 0 " + (aR/255).toFixed(aNumberOfDecimals) + " ";
     values += "0 0 0 0 " + (aG/255).toFixed(aNumberOfDecimals) + " ";
     values += "0 0 0 0 " + (aB/255).toFixed(aNumberOfDecimals) + " ";
     values += "0 0 0 1 0";
 
+    return values;
+}
+
+export const multiplyColor = function(aR, aG, aB, aNumberOfDecimals = 4) {
+    let values = "";
+
+    values += (aR/255).toFixed(aNumberOfDecimals) + " 0 0 0 0" + " ";
+    values += "0 " + (aG/255).toFixed(aNumberOfDecimals) + " 0 0 0" + " ";
+    values += "0 0 " + (aB/255).toFixed(aNumberOfDecimals) + " 0 0" + " ";
+    values += "0 0 0 1 0";
+
     return values;
 }