Problem
Google Tag Manager에서 event를 만드는데 카테고리를 현재 있는 페이지 이름으로 넣고 싶다.
하지만 그냥 page path를 가져오면 가독성이 좋지 않아 한글화를 하고 싶다.
커스텀 자바스크립트 변수로 switch로 분기태워서 나누면 될 것 같은데,
https://store.pinkfong.com/user/order/2521/에서 2521처럼 동적으로 만들어진 path가 있어 보통 switch문으로 되지 않아 정규표현식을 쓰도록 한다.
Solution
switch에 true를 넣어 무조건 안으로 넣어주고, /정규식/.test(원하는변수)식으로 분기를 태워준다.
GTM의 Custom Javascript타입으로 pathName이란 이름의 Variables를 만들고, 사용할 땐 {{ pathName }}으로 사용해주면 된다.
function() {
var path = location.pathname;
var name;
switch(true) {
case /^\/$/.test(path):
name = "메인페이지";
break;
case /^\/\d+\/$/.test(path):
name = "제품상세";
break;
case /^\/user\/order\/\d+\/done\/$/.test(path):
name = "구매완료";
break;
case /^\/user\/order\/$/.test(path):
name = "주문";
break;
case /^\/user\/order\/\d+\/$/.test(path):
name = "주문상세";
break;
case /^\/cart\/$/.test(path):
name = "장바구니";
break;
case /^\/order\/$/.test(path):
name = "주문진행중";
break;
default:
name = path;
}
return name;
}
refer
http://stackoverflow.com/questions/2896626/switch-statement-for-string-matching-in-javascript
블로그 이사갔어요! https://milooy.github.io/ 
if else문으로 분기하는것과 성능면에서 차이가 많이 날까요?
찾아보니 성능이 별 차이는 없지만, 분기의 수가 커진다면 switch가 if else보다 더 낫다 합니다.
그리고 이 코드에서 switch를 쓴 이유는 if else로 분기하는 것보다 의미상 더 적합하기 때문입니다. (가독성도 좋고요^^!)
한걸음 더 생각하게 해주셔서 감사합니다.
참고한 링크: http://stackoverflow.com/questions/2922948/javascript-switch-vs-if-else-if-else
속도는 잘 모르겠습니다만 예전에 비슷한 상황이 있었는데 switch문의 break이 마음에 들지 않아서 for in 을 사용했었습니다.
var path = location.pathname;
var name=path;
for (k in q={“메인페이지”:/^\/$/, “제품상세”:/^\/\d+\/$/}) {
name = q[k].test(path) && k || name;
}
Meteor js guide-line에 따라 &&, ||를 사용하긴 했는데 break이 필요하시다면
var path = location.pathname;
var name=path;
for (k in q={“메인페이지”:/^\/$/, “제품상세”:/^\/\d+\/$/}) {
if (q[k].test(path)) {
name = k;
break;
}
}
이렇게 쓸 수 있겠네요.
하드코드로 하지 않고 정규식 규칙을 만들고 관리해야해서 이렇게 하긴 했는데 참고가 되셨으면 좋겠네요.