google analytics와 tag manager의 연동에서 변수, 트리거, 태그를 통해 Event를 발생시켜
analytics로 전달하는 방법입니다.
Variables - 특정 URL, element, element classes, element text, 맞춤 자바 스크립트 등을 설정해 놓는 변수입니다.
Triggers - 특정 이벤트가 발생 했을 때 Tag를 작동시키기 위한 트리거 입니다.
Tags - Trigger에 의해 작동하면 Google Analytics로 보내줄 내용을 지정합니다.
http://domain/orderItem.jsp 라는 페이지에서 두 개의 버튼을 눌렀을 때 이벤트를 Google
Analytics로 전달하는 방법을 셋팅 해보겠습니다.
1. 변수설정
태그 매니저에 접속하면 아래와 같은 모습을 확인 할 수 있습니다.
Container에서 Variables를 선택해줍니다.
Variables를 선택해 스크롤을 아래로 내리면 변수를 추가 할 수 있는 화면이 나옵니다.
위에 보이는 3개의 element, Java script 테스트, URL을 이용해 이벤트를 전달합니다.
element는 Auto-Event Variable타입으로, Element Classes로 셋팅을합니다.
위와 같이 셋팅하면 특정 페이지에서 버튼을 눌렀을 때 html 버튼 element의 classes명을 가져옵니다.
Element관련 값은 아래와 같습니다.
Element classes - 선택된 element의 class명을 반환합니다. <button class="button">이 있다면 "button"을 가져오게 됩니다. 만약 <button class="a b c d">로 여러개가 있다면, .split()함수를 실행 한 후 배열 형태로 불러오면 됩니다.
Element id - 선택된 element의 id명을 반환합니다. <button id="button_id">가 있다면 "button_id"를 가져옵니다.
Element target - 선택된 element의 target을 가져옵니다. <a href="/test" target="test_target"/> 이라면 "test_target"을 가져옵니다.
Element test - 선택된 element의 text를 반환합니다. <button>텍스트</button>이라면 "텍스트"를 가져옵니다.
Element URL - 선택된 element의 href나 action을 반환합니다. <form action="/test-form">이라면 "/test-form"을 반환합니다.
다음은 URL입니다.
Full URL은 이벤트가 발생한 페에지의 모든 URL값을 가져옵니다.
만약 "http://test/test1/test.jsp"라면 이를 모두 가져옵니다.
다음은 Java script 테스트입니다.
이부분은 맞춤 자바스크립트 (Custom JavaScript)로 직접 자바스크립트 코드를 추가하여 그에 맞는 return값을 받을 수 있습니다.
{{element}}는 사전에 만들어놨던 element classes로 class의 이름을 가져옵니다.
버튼이 눌렸을 때 가져오는 클래스가 class="a b c d e f"라면 .split(' ');으로 각 각 a b c d e를 자른 후 4번째 값인 e를 가져와 switch문의 case에서 string을 반환하는 형식입니다.
2. 트리거 설정
이제 Tags를 작동시키기위한 트리거를 설정해 줘야 합니다.
위의 test트리거의 내용을 보면 아래와 같습니다.
Click이벤트가 발생 했을 때, 모든 요소에 대해서 작동하는 트리거로 중요한 부분은
Fire On부분입니다.
Full URL에서 /orderItem이 포함되면 작동한다는 뜻으로, http://test/orderItem.jsp처럼 URL내에 orderItem이 들어있으면 작동하게 됩니다.
3. Tags 설정
마지막으로 태그는 analytics로 tag를 전달하기 위해 사용됩니다.
내용을 보면
Choose Product는 Google Analytics로 설정합니다.
Tag Type는 Universal Analytics로 선택해줍니다.
Configure부분이 중요합니다.
Tracking ID에 자신의 GA 코드를 입력 해 줍니다.
Track Type는 Event를 발생시키므로 Event로 선태해줍니다.
Category는 지금 발생하는 이벤트의 이름을 입력 해 줍니다.
Action은 지금 발생한 이벤트의 액션명을 입력 해 줍니다.
Label은 지금 발생한 이벤트의 상세 사항을 설정합니다.
Value는 지금 발생한 이벤트의 값을 설정합니다.
카테고리부분에 예를 들면
Category Action Label Value
게시판 버튼클릭 게시판1 1
게시판 버튼클릭 게시판2 2
동영상 클릭 재생 1
동영상 클릭 정지 2
이런 형태입니다.
위에서 설정한 형태는 Category는 클릭이벤트 Action은 클릭 Label은 위에서 설정한 맞춤 자바스크립트로, "refund All 입니다.", "refund 하나 입니다." 라는 값이 return되어 들어갑니다.
4. Google Analytics 작동 확인
맞춤 자바 스크립트인 {{Java script 테스트}}에서 설정한 클래스는 위 페이지의 refund All버튼과 refund버튼에서 작동합니다. 태그는 아래와 같습니다.
class에서 4번째 class가 e 혹은 e_2_3에 따라 다른 값을 return하는 것을 볼 수 있었습니다.
실시간이나 GA의 이벤트로 확인하면 아래와 같은 내용을 확인 할 수 있습니다.
버튼을 눌러 위와같이 이벤트가 발생하면 성공적으로 Tag manager가 설정 된 상태입니다.
****************************************************************************************
맞춤 자바 스크립트가 아니라 TEXT를 가져와서 입력하는 방법 도 있습니다. 하지만
위의 태그처럼 텍스트부분이 refund All <br><small>sdfsdf</small>인 상태입니다.
여기서 만약 refund All <small>sdf</small>이라면, Element test로 값을 가져왔을 때, refund All sdf를 가져오는 것을 확인 할 수 있습니다.
하지만 중간에 <br>이 들어오면, text를 가져올 때 <br>뒤의 부분인 sdfsdf만 가져오게되어 값이 망가집니다.
