지아이코퍼레이션의 매거진

[구글태그매니저] PC/모바일 구분 변수 생성하는 법

지아이코퍼레이션

2021.04.16 00:00
  • 1744
  • 콘텐츠에 ‘좋아’해줘서 고마워요 -
    0
  • 0


 

안녕하세요!

디지털마케팅 에이전시 지아이코퍼레이션입니다!

 

< 구글애널리틱스 시리즈 콘텐츠 >

기본설정편1. 계정/속성/보기 이해하기 

기본설정편2. UTM 설정하기

기본설졍편3. 목표 만들고 세팅하기

기본설정편4. 목표 만들고 세팅하기2

GA4와 UA의 차이

 

< 구글태그매니저 콘텐츠 >

트리거 그룹 생성 및 활용하기 

 

태그매니저에는 다양한 변수들이 있는데요.

PC와 모바일 중에서 하나의 기기에서만 이벤트를 수집해야 하는 상황이 있습니다.

어떻게 하면 되는지 알려드릴테니, GI만 믿고 따라오세요 ^__^

 

며칠 전, GI 내에서 한 계정의 구글 태그매니저 기본 세팅을 마쳤는데요.

목표 전환 중 하나가 '전화버튼 클릭'이었습니다.

각종 홈페이지에서 흔히 볼 수 있는 전화걸기 버튼 맞습니다!

 

기본 세팅 후 전환 수집이 제대로 되고 있는지 확인했는데,

Desktop에서 전화버튼을 클릭했을 때도 전환으로 수집되더라구요! 

 

PC에서 전화 기능을 사용하는 분들은 거의 없으니,

Desktop에서 전화걸기 버튼을 클릭했을 때는 전환 수집이 되지 않도록 만드는 것이 필요했습니다.

 

제가 선택한 방법은, 브라우저 창 크기로 Desktop과 Mobile을 구분해서, Desktop을 제외하는 방법인데요.

아래에 해결 과정을 자세히 써두었으니 천천히 따라오세요!

 

 

1. 사용자 정의 변수 새로 만들기

 

구글 태그매니저 - 변수 탭 - 사용자 정의 변수 - 새로 만들기에서 변수 구성 빈칸을 눌러줍니다.

그럼 다음과 같이 변수 유형을 선택할 수 있는데요.

 

  

 

여기서 맞춤 자바스크립트를 선택하면 다음과 같은 창이 뜨는데, 빈칸에 코드를 입력해주면 됩니다!

 

  

 

이때 어떤 코드를 입력하면 될까요?

저는 다음과 같이 입력했습니다.

 

 

 

 

위 코드를 해석해보자면

window.innerWidth 라는 자바스크립트를 활용하여 사용자가 보고 있는 브라우저의 크기를 추출하고,

브라우저의 크기에 따라 사용자 기기를 구별하라는 뜻인데요.

 

이 방법을 사용하기 위해 코드를 완전히 이해하실 필요는 없습니다.

 

520 이하이면 mobile로,

520 이상 820 이하이면 tablet으로,

그 외에는 모두 desktop으로 분류하라는 뜻입니다. 참 쉽죠 ?

 

innerWidth는 창 내부 가로 폭이에요!

Desktop과 Mobile을 확실히 구분하기 좋은 innerWidth로 선택했습니다.

  

 

2. 트리거에서 Desktop 기기 제외하기


이렇게 변수를 생성했다면, 다음은 트리거에서 Desktop을 제외해주는 작업이 필요합니다!

 

  

 

조금 전 만든 변수를 선택(ex. '해상도_기기'로 설정)한 후, 'desktop'을 '제외'해주면 끝! 간단하죠?

 

맞춤 자바스크립트로 변수를 새로 생성하는 게 조금 번거롭긴 하지만,

전체적으로 크게 어려운 방법은 아닙니다.

 

기기 구분, 이제 필요할 때 언제든 사용해 보세요!

 


지아이코퍼레이션은 자사 블로그에 원문을 1차 업로드한 후, 가공하여 오픈애즈에 발행하고 있습니다.

가장 먼저 다음 내용을 알고 싶은 분들, 구글애널리틱스에 대해 더 자세히 알고 싶은 분들은 블로그 방문을 통해 더 많은 지식을 얻어가세요 :D

 

 지아이코퍼레이션 홈페이지

 지아이코퍼레이션 블로그

 지아이코퍼레이션 FACEBOOK

 지아이코퍼레이션 INSTAGRAM

 


 

  • #구글태그매니저