PC 사용자를 QR 코드로 앱 다운로드 유도하기

본 Playbook에서는 PC 웹으로 유입된 사용자가 웹사이트 내 QR코드를 통해 앱 설치를 하는 경우에도 성과 측정을 할 수 있는 방법에 대해서 안내합니다.

기여 시나리오

1. 사용자가 PC 웹에서 광고를 클릭한 후 웹사이트 내 QR 코드를 통해 앱 설치는 하는 경우 - 클릭 된 광고를 앱 설치의 기여로 인정

2. 광고에 노출/클릭 없이 웹사이트에 들어온 사용자가 웹사이트 내 QR 코드를 통해 앱설치를 하는 경우 - QR 코드 스캔을 앱 설치의 기여로 인정

사전 준비 사항

Airbridge Web SDK 설치

설정 방법

웹사이트(PC)에 QR 코드를 심을 element를 준비하고, QR Code 동적 생성을 위한 스크립트를 아래와 같이 심습니다.

<!-- QR Code를 심을 Element -->
<div id="qrcode"></div>

<!-- QR Code 동적 생성을 위한 스크립트 -->
<script src="https://static.airbridge.io/sdk/utils/qrcode.min.js"></script>
<script>
airbridge.fetchResource(function(res){
  var qrcode = new QRCode("qrcode", {
    text: "https://abr.ge/@"+airbridge.app.appSubdomain+"/airbridge.websdk?campaign=qrcode&client_id="+res.browser.clientID,
    width: 128, // QR Code width 조정
    height: 128, // QR Code height 조정
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
  });
});
</script>

캠페인 파라미터 변경 및 추가

웹사이트(PC)에 QR코드가 다수 있는 경우, QR코드 별로 text 옵션 값의 campaign=qrcode 부분을 다르게 세팅(예: campaign=main_qrcode, campaign=product_qrcode)하거나 추가적인 캠페인 파라미터를 사용(ex. campaign=qrcode&content=mainpage_button, campaign=qrcode&sub_id=mainpage)할 수 있습니다.

💡 유의사항

위 스크립트를 심기 이전에 Airbridge Web SDK가 설치되어 있어야합니다. 설치 방법은 가이드를 참고해주세요.

웹사이트를 통한 광고 트래킹을 위해서는 Protected Attribution Window 옵션이 적용되어 있어야 합니다. init시 useProtectedAttributionWindow 옵션을 true로 넣어주세요. 자세한 내용은 가이드를 참고해주세요.

트래킹링크(text 옵션 부분)의 채널(airbridge.websdk) 부분을 수정하시면 기여 우선순위가 변경되어 앱 설치의 기여가 광고 터치포인트로 인정되지 않으므로, 변경하지 마시기 바랍니다.

데모 페이지 코드

본 링크에서 실제 QR코드가 적용 된 예시를 확인할 수 있습니다.

참고사항

QR Code 생성 라이브러리는 davidshimjs/qrcodejs를 사용하고 있습니다.