외부 광고에서 유입되는 카카오 로그인 UTM 태그 설정 방법

 

[개요]

각종 광고 지면, 오프라인 QR 스캔 등. 다양한 출처에서 카카오 로그인을 바로 요청하고, 출처별로 UTM 설정하여 GA4 (구글 애널리틱스)와 연동하는 방법을 설명합니다.

 

[배경]

카카오로그인은 여타 소셜로그인과 동일하게 OAuth2 로 동작하므로 소셜로그인 제공자 측 로그인 및 동의창 처리 후, 리다이렉트 URI로 진입하게됩니다. 

 

이때, 광고 지면에 설정된 UTM 태그를 소셜로그인 제공자를 거쳐 리다이렉트 URI와 최종 랜딩 페이지까지 전달하는 방법을 기술하고자 합니다. OAuth2 표준에 따라 state 파라메터는 모든 소셜로그인에서 사용할 수 있으니 다른 소셜로그인도 동일하게 구현 가능합니다.

 

[적용]

(1) UTM을 URL 인코딩된 Json Data로 준비합니다.

(쿼리스트링은 인코딩을 해도 처리과정에 서비스특성에 따라 2차 리다이렉트 발생할 경우 유실될 수 있으니 Json을 추천합니다.)

 

{"utm_source":"kakao","utm_campaign":"sale_event"}

↓

%7B%22utm_source%22%3A%22kakao%22%2C%22utm_campaign%22%3A%22sale_event%22%7D

 

(2) 인가코드요청 state 파라메터에 인코딩된 Json Data를 설정합니다.

 

https://인가코드요청주소?client_id=앱키

&redirect_uri=리다이렉트URI

&response_type=code

&state=%7B%22utm_source%22%3A%22kakao%22%2C%22utm_campaign%22%3A%22sale_event%22%7D

 

(3) 리다이렉트 URI에서 state 파라메터를 받아 랜딩페이지에 Get 파라메터로 설정합니다.

(실제로 GA4는 랜딩페이지에서 UTM 데이터를 수집합니다.)

 

https://랜딩페이지?utm_source=kakao&utm_campaign=sale_event

 

ex)

// URI 디코딩 → JSON 파싱
const stateObj = JSON.parse(decodeURIComponent(stateParam));

// utm 파라미터 추출
const utmParams = new URLSearchParams();

if (stateObj.utm_source) utmParams.set("utm_source", stateObj.utm_source);
if (stateObj.utm_campaign) utmParams.set("utm_campaign", stateObj.utm_campaign);

// 최종 랜딩페이지 URL
const landingUrl = "https://랜딩페이지?" + utmParams.toString();

// 리다이렉트
return res.redirect(landingUrl);

 

 

인가코드요청 주소를 모바일 기기에서 카카오톡 인앱브라우저로 실행 시켜주는 퍼머링크로 변환하는 경우 

이용자에게 더욱 편리한 동선 제공가능하니 오프라인매장 가입용으로 QR 코드 생성하는 경우 적용하는 것을 추천합니다.