구글태그매니저 페이지 스크롤뎁스 이벤트 설정하는 방법

자 오늘은 그 구글 태그 관리자 태그 매니저에서 어 스크롤 뎁스 이벤트를 설정하는 방법에 대해서 한번 알아보도록 하겠습니다 자 그러면 여기에서 일단 스크롤 뎁스를 설정할 설정할 업체에 이제 태그 매니저로 접속을 해야겠죠 컨테이너 계정으로 자 들어와서 이렇게 태그, 태그라는걸 이렇게 선택을 하시구요. 자 이거는 지금 현재 이제 설정되어 있는건데 여기에 이제 스크롤 이벤트는 설정이 되어있지가 않습니다. 자 그러면 제일 먼저 이제 해주셔야 되는거는 이제 변수에서 우리가 이제 스크롤 뎁스 변수를 이제 좀 끄집어낼 거에요. 활성화를 시키도록 하겠습니다. 여기서 이제 구성이라고 되어있죠. 여기서 쭉 내리시다 보면 여기 스크롤 이라는게 보이실 겁니다. 스크롤 이라는게 보이는데 여기서 이제 여러분들은 스크롤 뎁스 스트레스 홀드라고 되어 있는 요거를 선택을 해주시면 됩니다. 자 됐구요. 그럼 여기 이제 생겼죠? 됐구요. 자 그 다음에 이제 트리거로 가도록 하겠습니다. 트리거. 자 트리거도 이제 스크롤뎁스 트리거를 이제 하나 새로 만들어 줘야겠죠 그래서 트리거에 가서 새로 만들기를 누르고 이제 이거는 스크롤뎁스라고 할게요 여기는 디자인아트라는 회사니까 디자인아트 스크롤뎁스라고 이렇게 표현을 한번 해보도록 하겠습니다 자 그리고 나서 여기 보시면 스크롤 깊이 라고 되어 있는 거 보이시죠 요거를 클릭을 그냥 해주시면 되구요 그 다음에 이제 우리는 새로 스크롤을 할 거잖아요 그죠 그리고 여기에 이제 비율이라는 게 있어요 이거는 이제 스크롤을 어느 정도 비율로 내렸느냐 그때마다 이제 확인을 해라 이벤트로 어떤 그런 뜻이라고 생각을 하시면 될 것 같아요 그래서 저는 한 4개 정도를 구성을 할 건데요. 25% 내렸을 때 그리고 심표를 이렇게 붙여 주시면 됩니다. 50% 정도 내렸을 때 그 다음에 75% 정도 내렸을 때 그 다음에 이제 100% 까지는 좀 쉽지 않으니까 한 95% 정도로 할게요. 자 요렇게 해주시고 그 다음에 이제 트리거 실행 조건 이라는게 있는데 여기 보시면 컨테이너 로드 돔 사용 가능 창 로드가 있는데 이거에 이제 어떤 차이점은 뭐냐면 이 스크롤 이벤트가 실행되는 어떤 약간 속도의 차이라고 생각을 하시면 될 것 같아요. 여기 이제 물음표에 이제 요렇게 얹어 보시면 컨테이너 로드는 페이지 로드시 최대한 빨리 실행된다고 되어 있죠. 그죠? 그 다음에 도움 사용 가능은 도움을 파싱할 준비가 된 후 실행됩니다. 그 다음에 창로드는 페이지의 초기 콘텐츠가 로드된 후 실행됩니다. 자 그래서 요 3가지는 그냥 이 순서라고 생각하시면 됩니다. 그냥 컨테이너로드, 도움 사용 가능, 그 다음에 창로드. 이 순서대로 빠르게 인식을 한다라고 생각하시면 되고 저는 그냥 빠르게 인식하는 걸 원하니까 컨테이너로드로 이렇게 해볼게요. 그리고나서 여기 보시면은 모든 페이지 지금 모든 페이지를 선택을 한거는 내가 이 지금 그 내가 지금 그 스크롤 이벤트를 측정하고자 하는 홈페이지의 모든 페이지를 측정하겠다는 거고 만약에 이제 내가 어떤 특정 페이지를 하고 싶다 그러면 이제 일부 페이지를 들어가는 거죠 그리고 들어가서 어떤 특정 페이지가 있다고 한다면 그 페이지에 url을 요렇게 지정을 해서 그 페이지에 url 주소를 여기다 집어 넣어주면 되겠죠. 저는 디자인아트로 한번 들어가 볼게요. 자 디자인아트로 들어가서 특정 페이지도 한번 집어넣어 보도록 하겠습니다. 쇼핑몰 맞춤 제작 이런게 있네요. 홈페이지 맞춤 제작도 있고. 그럼 홈페이지 맞춤 제작으로 한번 들어가 볼게요. 홈페이지 맞춤 제작을 누르니깐 이렇게 나오죠. 그러면 이렇게 스크롤을 이렇게 내리는게 되겠죠. 그러면 여기에 주소를 이렇게 복사를 하면 복사를 한 다음에 좀 전에 여기 있었죠. 복사를 한 다음에 여기에다가 이렇게 붙여 넣어주면 되겠죠. 그리고 나서 scroll depth 저기 뭐냐 여기 저장 버튼을 누르면 되겠죠. 근데 일단은 지금은 전체 페이지를 일단 먼저 한번 해보고 다시 또 하나를 만들도록 하겠습니다. 일단은 모든 페이지 해놓고 저장을 하도록 하겠습니다. 자 그러면 트리거가 이거는 전체 페이지를 하는 걸 만든 거고요. 그러면 또 하나를 이제 또 만들면 되겠죠. 여기서 트리거를 이제 새로 만들기 또 누르고 이번에는 아까 홈페이지, 홈페이지 맞춤 제작 그 페이지를 줘야 하는 사람. 그죠? 자 그래서 디자인 아트 홈페이지 맞춤 제작 스크롤 뎁스 좀 너무 길어지긴 했는데 이런식으로 구분을 할게요 디자인 아트 홈페이지 인건 아니까 그냥 맞춤 제작 스크롤 뎁스라고 해도 충분히 기억할 수 있겠죠 자 요정도로 해놓고 다시 좀전처럼 스크롤 깊이 들어가고 세로 스크롤 깊이 그 다음에 여기도 똑같이 25% 50% 그 다음에 75% 그 다음에 90 여기는 한 7% 정도 한번 해볼게요. 조금 달라졌죠. 그 다음에 아까도 말씀드렸다시피 컨테이너 로드가 가장 빠르게 실행된다고 했죠. 그 다음에 일부 페이지 자 여기에서 페이지 URL 포함으로 할게요. 그래서 이 페이지를 포함하는 url 에 대해서는 일치를 하셔도 상관없습니다. 같음으로. 그러면 딱 요 페이지에 대해서만 이제 실행이 되겠죠. 자 그리고 나서 요렇게 눌러보도록 하겠습니다. 그러면 맞춤 제작 스크롤 댑서도 이제 요렇게 생성이 됐죠. 그러면 이제 최종적으로 태그를, 태그라는 걸 이제 만들어 줘야겠죠. 그쵸? 태그라는 걸. 자, 태그라는 걸 이제 들어가서 만들어 주도록 하겠습니다. 두 개를 만드는 거죠, 지금. 자, 그래서 새로 만들기 누르시고 태그도 일단은 전체 페이지를 조회하는 디자인 아트 전체 페이지 스크롤 탭스로 할게요. 아니면 이거는 그냥 디자인 아트 스크롤 뎁스 이렇게 해도 충분히 알아볼 수 있겠죠 자 그 다음에 어 구글 애널리틱스 유니버셜 애널리틱스로 지금 연동이 되어있기 때문에 유니버셜 애널리틱스 이렇게 선택을 하고요 그 다음에 이제 여기에서 중요한게 이제 이벤트니까 이벤트로 가야겠죠 그죠 자 그 다음에 카테고리는 저는 그대로 해줄게요. 디자인 아트 스크롤 뎁스로 그대로 해주도록 하겠습니다. 그대로 해줬습니다. 자 그 다음에 이제 여기 작업하고 라벨에 이제 넣는 방법이 이제 좀 여러가지가 있는데요. 일단은 잠시만요. 자 작업 영역에서는요. 여기 클릭을 하시고 페이지 패스라는 걸 해줍니다. 페이지 패스라는 걸 해주면 url 을 이제 식별해 준다라고 생각을 하시면 될 것 같아요. 뒷부분 url 만요. 그 다음에 이제 라벨에서는 우리가 아까 설정했던 그죠 변수 중에서 scroll depth threshold 라는 요런게 있었죠. 그죠 요거를 해주고 그 다음에 이제 이게 음 지금 몇 퍼센트 25 50 75 뭐 97 인가 뭐 그 95인가 뭐 그렇게 했죠 그렇죠 여기 뒤에다가 퍼센테이지를 이제 이렇게 붙여 주시면요 25% 됐다 뭐 30% 됐다 이제 이런 것들을 나중에 데이터로 표시를 해줍니다 그리고 비상호작용 조회라는 건 반드시 참으로 해주는 게 맞고요. 그 다음에 이제 설정 변수 선택은 이제 디자인 아트니까 디자인 아트 구글 애널리틱스로 이렇게 해주면 되겠죠. 자 이게 첫번째 방식입니다. 첫번째 방식이고 또 이 방식 말고 이제 다른 방식도 있어요. 여기에 이제 scroll depth percentage를 이렇게 해주시고 scroll depth percentage를 해주시고 먼저 여기 라벨에서 scroll depth, threshold, percent 되어있고 그 다음에 여기 뒤에다가 골뱅이를 붙이신 다음에 page url 이라는걸 이렇게 붙여줍니다. 이런 방식도 됩니다. 페이지 URL을 요런식으로 이제 붙여주시면 어떤식으로 표시되냐면 몇 퍼센트가 몇 퍼센트가 어떤 페이지 URL이 몇 퍼센트 스크롤이 내려갔다 이런거를 이렇게 같이 표시를 해준다고 합니다. 자 요렇게 구성을 하시고 여기는 그냥 작업은 그냥 뭐 세로 아이고 아이고 아이고 죄송합니다. 작업은 여기는 잠시만요 여기는 뭐 세로 스크롤 뭐 이런 식으로 그냥 적어 주시면 될 것 같아요 그리고 나머지는 다 똑같아요 자 근데 일반적으로 이제 요 방식으로 저장을 하셔도 상관없습니다 자 근데 일반적으로 이제 가장 많이 쓰는 방식은 어 제가 알기로는 아이 잠시만요 가장 많이 쓰는 방식은 여기서 페이지 패스 그죠 페이지 패스 그 다음에 여기 부분은 지워버리고 그죠 요렇게 지울게요 자 이제 요렇게 해서 참 되어있고 그 다음에 구글 애널리틱스 요렇게 설정이 되셨으면 그 다음에 트리거를 이제 지정을 해줘야 될 거 아니에요 그죠? 트리거를 클릭을 하시고 아까 우리가 만들어놓은 트리거가 있죠 그죠? 디자인 아트 스크롤 뎁스 트리거라고 되어있는 요거를 클릭을 해줍니다. 그러면 이제 구성이 끝났습니다. 이렇게 하고 저장 버튼을 눌러줘 볼게요. 자 그러면 디자인 아트 스크롤 뎁스 라는게 이렇게 됐죠 자 그러면 이제 이게 이제 정상적으로 작동을 할지 일단은 여기에 제출을 먼저 눌러 주시구요 계속 정상적으로 작동을 하는지 이제 한번 먼저 알아보도록 할게요 자 이제 정상적으로 작동하는지 알아보려면 이제 태그에서 미리 보기를 항상 눌러보라고 그랬죠. 그래서 디버그 모드에서 확인을 한다고 그랬죠. 자 미리 보기를 누르시구요. 자 designart.show.kr로 이렇게 도메인을 미리 제가 입력을 해놨구요. 요렇게 진행을 시키면 이제 디버그 모드가 나오겠죠. 자 이제 디버그 모드가 나왔죠. 이제 이 상태에서 continue 이렇게 해놓고 그죠 continue 해놓고 지금은 아무것도 안 올라오고 있는데 자 제가 한번 디버그 모드에서 해볼게요. 홈페이지 뭐 견적무늬 뭐 이렇게 스크롤 뎁스를 한번 쭉 내려보도록 하겠습니다. 스크롤 일단 한번 내렸죠. 메인화면에서 일단 먼저 내렸죠. 전체 홈페이지로 했으니까 여기 보시면 지금 스크롤 뎁스 이렇게 움직인게 보이죠. 그죠? 움직인게 보이고 디자인아트 스크롤 뎁스 태그 파이어드로 올라왔죠. 정상적으로 지금 잘 작동이 되고 있다라는 뜻입니다. 이런식으로도 확인을 하실 수가 있구요. 그 다음에 또 여기 구글 애널리틱스로 한번 와볼게요. 구글 애널리틱스에서 잠시만요. 실시간 이벤트에서도 확인을 하실 수가 있습니다. 실시간 이벤트에서도 자 한번 보도록 하겠습니다. 디자인아트 여기 지금 보시면 실시간 실시간 이라고 보이시죠? 그 다음에 이벤트로 옵니다. 실시간에 이벤트로 와서 자 현재 한 명이 접속되어 있다라고 나오죠. 자 그럼 이제 이 상태에서 이 상태에서 제가 디자인 아트 사이트로 들어가서 한번 여기저기 데스크탑 한 명 이렇게 인식되고 있죠. 여기저기 스크롤 이벤트를 한번 발생시켜 보도록 하겠습니다. 자 제가 일단 아까 홈페이지 맞춤 제작 우리가 했었죠. 홈페이지 맞춤 제작 한번 들어가 보도록 하겠습니다. 자 요렇게 스크롤을 한번 발생 시켰죠. 끝까지 내렸습니다. 저는 스크롤을 자 그러면 과연 이게 이제 이벤트가 발생 됐는지 나오고 있죠. 그쵸 여기 보이시죠. 좀 전에 이제 초당 이벤트 영역에서 지금 1분 좀 전에 지금 이벤트가 이렇게 하나 두개가 발생 됐다라고 인식을 하고 있네요. 이게 스크롤 내린 것을 두 개만 지금 인식을 한 것 같아요. 어쨌든 하여튼 인식하고 있는게 보이시죠 지금. 나중에 이제 지금은 설치된지 얼마 되지 않아서 어 지금 실시간에서는 요정도 데이터만 나오고 있는데 나중에는 이제 어디서 확인을 하시면 되냐면 예 보시면은 행동에 여기 이벤트 있죠. 이벤트에 여기 이제 개요나 인기 이벤트로 들어갑니다. 그러면 이제 우리가 태그 매니저에서 어 세팅해 놓은 모든 이벤트들을 여기서 이제 보실 수가 있어요 보실 수가 있는데 지금은 스크롤 뎁스는 지금 전혀 안 뜨고 있죠 왜 이제 인제 막 그 우리가 세팅을 했으니까 여기에 이제 앞으로는 스크롤 뎁스도 뜨게 돼 있습니다 그러면은 그 스크롤 뎁스 또 클릭하고 들어가서 좀 더 세세한 뭐 페이지별로 본다든지 이런 것들을 하실 수가 있어요 자 그래서 어 잠시만요 자 그래서 여기까지가 스크롤 뎁스 이벤트에 대한 거구요 아까 여기 보시면 우리가 요거 잠깐 끌게요 요거 끄고 다시 아까 우리가 전체 스크롤 뎁스는 했는데 특정 페이지에 대한 스크롤 뎁스는 아까 세팅을 안 했잖아요 그죠 그것도 한번 간단하게 한번 해 보도록 하겠습니다 여기에서 일단은 새로 만들기로 들어가겠죠 이번에는 그냥 바로 이제 태그 구성을 해 볼게요 바로 이제 거꾸로 하지 않고 이번에는 아까 홈페이지 맞춤 제작 이었죠 그죠 그러면 홈페이지 맞춤 제작 줌, 제작, 스크롤, 뎁스 자 요렇게 표시를 하도록 하겠습니다. 그리고 태그 구성을 바로 해버릴게요. 구글 애널리틱스 그쵸 그 다음에 이벤트를 가야겠죠 이벤트 똑같겠죠 하는 방식은 이벤트 그 다음에 카테고리는 똑같이 요거 그대로 해줄게요 저는. 이렇게 똑같이 하는 걸 좋아해서. 그대로 해주고 작업은 아까 페이지 패스를 해주라고 했죠. URL을 확인할 수 있게. 그 다음에 라벨은 여기에서 scrollDepthThreshold라는 요거를 해주고 %를 붙여달라고 했죠. 그 다음에 참, 참을 선택해주고 설정 변호수는 디자인아트니까 디자인아트 구글애널리틱스를 이렇게 해줍니다. 그 다음에 트리거는 클릭하신 다음에 이번에는 이제 디자인아트 맞춤 제작 스크롤 넵스 아까 해놨던거, 요걸로 선택을 해줍니다. 그러고 나서 이제 저장 버튼을 눌러볼게요. 눌렀습니다. 저장 버튼 자 그러면 어 맞춤 제작 스크롤 뎁스도 이렇게 올라왔죠. 자 그럼 최종적으로 여기서도 이제 개시를 하고 계속 눌러보도록 하겠습니다. 제대로 이제 개시가 됐죠. 자 개시가 됐고 이제 미리 보기를 한번 해서 또 한번 알아보도록 하겠습니다. 제대로 과연 이게 이제 설정이 됐는지 자 미리 보기 이제 이렇게 들어가고요. 자 커넥트 자 디버그 모드가 이렇게 이제 됐죠 그러면 컨티뉴 누르고 이제는 이번에는 다시 디자인 아트의 잠시만요 오 디버그 모드가 방금 사라졌네요 다시 한번 해볼게요 자 잠시만요 다시 미리보기로 들어가서 자 커넥트 그 다음에 자 디버그 모드가 이렇게 나왔죠 이제 그러면 잠깐 내려놓고 이거 continue부터 할게요. 그 다음에 이제 여기에서 홈페이지 맞춤 제작 이쪽으로 들어갑니다. 우린 여기에 대한 이제 스크롤 뎁스를 또 실행을 시켜놨죠. 자 이렇게 여기에서 스크롤을 이렇게 천천히 한번 내려볼게요. 너무 또 빨리빨리 내리면 제대로 이제 얘네가 인식을 못할 수도 있으니까 천천히 한번 내려보도록 하겠습니다. 천천히 내렸습니다. 천천히 내렸어요. 다시 한번 올려볼게요 올렸다가 또 천천히 요렇게 한번 뭐 요정도면 충분히 이제 스크롤 뎁스가 됐겠죠 한번 가서 보도록 하겠습니다 여기 스크롤 뎁스가 되어있죠 그죠 맞춤 제작도 여기 올라와 있는게 보이시죠 자 그래서 정상적으로 요런식으로 잘 작동되고 있다라는걸 확인할 수 있었습니다 자 그래서 오늘은 홈페이지의 페이지 스크롤 뎁스를 세팅하는 방법에 대해서 알아봤습니다