InnovationLab/public/js/gaEvent.js

import getParams from './getParams.js';

gaEvent = function () {
	//private menbers
	const kolMan = ['Yang', 'Hao', 'Drangadrang', 'Cookingdairy', 'Ku', 'Betty', 'Ralf', 'Chefchouchou', 'Albee', 'commute_Chang', 'commute_Li', 'commute_He', 'ordinary']
	let kolName; // 指定kol
	let currentKol; //目前sroll到的kol
	let _keyName; // 參數名稱
	let ordinaryId;
	let pathAdd = "";

	// ---------  GA 碼 ---------  
	window.dataLayer = window.dataLayer || [];
	function gtag() { dataLayer.push(arguments); }
	gtag('js', new Date());
	gtag('config', "G-4DZD17Z80F");

	//private methods
	function init() {
		console.log('gaEvent is loaded.');

		allSiteEvent(); // 全站

		if(location.host == "www.our-work.com.tw") {
			pathAdd = "/demosite/2022/2022-pxgo/justahour"
		}

		if (location.pathname == pathAdd+"/index.html" || location.pathname == pathAdd+"/") {
			// 取得是哪位Kol
			if (getParams('kol') != null && kolMan.includes(getParams('kol'))) {
				kolName = getParams('kol')
			} else {
				kolName = 'ordinary' // 預設kol
			}
			// console.log(kolName)

			_keyName = ("Kol_" + kolName)
			indexPageEvent(); // intro & index 頁面
			// console.log(typeof _keyName)
		} 

		if (location.pathname == pathAdd+"/recipe.html") {
			// 取得是哪位Kol
			if (getParams('kol') != null && kolMan.includes(getParams('kol'))) {
				kolName = getParams('kol')
			} else {
				kolName = 'Ralf' // 預設kol
			}

			_keyName = ("Kol_" + kolName)
			recipePageEvent();  // 食譜頁
			// console.log(typeof _keyName)
		} 

		if (location.pathname == pathAdd+"/search.html") {
			searchPageEvent();
		} 


		if (location.pathname == pathAdd+"/recipe_ordinary.html") {
			let idRegx = /^(?:[1-9]|[1-4][0-9]|50)$/
			// 取得是哪位素人
			if (getParams('ordinary') != null && getParams('ordinary').match(idRegx)) {
				ordinaryId = getParams('ordinary')
			} else {
				ordinaryId = 1
			}
			recipePageOrdinaryEvent();
			console.log(ordinaryId)
		} 

	}

	// 全站共用
	function allSiteEvent(){
		let eventKey = "ALL";
		$(".header .hamburger").click(function(){
			gtag('event', "click", { [eventKey]: "btn_menu" })
			// console.log([eventKey]+",btn_menu")
		})
		$(".header .logo").click(function(){
			gtag('event', "click", { [eventKey]: "btn_logo" })
		})
		$(".header .nav__item a").click(function(){
			let eventName = $(this).data("event");
			gtag('event', eventName, { [eventKey]: "btn_menu" })
			// console.log([eventName]+","+[eventKey]+",btn_menu")
		})
		// 點擊食譜頁tag
		$(".recipe__tag__list").on("click",".recipe__tag__item",function(){
			let eventName = "tag_"+ $(this).text();
			console.log(eventName)
			gtag('event', eventName, { "justahour_search": "tag_function" });
		});
	}

	// intro & index 頁面
	function indexPageEvent(){

		let goToIndex = setInterval(function(){
			if($(".index").css("opacity") == 1){
				detectTouch();
				detectKol();
				clearInterval(goToIndex);
			}
		},500)

		// 神啊~請救救我煮什麼好? 
		$(".intro__overlay,.intro__tip").click(function(){
			gtag('event', "click", { "intro": "btn_god" });
		});
		// 喇叭
		$(".intro__volume").click(function(){
			gtag('event', "click", { "intro": "btn_sound" });
		});
		// 直接找救星
		$(".intro__skip").click(function(){
			gtag('event', "click", { "intro": "btn_findhelp" });
		});

		// 點擊kol
		$(".index__kv").on("click",".index__slide,.index__dish",function(){
			let val = "into_KOL_"+ currentKol
			if(currentKol != 'ordinary') {
				gtag('event', "click", { "index": val });
				// console.log(val)
			}
			
		});

		$(".modal-promo .modal-body a").click(function(){
			if(kolName == "ordinary") {
				gtag('event', "amateur_shareback", { "amateur_shareback": "amateur_shareback" });
			}else {
				gtag('event', "click", { [_keyName]: "btn_shareback" });
			}
		})

		// 偵測手指滑動
		function detectTouch(){
			var startX, startY, moveX, moveY;
			//here clientX, and clientY means X and Y coordinates
			function touchStart(e) {
				startX = e.touches[0].clientX;
				startY = e.touches[0].clientY;
			}
	
			function touchMove(e) {
				moveX = e.touches[0].clientX;
				moveY = e.touches[0].clientY;
			}
			function touchEnd() {
				if (startX < moveX) {
					// console.log('right');
					gtag('event', "scroll", { "index": "scroll_right" });
				} else if (startX > moveX) {
					// console.log('left');
					gtag('event', "scroll", { "index": "scroll_left" });
				}
				if (startY < moveY) {
					// console.log('down');
				} else if (startY > moveY) {
					// console.log('up');
				}
			}
			document.addEventListener('touchstart', touchStart,false);
			document.addEventListener('touchmove', touchMove, false);
			document.addEventListener('touchend', touchEnd, false);
		}

		// 偵測中間KOL
		function detectKol(){
			currentKol = kolName;
			$(".index__kv").scroll(function(){
				let containerLeft = $(".index__kv").scrollLeft();
				let containerCenterStart = containerLeft + ($(window).width() / 2);
				// console.log("containerLeft: " + containerLeft)
				$(".index__slide").each(function(){
					let dataKol = $(this).data('kol');
					let target = $(this);
					let targetW = target.width();
					let targetLeft = target.position().left
					// console.log(dataKol + "-targetLeft: " + targetLeft);

					if (containerCenterStart > targetLeft && containerCenterStart < (targetLeft + targetW)) {
						currentKol = dataKol;
						// console.log(currentKol + "-最小: " + targetLeft + ", 最大: " + targetLeft + targetW)
						if (currentKol == 'commute' || currentKol == 'HaoYang') {

							target.find(".index__slide-item").each(function () {
								let childDataKol = $(this).data('kol');
								let childtarget = $(this);
								let childtargetW = childtarget.width();
								let childtargetLeft = childtarget.position().left
								let childStart = targetLeft + childtargetLeft
								let childEnd = targetLeft + childtargetLeft + childtargetW
								// console.log(childDataKol+" - childStart: " + childStart + ", childEnd: " + childEnd)

								if (containerCenterStart > childStart && containerCenterStart < childEnd) {
									currentKol = childDataKol;
									// console.log(currentKol + "-最小: " + targetLeft + ", 最大: " + targetLeft + targetW)
									// console.log("currentKol: " + currentKol)
								}
							});
						}
					}	
			
				});
				
			});
		}


	}

	// 食譜頁
	function recipePageEvent(){
		setTimeout(function(){
			scrollDetectPercent();
		},500)
		

		// 播放食譜
		let isRecipeFirstPlay = false;
		$(".recipeWrapper .main").click(function(){
			if (!isRecipeFirstPlay) {
				gtag('event', "click", { [_keyName]: "btn_play" });
				isRecipeFirstPlay = true;
			}
		});

		// 播放/暫停食譜鍵
		$(".recipe__teaching").on("click",".plyr__control",function(){
			if ($(this).hasClass("plyr__control--pressed")) {
				gtag('event', "click", { [_keyName]: "btn_pauseicon" })
			}else {
				gtag('event', "click", { [_keyName]: "btn_playicon" })
			}
		});

		// 料理步驟
		$(".recipe__capture").click(function(){
			gtag('event', "click", { [_keyName]: "review_recipe" })
		})

		// 食材列表
		$(".recipe__basket").on("click",".recipe__ingredient",function(){
			let num =  $(this).index() + 1
			let val = "btn_food" + num
			// console.log(val)
			gtag('event', "click", { [_keyName]: val })
		});

		// 名菜列表
		$(".recipe__more__box").on("click",".recipe__else",function(){
			let url = $(this).attr("href");
			let man = url.replace("./recipe.html?kol=","").toLowerCase();
			let val = "btn_" + man+"_food"
			// console.log(val)
			gtag('event', "click", { [_keyName]: val });
		});

		// 直接分享
		$(".recipe__btn-share").click(function(){
			gtag('event', "click", { [_keyName]: "btn_share" });
		});

		// 開啟濾鏡
		$(".recipe__btn-filter").click(function () {
			gtag('event', "click", { [_keyName]: "btn_filter" });
		})

		// 回首頁
		$(".recipe__goback a").click(function(){
			gtag('event', "click", { [_keyName]: "btn_backtoindex" });
		});

		// 一鍵下單
		$(".recipe__buy").click(function () {
			gtag('event', "click", { [_keyName]: "btn_shopcart" });
		});

		function scrollDetectPercent(){
			let unit = $(".recipeWrapper").height() / 100
			const reachNum = 50
			let percentH = unit * reachNum
			let isOverReach = false;
			// console.log(percentH)
			$(window).scroll(function(){
				if($(window).scrollTop()>percentH) {
					if(!isOverReach) {
						gtag('event', "scroll", { [_keyName]: "percent_50" });
						isOverReach = true;
					}
				}
			})
		}
	}

	// 素人食譜頁
	function recipePageOrdinaryEvent(){
		

		// 料理步驟
		$(".recipe__open").click(function(){
			let eventName = "amateur_"+ordinaryId+"_step"
			let eventKey = "amateur_"+ordinaryId
			gtag('event', eventName, { [eventKey]: "amateur_step" })
		})

		// 直接分享
		$(".recipe__btn-share").click(function(){
			let eventName = "amateur_"+ordinaryId+"_share"
			let eventKey = "amateur_"+ordinaryId
			gtag('event', eventName, { [eventKey]: "amateur_share" });
		});

		// 一鍵下單
		$(".recipe__buy").click(function () {
			let eventName = "amateur_"+ordinaryId+"_btn_shopcart"
			let eventKey = "amateur_"+ordinaryId
			gtag('event', eventName, { [eventKey]: "amateur_shop" });
		});

		function scrollDetectPercent(){
			let unit = $(".recipeWrapper").height() / 100
			const reachNum = 50
			let percentH = unit * reachNum
			let isOverReach = false;
			// console.log(percentH)
			$(window).scroll(function(){
				if($(window).scrollTop()>percentH) {
					if(!isOverReach) {
						gtag('event', "scroll", { [_keyName]: "percent_50" });
						isOverReach = true;
					}
				}
			})
		}
	}

	// search 頁面
	function searchPageEvent(){

		// 點擊素人 - 人像
		$(".search__kv__container").on("click",".search__kv__slide",function(){
			let eventName = "amateur_"+ $(this).data("ordinary");
			console.log(eventName)
			gtag('event', eventName, { "justahour_search": "banner_enter" });
		});
		// 點擊素人 - 菜色名
		$(".search__kv__container").on("click",".search__kv__dish",function(){
			let eventName = "amateur_"+ $(this).data("dish");
			console.log(eventName)
			gtag('event', eventName, { "justahour_search": "banner_enter" });
		});

		// 點擊尋找料理靈感tag
		$(".search__form").on("click",".search__form__item",function(){
			let eventName = "filter_"+ $(this).data("tag");
			console.log(eventName)
			gtag('event', eventName, { "justahour_search": "filter_function" });
		});

		// 搜尋菜色 按鍵
		$(".search__form").on("click",".search__form__cta",function(){
			gtag('event', "result_dish", { "justahour_search": "filter_function" });
		});

		// 清除全部 按鍵
		$(".search__form").on("click",".search__form__clear",function(){
			gtag('event', "result_clear", { "justahour_search": "filter_function" });
		});
	}

	{
		$(document).ready(function () {
			init();
		});
	}

	//public
	return {
	};
};

var gaEvent = new gaEvent();