UTM 유입 성과 분석 기법
외부유입으로 광고 클릭 후 랜딩페이지 및 쿼리 파라미터 정보가 포함된 URL을 모바일 앱에서 앱 다운로드를 위해 앱스토어로 이동시 데이터 유실이 발생합니다. 이 때문에 어떤 경로로 유입된 유저가 전환율이 가장 높은지 등, 성과 측정을 위한 중요한 요소들을 분석하기 어렵습니다.
이번 포스팅에서는 UTM으로 유입된 딥링크(Deep Link) 성과 분석에 대해 공유하고자 합니다.
우선 딥링크에 대해 간단히 설명해드리겠습니다.
딥링크는 특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 내 특정 화면으로 이동시키는 기능을 수행합니다.
즉, 딥링크가 사용되면 광고에 반응한 이용자는 앱이 바로 실행되어 특정 화면으로 이동하거나, 앱 설치 후 실행하면 특정 화면으로 바로 이동하게 됩니다. 목표하는 성과(e.g. 앱 설치, 앱에서 구매 등)를 달성하기 위한 세팅을 자동으로 해주기에, 광고를 운영하는 마케터 입장에서는 광고 성과 최적화를 위해 필수적으로 사용해야하는 기능 중 하나입니다.
그럼 아래의 소스를 통해서 구현 방법을 좀 더 자세히 알아보도록 하겠습니다.
예시 소스
<div class=”m01_img”><button type=”button” class=”m01_p” data-target=”https://www.naver.com”>네이버 링크</button></div>
<script type=”text/javascript”>
$(function () {
var ref = document.referrer;
var slf = window.location.hostname;
if (ref.indexOf(slf) < 0) {
setUtmCookie();
}
});
$(‘.m01_p’).on(‘click’, function(event) {
event.preventDefault();
var target = $(this).data(‘target’);
if (target && target.length > 0) {
var utm = getUtmCookie();
if (utm.length > 0) {
if (target.indexOf(‘?’) < 0) {
utm = ‘?’+utm.slice(1);
}
target += utm;
} else {
console.log(‘Not found utm in cookie.’);
}
location.href = target;
} else {
console.log(‘Not found attr (data-targer).’);
}
});
let utm_names = [‘utm_source’,’utm_medium’,’utm_campaign’,’utm_term’,’utm_content’];
function setUtmCookie() {
for (const name of utm_names) {
var regex = new RegExp(“[\\?&]” + name + “=([^&#]*)”), results = regex.exec(location.search), value = ”;
if (results != null) {
value = decodeURIComponent(results[1].replace(/\+/g, ‘ ‘));
}
document.cookie = name+’=’+value+’; expires=0; path=/’;
}
}
function getUtmCookie() {
let cookie = {};
document.cookie.split(‘;’).forEach(function(e) {
let [key,value] = e.split(‘=’);
cookie[key.trim()] = value;
});
let utmString = ”;
for (const name of utm_names) {
var value = cookie[name];
if (value != null && value.length > 0) {
utmString += ‘&’+name+’=’+value;
}
}
return utmString;
} </script>
링크 URL
링크 URL은 data-target 속성에 설정합니다.
target은 다른 이름으로 변경 가능가능합니다.
ex) data-linkurl=”https://www.naver.com”
$(function)
처음 파일 로딩시 실행되는 function으로 외부 유입시에 setUtmCookie() 함수를 호출합니다.
if (ref.indexOf(slf) < 0) {
setUtmCookie();
}
setUtmCookie()
utm 관련 파라미터(utm_source,utm_medium,utm_campaign,utm_term ,utm_content) 유입시에 쿠키에 저장합니다. utm 파라미터 없이 유입하면 쿠키 삭제합니다.
예를 들어 구글 광고로 유입하고 북마크로 유입시에는 utm 파라미터가 없으므로 쿠키를 삭제하고, 쿠키를 삭제 하고 싶지 않은 경우에는 아래와 같이 수정합니다.
if (results != null) {
value = decodeURIComponent(results[1].replace(/\+/g, ‘ ‘));
document.cookie = name+’=’+value+’; expires=0; path=/’;
}
세션 쿠키로 저장시에는 expires=0;
세션 쿠키외에 영구쿠키나 만료 기간을 설정해서 사용 가능합니다.
getUtmCookie()
cookie 쿠키 가져오는 부분으로 값이 있으면 ‘&’+name+’=’+value 형식으로 넣어줍니다.
on(‘click’,function(event))
사용자 사이트마다 다르게 설정 처리하는 부분으로, 버튼이나 링크 클릭 시 event가 발생합니다. target이 있는 경우 getUtmCookie() 함수를 호출하여 utm 파라미터 가져오고, utm 파라미터가 있으면 target에 utm 파라미터 붙여서 넘겨줍니다.
예시1)
예시2)
https://www.naver.com?n_query=test&utm_source=&utm_medium=&utm_campaign=&utm_term=&utm_content
이것으로 UTM으로 유입된 딥링크(Deep Link) 성과 분석에 대해 알아보았는데요, UTM 유입 성과 분석에 궁금한 점이 있다면 언제든지 문의해주세요.
마케팅에서의 데이터 활용 기술과 인사이트
No.1 Data Partner for Data-Driven Growth
비즈스프링
공식 블로그 | 페이스북 | 네이버 블로그 | 유튜브 | 트위터 | 슬라이드쉐어
