실습을 진행하는 웹사이트 "허들러스" 의 포트폴리오 메뉴 화면이다. 그림을 눌러보면 어느 클라이언트에서 어떤 업무를 했는지 볼 수 있다. 이미지를 눌러 검사를 해보니 이미지에 alt 값이 나온다. 이미지에 alt값은 애초에 이미지를 업로드 할 떄 넣는데 시각장애인은 어떤 이미지인지 알 수 없기에 보이스로 음성이 나올 수 있게 텍스트를 넣어주는거다. 우리는 오늘 이미지를 클릭했을때 고객사의 동적변수가 나오게끔 이벤트를 세팅해볼것이다. 구조를 확인하기 위해 미리보기를 사용해 확인해보자 확인해보니 class값과 id값이 존재하지 않는다. click text에는 innerText를 가져오긴 하지만 우리는 이미지의 alt값을 가져오길 원하는 상황이여서 click text를 사용하지 않을예정이다. 우선은 2가지 방..

오늘은 실제로 CLASS가 없는 Element의 클릭 트리거를 잡는법을 배워보자 웹사이트의 상단부분 메뉴의 class 값을 찾아보자 class값이 나오지 않는다. 이럴경우 도와주는 변수는 Click Element이다. 위치를 나타내준다고 쉽게 알면된다. ( body 태그 안에 있는 header.header.main-header 등등 ) 일단 한번 만들어보자 ! GTM에서 태그 이름과 이벤트 이름을 설정해주자. 이제 중요한 트리거 설정 부분인데 저번에 우리가 배웠던 Element로 추적하는 부분을 생각한다면 이렇게 제작할것이다. 왜냐하면 미리보기의 값이 이렇게 나오니 뒷부분만 포함시켜도 될거라고 생각할것이다. 하지만 저장을 하고 확인을 하면 확인되지 않는다고 나온다. 왜냐하면 Click Element는 s..

위 사진은 인터넷 웹사이트의 랜딩페이지다. 사용자들이 궁금해 할 정보를 블로그 링크로 달아놨다. 우리는 오늘 각각의 글마다 클릭율이 어떻게되는지 찾는법을 배워볼것이다. gtm에서 태그만들기로 들어와 태그를 만들자 값영역은 그대로 둔 상태로 트리거 만들기를 눌러보자 링크 추적에 대한 트리거 설정은 2가지 방법이 있다. URL을 따오는 "링크만" 트리거 유형과 Classes를 따오는 "모든요소" 트리거 유형이 있다. 이번시간은 링크로 가져오는 트리거 유형을 해보자. 현재 실습을 진행하고있는 웹사이트의 블로그 링크글들은 모두 brunch 라는 플랫폼 블로그 글들이다. 그렇다면 URL에 모두 brunch가 들어갈테니 링크에 brunch가 있으면 링크 클릭으로 간주하게 설정하면 된다. 일부 링크 클릭을 눌러 cl..

오늘은 실습을 해볼려고한다. 해당 사진에 3가지의 탭이 있다. ga4 활용 컨설팅, 스크립트 설치 컨설팅, 데이터 시각화 및 자동화 대시보드 사용자들이 어떤 탭들을 주로 사용하는지 주로 관심있게 보는지가 궁금하다 클릭율을 관측하려면 각각의 메뉴를 클릭했을때 메뉴 클릭 이벤트가 발동해야하고 어떤 메뉴를 클릭했는지 파라미터 정보가 들어와야한다. 구글 태그매니져 미리보기로 해당 랜딩페이지의 3가지의 탭을 클릭해봤다. 아직은 어떤 tag도 fired가 되어있지 않다. Variables를 살펴보니 Click Classes에 "new-main-tab01-list"로 잡혀있는것을 볼 수 있다 랜딩페이지에서 관리자 툴로 확인을 해보니 실제로도 new-main-tab01-list로 잡혀있는것을 볼 수 있다. 이제 new..

이번시간에 전자상거래를 알아보자 전자상거래는 쇼핑몰에서 자주 사용한다. 전자상거래 리포트가 애널리틱스에 존재한다. 위 사진은 구글 데모계정 전자상거래 리포트다. 조회된 상품, 장바구니 추가 상품, 구매한 상품 모두 전자상거래 측정 기준이다. 이것을 하려면 공식가이드의 양식에 맞춰서 코드작업을 해야한다. 공식가이드 양식을 한번 보러가자 위 내용을 검색하면 https://developers.google.com/analytics/devguides/migration/ecommerce/gtm-ga4-to-ua?hl=ko 해당주소가 나온다. GA4 전자상거래(태그 관리자): GA4 이벤트 전송 | 전자상거래를 위한 개발자 이전 | Google for De GA4 전자상거래(태그 관리자): GA4 이벤트 전송 컬렉션..

저번시간에 동적변수 {{버튼이름}} 을 만들었다. 실제로 콘솔창에서 위 명령어를 입력하면 어떻게 가져오는지 확인해보자 우리가 가져오고자 하는 하트버튼의 0번째 인덱스를 불러오니 위 사진과 같이 나온다. 여기서 .innerText를 넣어보자 '좋아요' 라는 값이 나온다. 그래서 return {{Click Element}} 까지가 span 태그고 .innerText를 넣어야 값이 반환된다. 이 설정을 한다면 미리보기에서 어떤 버튼을 눌러도 innerText가 나오는것을 확인할 수 있다. 작업효율을 상승시키는것이다. 하지만 주의해야할 점이 있다 모든 클릭의 element innertext를 가져오기에 빈공간을 클릭하면 이렇게 모든 내용이 다 잡히는것을 볼 수 있다. 왜냐면 클릭한 영역이 article 영역인데..