PBA 웹 SDK 연동 가이드

대상:
마케터 개발자
마지막 업데이트:

요약: 웹 SDK를 사용하여 앱스플라이어를 웹사이트에 연동하여 방문, 이벤트, 전환 및 수익을 기록하고 측정합니다.

5107_Infographic_Web_S2S_759x270_option1.jpg

Web SDK 사용자 가이드 및 연동 가이드

  • 웹 SDK JavaScript 태그:
    • 여러 플랫폼에서 사용자 여정을 분석하기 위한 PBA(유저 중심 어트리뷰션) 솔루션의 일부입니다.
    • 귀사 웹사이트에 대한 사용자 방문 및 활동 내역을 앱스플라이어 플랫폼에 리포트합니다.
    • 프로그래밍이 필요 없는 웹 사이트 플러그인 모듈입니다. 웹 사이트 방문자의 운영 체제 및 브라우저와는 무관합니다.
    • 크기: 40-60Kb.
  • 앱스플라이어 모바일 SDK와 함께 웹 SDK를 구현하여 모바일 앱 및 웹 환경 전반에서 사용자 활동을 기록하고 매핑하십시오.
  • 웹사이트 밖에서 발생하는 이벤트는 웹 서버 간 이벤트 API(Web S2S)를 사용하여 기록할 수 있습니다.

웹 SDK를 웹사이트에 연동하기

인스톨 및 연동

고려사항 및 필수 조치

연동 검사목록

방문 및 이벤트가 기록되도록 보장하려면 웹사이트의 모든 페이지에 Web SDK를 인스톨해야 합니다. 

페이지 범위에서 가능한 한 빨리 로드되도록 스니펫 코드를 배치하십시오. 헤드 태그의 맨 위 근처에 코드를 배치하면 됩니다.

Google Tag Manager(GTM)를 사용하여 SDK를 연동하는 경우:

  • SDK가 페이지 로드당 한 번 로드되는지 확인합니다.
  • GTM 우선순위를 사용하여 페이지가 로드되자마자 SDK가 로드되도록 설정합니다.

스마트 배너를 사용하거나 사용하지 않고 웹 SDK를 구현할 수 있습니다. 다음 섹션의 관련 지침을 따르십시오.

연동 필수 요구사항

  • 방문 기록
  • 이벤트 기록
  • 고객 사용자 ID(CUID) 설정: CUID가 없는 경우 CSM에 연락하여 대안을 논의하십시오. 

검사 도구를 사용한 연동 유효성 검증

시작하기 전에:

  • 마케터가 브랜드 번들을 생성했는지 확인하십시오. 
  • 추가 지침은 PBA 온보딩 안내서를 참조하십시오.
  • 고려 사항: 독립형 스마트 배너 웹 SDK가 이미 있는 경우 이를 삭제하고 스마트 배너 및 유저 중심 어트리뷰션 모두를 위한 웹 SDK로 교체하십시오. 단순히 PBA용 독립형 웹 SDK를 추가하지 마십시오. 

다음 작업을 수행하십시오.

  • 웹 SDK 웹 개발 키를 받으세요. 일러두기! 모바일 앱에서 사용하는 키와 동일하지 않습니다.
    • 웹 개발 키를 가져오는 방법: 
      1. 앱스플라이어의 상단 메뉴에서 내 앱 탭을 선택합니다.
      2. View brand bundles(브랜드 번들 보기)를 클릭합니다.
      3. 필요한 웹 개발 키(WEB_DEV_KEY) 복사
  • 스마트 배너를 구현했다면 스마트 배너 키를 받으세요. 
    • 스마트 배너 키를 가져오는 방법:
      1. 앱스플라이어의 사이드 메뉴에서 인게이지> 웹 투 앱 >스마트 배너 로 이동합니다.
      2. 필요한 스마트 배너 키를 복사합니다. 
  • 웹사이트의 헤드 태그에 스크립트를 추가할 수 있는 권한.
  • Google Tag Manager를 사용하는 경우 이를 웹사이트에 연동해야 합니다.

다음 옵션 중 하나를 사용하여 웹 SDK 연동을 진행하십시오.

네이티브  Google Tag Manager  Adobe Launch Tag Manager 

JavaScript 코드 스니펫

다음 방법 중 하나를 사용하여 웹 SDK를 연동하십시오. 

스마트 배너 없이 웹 SDK를 인스톨하는 방법:

  1. 웹 사이트의 모든 페이지에서 다음 절차를 반복하십시오.
  2. 다음 코드 조각에서 전제 조건에 지정된 키를 사용하여 WEB_DEV_KEY를 바꿉니다.
  3. 코드 스니펫을 귀사의 웹사이트 헤드 태그에 붙여넣습니다. 헤드 태그의 맨 위 가까이에 붙여넣도록 하십시오.
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
</script>

스마트 배너로 웹 SDK를 구현하는 방법:

  1. 웹 사이트의 모든 페이지에서 다음 절차를 반복하십시오.
  2. 다음에 나오는 코드 스니펫에서 전제 조건에 지정된 키를 사용하여 WEB_DEV_KEY와 YOUR_BANNER_KEY를 바꾸십시오.
  3. 이 코드 스니펫을 웹사이트 헤드 태그에 붙여넣습니다. 헤드 태그의 맨 위 가까이에 붙여넣도록 하십시오.
<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "WEB_DEV_KEY"}, banners: {key: "YOUR_BANNER_KEY"}});
AF('banners', 'showBanner');
</script>

SDK가 작동하는지 확인하십시오.

일단 인스톨하면 방문자의 브라우저에서 앱스플라이어 웹 SDK를 호출하고 메시지가 전송되는지 확인하십시오. 브라우저에 리포트된 메시지 네트워크 연결을 검사하여 확인할 수 있습니다.

SDK가 로드되고 작동하는지 확인하는 방법:

  1. 웹사이트로 이동하십시오.
  2. 브라우저 개발 도구를 여십시오.

    WebSDK_us-en.jpg

  3. (A) 네트워크 탭으로 이동합니다. 
  4. 페이지를 새로 고치십시오.
  5. (B) wa.appsflyer로 필터링합니다.
  6. (C) 이벤트 메시지를 선택합니다.
  7. 헤더 탭에서 (D) 다음을 확인합니다.
    • 요청 URL은 wa.appsflyer.com/events입니다.
    • site_id 쿼리 파라미터= WEB_DEV_KEY.
    • (E) 상태 코드는 200입니다.
  8. site_id 값이 브랜드 번들 설정의 WEB_DEV_KEY 값과 같은지 확인합니다.
    1. 앱스플라이어의 사이드 메뉴에서 설정 > 브랜드 번들을 선택합니다.
    2. 웹 개발 키를 클릭하여 키를 복사합니다.
    3. 키를 표시할 위치(새 브라우저 탭, 노트패드)에 키를 붙여넣으십시오.
    4. site_id와 WEB_DEV_KEY가 일치하는지 확인하십시오. 
  9. SDK가 한 번만 로드되도록 하십시오. SDK가 여러 번 로드되면 SDK 기능이 중지될 수 있습니다.

이벤트 옵트인/옵트아웃 전송하기

5578-VistiorPrivacyOptIn_us-en.png

웹 SDK는 방문자 이벤트 데이터를 앱스플라이어로 전송합니다. 이 섹션에 설명된 대로 이벤트 전송을 제어, 중지 또는 시작할 수 있습니다. 

유의사항:

  • SDK 초기 상태 설정: 웹 페이지의 최초 로드 시 SDK가 이벤트를 전송할지, 사용자가 이벤트 전송을 시작하기 위해 명시적 명령을 내릴 때까지 SDK가 대기해야 할지 여부를 결정합니다. 이 설정은 웹 스니펫에 포함되어 있습니다.
  • 명시적 제어: 이벤트 전송을 중지하거나 시작하는 데 사용합니다. 예를 들어 데이터 옵트인/옵트아웃 배너(쿠키 동의 배너라고도 알려짐)를 구현하는 경우 명시적 명령을 배너 컨트롤에 통합하여 이벤트 전송을 시작 및 중지합니다. 명시적 제어는 SDK 초기 상태 설정보다 우선하며 다음과 같은 특성을 가진 영구적인 타사 쿠키를 사용합니다.
    • 웹사이트 도메인에서 설정합니다.
    • 웹 SDK에서 설정하거나 브라우저에서 결정한 기간이 지나면 만료됩니다. 쿠키가 만료되면 웹 SDK는 초기 상태 설정으로 되돌아갑니다.
    • 웹 SDK 쿠키는 브라우저별 쿠키 설정을 방해하지 않으며 항상 적용됩니다.

SDK 초기 상태 설정

설정 스니펫 필수

[기본값] 이벤트 전송하기

웹 SDK 스니펫을 다음과 같이 변경하십시오. 필요한 경우, 다음과 같은 measurementStatus 파라미터를 추가하십시오.

Set measurementStatus=true

{pba: {webAppId: "********-****-****-*****************", measurementStatus:true}

이벤트를 전송하지 않기

 

웹 SDK 스니펫을 다음과 같이 변경하십시오. 필요한 경우 다음과 같은 measurementStatus 파라미터를 추가하십시오.

Set measurementStatus=false

{pba: {webAppId: "********-****-****-*****************", measurementStatus:false}

명시적 제어

옵션 명령
이벤트 전송 시작(옵트인) window.AF_SDK.PLUGINS.PBA.enableMeasurement()
이벤트 전송 중지(옵트아웃) window.AF_SDK.PLUGINS.PBA.disableMeasurement()

콘텐츠 보안 정책(CSP) 구현

일부 웹마스터는 Javascript가 해당 CSP로 보호될 것을 요구합니다. 다음을 포함한 여러 CSP 메커니즘을 사용하여 해당 보호를 수행할 수 있습니다.

  • 자체 사용 CSP
  • nonce를 사용하는 CSP: 사용자가 생성한 임의의 nonce 값을 사용하여 스크립트 태그에 nonce 명령을 추가합니다.  
    <script nonce="random value generated by you">
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
....
</script>

쿼리 구문 삭제

쿼리 구문에 앱스플라이어가 기록하지 않기를 바라는 데이터가 포함된 경우, 앱스플라이어 플랫폼에 일부 또는 모든 쿼리 파라미터를 삭제하도록 지시할 수 있습니다. 이렇게 하면 삭제된 것은 로데이터나 리포트에서 사용할 수 없습니다. 

URL, 참조자 및 header_referer와 관련하여 설명된 방법을 구현할 수 있습니다.

쿼리 삭제 옵션

방법 설명 
모든 쿼리 구문 삭제 URL에 af_url=true 덧붙이기
지정된 쿼리 구문 삭제

쿼리 구문 마스크를 설정하여 삭제할 구문을 지정합니다.  af_url_mask=param을 사용하여 삭제 마스크를 설정합니다. 여기서 param은 파라미터 이름입니다.

예: 

마스크를 포함한 URL:

param1=value1&param2=value2&param3=value3&af_url_mask=param2;param3

삭제 후 URL:

param1=value1&af_url_mask=param2;param3

이벤트 기록 원리

전환 및 표준 이벤트

  • SDK에서 사용자 이벤트를 기록하여 앱스플라이어 플랫폼으로 전송합니다.
  • 앱스플라이어는 마케터가 설정한 전환 이벤트 목록을 사용하여 이벤트를 표준 이벤트와 전환 이벤트로 분할합니다.
  • 전환 이벤트 데이터는 PBA 대시보드에서 사용할 수 있습니다.
  • 전환 이벤트 및 표준 이벤트 데이터는 로데이터 리포트에서 사용할 수 있습니다.

전환 이벤트

  • 전환 이벤트는 마케팅 및 비즈니스 활동에 대한 통찰력을 제공합니다. 전환 이벤트에는 구매, 다운로드, 가입 및 구독이 포함됩니다.
  • PBA는 전환 이벤트를 사용자가 웹사이트에 방문하도록 유도한 미디어소스로 어트리뷰트합니다.
  • 어트리뷰트 미디어소스를 식별하여 다양한 미디어소스에서 가져온 사용자의 품질을 측정하고 차별화할 수 있습니다.
  • 전환 이벤트는 수익을 기록하고 ROI를 계산하는 데 사용됩니다.
  • 특정 미디어소스에 대한 광고 예산을 이러한 미디어소스에서 발생하는 사용자로부터 발생하는 수익과 비교하기 위해 사용합니다.

표준 이벤트

  • 표준 이벤트는 전환으로 이어지는 사용자 여정과 퍼널을 검증하는 데 사용됩니다.
  • 이를 사용하여 사용자 활동을 측정하고 사용자 인게이지먼트를 유도하는 미디어소스를 강조 표시합니다.
  • 사용자 활동을 기록하여 사용자를 리인게이지먼트 캠페인에 표시합니다.

이벤트 기록

특정 조건이 충족될 때, 예를 들어 방문 페이지가 로드되거나 사용자가 웹사이트 요소와 상호작용할 때, 이벤트를 기록하도록 웹 SDK를 트리거합니다. 이벤트 기록 예시를 참조하십시오.

고객 사용자 ID(CUID)를 사용하여 사용자 식별

  • 앱스플라이어는 할당한 고유 CUID를 사용하여 웹 사용자를 식별합니다. 일반적으로 CUID는 백엔드 서버에서 관리합니다. 
  • 모바일 환경에서 사용하는 것과 동일한 CUID 값을 사용하십시오. 이렇게 하면 여러 플랫폼에서 사용자 활동을 전체적으로 볼 수 있습니다. 모바일 SDK의 기능은 setCustomerUserId 기능( iOS , 안드로이드, Unity )입니다.
  • 웹 SDK에서 CUID를 설정하는 방법:
    • CUID에 액세스할 수 있는 가장 이른 시점에 CUID를 설정합니다. 다시 말하면 대부분의 경우 로그인 또는 가입을 통해 사용자가 식별될 때까지 기다려야 합니다.
    • 다음 예제와 같이 setCustomerUserId()에 대한 JavaScript 호출을 실행합니다.
       일러두기! 숫자라도 CUID를 문자열로 보냅니다. 따옴표로 묶어 문자열로 만들 수 있습니다.
  • 웹 S2S를 구현하는 경우 백엔드에서 CUID를 웹 방문자 ID와 연결할 때 PBA에 알려야 할 수도 있다는 점을 고려하십시오. 
  • CUID에는 전화번호나 이메일 주소와 같이 직접 식별할 수 있는 개인 정보를 포함해서는 안 됩니다.
예시: CUID 설정 
// 현재 모든 사용자 웹 이벤트를 고유 ID 663274에 연결 
AF('pba', 'setCustomerUserId' , '663274')

웹 SDK 이벤트 파라미터

파라미터 이름 필수적 설명
이벤트 유형 예

이벤트 유형

형식: 문자열(string)

이 파라미터를 항상 EVENT로 채우십시오.

예시: eventType: "EVENT"
eventName 예

이벤트 이름

형식: 문자열(string)

예시: Purchase, Subscription
eventCategory 아니오

이 파라미터는 더 이상 사용되지 않으며 공지되는 날짜에 시스템에서 삭제됩니다. 대신 eventValue 파라미터를 사용합니다.

eventLabel

 

 아니오

이 파라미터는 더 이상 사용되지 않으며 공지되는 날짜에 시스템에서 삭제됩니다. 대신 eventValue 파라미터를 사용합니다.
이벤트 수익 아니오

전환 이벤트에 할당된 수익

형식: Float
eventRevenueCurrency 아니오

수익 통화

  • 3자리 ISO 4217 통화 코드
  • 기본 설정: USD

형식: 문자열(string)
eventValue 아니오
이벤트를 설명하는 이벤트 파라미터 맵. 이 파라미터를 사용하여 제품 SKU, 광고 항목 가격과 같은 리치 인앱이벤트를 전송합니다. 
형식: JSON

예시: 단가가 $3.99인 파란색의 SKU ABC123 전송하기

{"sku": "ABC123", “color": "blue", "unit_price":3.99,"currency": "USD"} 

제한: 1000자. 이 값을 초과하지 마십시오. 잘립니다. 

이벤트 기록 시나리오

이벤트 예시

// 관련 수익을 가진 신발 구매 이벤트
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

전송하는 이벤트는 웹 앱의 특성에 따라 다릅니다. 예를 들어 온라인 스토어 앱에는 뉴스 매체와는 다른 일련의 이벤트가 필요합니다. 다음 시나리오를 참조하여 전송해야 하는 이벤트와 전송 시기를 파악하십시오.

온라인 스토어

온라인 스토어을 관리한다고 가정하겠습니다. 기록하려고 하는 몇 가지 표준 이벤트는 다음과 같을 것입니다. 

  • 검색: 표준 이벤트
  • 장바구니에 추가: 표준 이벤트
  • 장바구니에서 삭제: 표준 이벤트
  • 구매: 전환 이벤트

뉴스 아울렛

새로운 아울렛을 관리하고 있다고 가정하겠습니다. 기록하려고 하는 몇 가지 이벤트는 다음과 같을 것입니다.

  • 가입: 전환 이벤트
  • 구독 구매: 전환 이벤트

이벤트 전송 여부 확인

이 부분은 웹 개발자용입니다.

테스트 PBA 웹 SDK 연동: 실시간으로 테스트 이벤트를 봅니다.

이벤트가 앱스플라이어에 전송되었는지 확인하는 방법:

  1. 웹사이트를 엽니다.
  2. 브라우저 개발 도구를 여십시오.
  3. 네트워크 탭으로 전환합니다.
  4. 이벤트를 트리거합니다.
  5. 메시지로 필터링합니다.

    pba_af_event.png

  6. 대상 wa.appsflyer.com으로 시작하는 네트워크 요청을 찾습니다. (아래 스크린샷 참조).
  7. 다음을 확인하십시오.
    1. 상태 코드가 200이다.
    2. 요청 페이로드는 이벤트의 파라미터와 일치한다.

예시

이벤트 기록

제공된 코드는 설명을 위한 것입니다. 이 코드를 그대로 사용하지는 마십시오. 

  • 가정: 이벤트가 전송될 때 웹 SDK가 페이지에 이미 로드되어 있습니다.
  • 예제 시나리오에는 다음과 같은 경우 이벤트를 기록하기 위한 코드가 포함되어 있습니다. 
    • 랜딩 페이지 로드.
    • 사용자가 웹사이트와 상호작용.
네이티브 이벤트 기록 태그 관리자 이벤트 기록

방문 페이지 로드 시 이벤트 기록하기

  • 뉴스레터 구독 페이지가 있고 구독을 기록하려고 합니다.
  • 또한 감사 페이지를 설정하고 구독 후 사용자를 해당 페이지로 리디렉션할 수 있습니다.
<html>
    <head>
        <!-- Assume that the server returns a response with details about the newly subscribed user -->
        <!-- Alternatively, you can extract data from localStorage or cookies,
            in case data was set in either of them during the subscription process
        -->
        <script>window.onload = function(){
            AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion', eventValue: {'label' : 'newspaper'}, eventName: 'subscription',}); } </script> </head> <body> <h1>Thank You for Subscribing to Our Newsletter</h1> </body> </html>
  • 위의 코드에는 기본 HTML 페이지가 포함되어 있습니다. 이벤트를 전송하려면 웹 페이지에서 웹 SDK를 로드해야 합니다.
  • 페이지가 로드되면 사용자가 페이지로 리디렉션된 후 창 로드 메서드가 AF() 메서드를 호출하여 구독 이벤트를 앱스플라이어로 보냅니다.

사용자가 웹사이트와 상호 작용할 때 이벤트 기록하기

  • 전자상거래 웹사이트가 있고 결제 이벤트를 기록하려고 합니다.
  • 사용자가 결제 버튼을 클릭하면 웹 SDK가 앱스플라이어에 이벤트를 전송합니다.
<html>
<head>
    <!-- Assume that data about products in the shopping cart
    is stored in localStorage -->
    <script>
        window.onload = function () {
            document.getElementById('checkout').addEventListener('click', function () {
                AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
            });
        }
    </script>
</head>
<body>
    <h1>Shopping Cart</h1>
    <h2>Shirt</h2>
    <p>
        <ul>
            <li>Color: Blue</li>
            <li>Quantity: 2</li>
            <li>Price: $20</li>
        </ul>
    </p>
    <h2>Pants</h2>
    <p>
        <ul>
            <li>Color: Black</li>
            <li>Quantity: 3</li>
            <li>Price: $15</li>
        </ul>
    </p>
    <button id='checkout'>Checkout</button>
</body>
</html>

위의 코드는 기본 HTML 페이지를 보여줍니다. 이벤트를 전송하려면 웹 페이지에서 웹 SDK를 로드해야 합니다.

  • 페이지가 로드되면 클릭 리스너를 체크아웃 버튼에 바인딩합니다.
  • 사용자가 체크아웃 버튼을 클릭하면 콜백 함수는 다음을 수행합니다.
    • localStorage에서 데이터를 가져옵니다.
    • AF() 메서드를 호출하고 메서드에 데이터를 전달합니다.
  • AF() 메서드는 이벤트를 앱스플라이어로 보냅니다.
  • 이벤트가 시작되기 전에 웹 SDK 함수 태그가 로드되었는지 확인하십시오.
  • 이벤트 값으로 수익 값의 통화 기호와 같은 특수 문자를 전송하지 마십시오.
  • 값 문자열은 50자 미만이어야 합니다.

가입 후 고객 사용자 ID 설정

이 예제에 제공된 코드는 단지 참조용입니다. 이 코드를 그대로 사용하지는 마십시오. 이 코드의 사용 방법을 잘 모르는 경우 웹 개발자에게 문의하십시오. 

가정: 이벤트가 전송되기 전에 페이지에서 웹 SDK를 로드합니다. SDK는 다시 로드되지 않았습니다.

사용자 시나리오:

  • 사용자가 귀사 웹사이트에 가입합니다.
  • 웹사이트 코드는 사용자 세부 정보를 수집하여 귀사 서버로 전송합니다.
  • 서버는 사용자에 대해 고유한 CUID를 생성합니다.
  • 가입 후 감사 페이지에서 서버에 대해 새 CUID를 쿼리합니다.
  • 서버 응답을 사용하여 웹 SDK setCustomerUserId() 메서드를 사용하여 앱스플라이어 CUID를 설정합니다.
네이티브 Google Tag Manager

가입 페이지 설정:

<html>
<head>
    <!-- The Web SDK script loads first -->
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        };
    // This function stores the user email sent to the server after the user reaches the thank you page
    // The response from the server is a unique CUID that should be set using the web SDK setCustomerUserId method
        function storeUserEmail (){
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Sign Up</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Name</label>
            <input type="text" name="name" id="name"></div>
        <br />
        <div> <label>Email</label>
            <input type="email" name="email" id="email"></div>
        <br />
        <input type="submit" id="submit">
    </form>
</body>
</html>

위의 선행 코드는 간단한 가입 양식입니다. 양식이 제출되면 이메일이 localStorage에 저장됩니다. 사용자가 감사 페이지를 열면 사용자 이메일 주소가 서버로 전송되어 이메일 주소에 대한 고유 CUID가 생성됩니다.

가입한 사용자를 위한 감사 페이지 설정:

<html>
<head>
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        // Using the fetch API to send the user email to the server
        // and get the unique user id in return	
        window.onload = function () {
            var userEmail = localStorage.getItem('user_email');
            fetch('users/' + userEmail).then(function (res) {
                   res.text().then(function (id) {
                    console.log(id);
                    AF('pba', 'setCustomerUserId', id);
                });
            });
        }  </script> 
     </head> 
     <body> 
        <h1>Thank You for Signing Up!</h1> 
     </body> 
</html>

코드는 Fetch API를 사용합니다. 이 API는 사용자가 입력한 이메일 주소를 서버에 전송합니다. 사용자 가입 시 서버가 고유한 CUID를 생성한다고 가정할 때 서버에 이메일 주소를 보내는 것은 고유한 CUID를 수신하기 위한 것입니다. 서버는 고유한 CUID로 응답하고 이 고유한 CUID는 setCustomerUserId 메서드로 전달되는 값입니다.

setCustomerUserId 함수는 사용자 흐름의 모든 단계(예: 사용자 로그인 및 가입 후)에서 전송할 수 있습니다. 앱스플라이어는 전송된 가장 최근의 CUID를 사용하여 과거 또는 미래의 터치포인트 및 이벤트에 대해 현재 관찰된 사용자를 업데이트합니다.

모바일 앱의 setCustomerUserd 기능에서와 동일한 CUID 값을 사용합니다(iOS, 안드로이드, Unity에 대해서는 모바일 setCustomerUserId 참조)

추가 정보

웹 SDK 쿠키

다음 표에 기재한 쿠키는 웹사이트의 Web SDK에서 설정하거나 사용합니다. 

표에서 다음 약어가 사용됩니다.

  • AMP: 액셀러레이티드 모바일 페이지 
  • CDN: 콘텐츠 전송 네트워크
  • 3PC: 타사 쿠키
쿠키 이름  도메인 수명 사용하는 경우 상세 내용
afUserid 웹사이트 도메인 395일 비 AMP 웹 로드 및 탐색 이벤트 맥락에서 사용자 식별
AF_SYNC 웹사이트 도메인 1주 비 AMP
  • 최종 사용자 식별자가 설정되었음을 나타내는 플래그
  • 이것은 사이트 로드 시간을 줄이는 데 사용됩니다.
af_id appsflyer.com 395일 3PC가 허용되는 경우 비 AMP 앱 실행 및 탐색 이벤트 맥락에서 사용자 식별 
af_id onelink.me 395일 3PC가 허용되는 경우 비 AMP 배너 인게이지먼트, 원링크 인게이지먼트 또는 둘 다를 앱 실행 이벤트에 연결합니다.
amp-afUserid AMP CDN 또는 웹사이트 도메인 1년 AMP의 페이지 서비스용  

웹 SDK 릴리스 노트

날짜  버전 참고
2021년 7월 1일 1.0 쿼리 구문 삭제
2021년 6월 1일 1.0 콘텐츠 보안 정책(CSP) 구현 
2020년 8월 31일 1.0 옵트인 및 옵트아웃 기능이 추가됨
2020년 4월 16일 1.0 customerUserId() 함수는 고유한 CUID를 보내기 위한 IDENTIFY 이벤트를 대체합니다.
2020년 7월 30일 1.0
  • 이벤트를 전송하기 위한 명시적 시작/중지 제어
  • 기본 초기 상태 변경

사용 중단

  • 사용 중단 알림 기능은 기능 또는 방법 지원을 중단하려는 의도를 미리 알려줍니다. 기능 또는 방법은 사용 금지 시점까지 계속 작동합니다.
  • 사용 중단 통지를 코드를 변경할 수 있는 기회로 생각하십시오.

사용 중단 날짜

 운영 종료 일자 상세 내용
2020년 4월 16일 통지됨

더는 사용되지 않는 메서드: eventType이 "IDENTIFY"로 설정된 이벤트 파라미터 customUserId의 고객 사용자 ID(CUID) 전송 

현재 방법: setCustomerUserId() 함수를 사용하여 CUID를 보냅니다.