<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba,banners&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
  AF('banners', 'showBanner');
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

고려사항 및 필수 조치

시작하기 전에:

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

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

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

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

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

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

1. 웹사이트로 이동하십시오.

2. 브라우저 개발 도구를 여십시오.

   

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_KEYWEB_DEV_KEY 값과 같은지 확인합니다.
   1. 앱스플라이어의 사이드 메뉴에서 설정 > 브랜드 번들을 선택합니다.
   2. 웹 개발 키를 클릭하여 키를 복사합니다.
   3. 키를 표시할 위치(새 브라우저 탭, 노트패드)에 키를 붙여넣으십시오.
   4. site_id와 WEB_DEV_KEY이 일치하는지 확인하십시오. 
9. SDK가 한 번만 로드되도록 하십시오. SDK가 여러 번 로드되면 SDK 기능이 중지될 수 있습니다.

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

고려 사항:

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

SDK 초기 상태 설정

명시적 제어

웹사이트가 엄격한 보안 또는 데이터 개인 정보 보호 프로토콜을 요구하는 경우, 웹 SDK가 귀하의 환경 및 데이터와 상호 작용하는 방식을 구성하기 위해 다음 메커니즘을 사용하십시오.

콘텐츠 보안 정책(CSP)

웹사이트가 CSP에 의해 JavaScript가 보호되어야 하는 경우, 웹 SDK는 CSP 구성에 따라 두 가지 접근 방식을 지원합니다.

• 자체 사용 CSP https://websdk.appsflyersdk.com를 script-src 허용 목록에 추가하십시오. 이것은 표준 웹 SDK와 고급 SDK 검증 모두에 적용됩니다.
• nonce를 사용하는 CSP: 정책에서 script-src 'nonce-...'를 사용하는 경우, 고급 SDK 검증의 nonce 확장 변형을(를) 사용할 수 있습니다. 이것은 검증 프로세스에 필요한 세 개의 스크립트 태그에 nonce를 전달합니다. {{CSP_NONCE}}를 서버에서 생성된 요청별 nonce 값으로 교체하십시오.

아래 표는 nonce 확장 변형과 호환되는 CSP 정책을 보여줍니다.

CSP nonce 스니펫을 사용한 고급 SDK 검증

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window.AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

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

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

쿼리 삭제 옵션

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

전환 이벤트

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

표준 이벤트

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

이벤트 기록

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

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

예시: CUID 설정

// Associate all current user web events to distinct ID 663274 
AF('pba', 'setCustomerUserId' , '663274')

이벤트 예시

// purchase event of shoes with associated revenue
AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name"}});

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

온라인 스토어

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

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

뉴스 아울렛

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

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

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

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

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

1. 웹사이트를 엽니다.
2. 브라우저 개발 도구를 여십시오.
   • Chrome에서 개발자 도구를 여는 방법
   • Safari에서 개발자 도구를 여는 방법
3. 네트워크 탭으로 전환합니다.
4. 이벤트를 트리거합니다.

5. 메시지로 필터링합니다.

   

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>
<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>

• 이벤트가 시작되기 전에 웹 SDK 함수 태그가 로드되었는지 확인하십시오.
• 이벤트 값으로 수익 값의 통화 기호와 같은 특수 문자를 전송하지 마십시오.
• 값 문자열은 50자 미만이어야 합니다.

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

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

사용자 시나리오:

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

<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.appsflyersdk.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>

<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.appsflyersdk.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>

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

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

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

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

• AMP: AMP: 액셀러레이티드 모바일 페이지  
• CDN: CDN: 콘텐츠 전송 네트워크
• 3PC: 3PC: 타사 쿠키

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