Facebook 픽셀 연동

Facebook 픽셀은 Facebook의 웹 전용 애널리틱스 툴입니다. Facebook SDK v4.34부터 앱의 웹뷰에서 픽셀 이벤트를 기록하고 또한 Facebook 픽셀 이벤트를 Facebook 앱 이벤트로 전환할 수 있습니다. 이를 위해 Hybrid Mobile App Events를 사용해야 합니다.

또한, 이제 Facebook SDK와 별도의 연동 없이 Facebook 픽셀을 Adjust SDK와 사용할 수 있습니다.

예시 앱

iOS 예시 앱

Facebook 연동

Facebook 앱 ID

Facebook 픽셀을 사용하려면 다음의 단계를 수행하시기 바랍니다:

Facebook의 iOS SDK 가이드에 명시된 바와 같이, Facebook 앱 ID를 앱에 다음과 같이 추가해야 합니다:

Xcode에서 프로젝트의 Info.plist을 오른쪽 클릭한 뒤 Open As -> Source Code 를 선택합니다.
다음의 XML 스니펫을 파일의 본문 중 최종 </dict> 요소 바로 전에 추가합니다.

<dict>
  <key>FacebookAppID</key>
  <string>{your-app-id}</string>
</dict>

{your-app-id} 를 앱 ID로 대체합니다. 이는 Facebook App 대시보드에서 확인할 수 있습니다.

Facebook 픽셀 구성

Facebook 픽셀 연동에 관한 Facebook의 가이드를 참조하시기 바랍니다. 자바스크립트 코드는 다음과 같아야 합니다:

<!-- Facebook Pixel Code -->
<script>
   !function(f,b,e,v,n,t,s)
   fbq('init', <YOUR_PIXEL_ID>);
   fbq('track', 'PageView');
</script>
<!-- End Facebook Pixel Code -->

다음으로 Facebook 픽셀 코드를 업데이트합니다. 이에 관한 설명은 Update Your Pixel 아래의 Hybrid Mobile App Events guide 에서 찾을 수 있습니다.

fbq('init', <your_pixel_id>);
fbq('set', 'mobileBridge', <your_pixel_id>, <your_fb_app_id>);

Adjust SDK 연동

웹뷰 증강

iOS 웹뷰 앱에 대한 연동 가이드를 참조하시기 바랍니다. 웹뷰 브릿지를 로딩할 때 augmentHybridWebView 메서드에 콜을 추가합니다.

- (void)viewWillAppear:(BOOL)animated {
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    /// or with WKWebView:
    /// WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];

    /// add @property (nonatomic, strong) AdjustBridge *adjustBridge; on your interface
    self.adjustBridge = [[AdjustBridge alloc] init];
    [self.adjustBridge loadUIWebViewBridge:webView];
    /// optionally you can add a web view delegate so that you can also capture its events
    /// [self.adjustBridge loadUIWebViewBridge:webView webViewDelegate:(UIWebViewDelegate*)self];

    /// or with WKWebView:
    /// [self.adjustBridge loadWKWebViewBridge:webView];
    /// optionally you can add a web view delegate so that you can also capture its events
    /// [self.adjustBridge loadWKWebViewBridge:webView wkWebViewDelegate:(id<wknavigationdelegate>)self];
    [self.adjustBridge augmentHybridWebView];

이벤트 이름 등록

Adjust 웹 브릿지 SDK는 Facebook 픽셀 이벤트를 Adjust 이벤트로 해석합니다.

이 기능을 사용하려면 Facebook 픽셀을 특정 Adjust 이벤트에 매핑해야 합니다. 또한 디폴트 Adjust 이벤트 토큰을 구성할 수도 있습니다. 디폴트 토큰을 사용하려면, Adjust SDK를 시작하고 픽셀 이벤트를 기록하기 전에 토큰을 추가해야 합니다. 이는 Facebook 픽셀 구성으로부터 복사하여 붙여넣기한 fbq('track', 'PageView'); 이벤트를 포함합니다.

이벤트를 매핑하려면 config 인스턴스에서 addFbPixelMapping 메서드를 호출합니다. Facebook 이벤트 이름과 Adjust 이벤트 토큰을 파라미터로 사용합니다. 이는 Adjust SDK 초기화 전에 호출해야 합니다.

adjustConfig.addFbPixelMapping("fb_mobile_search", adjustEventTokenForSearch);
adjustConfig.addFbPixelMapping(
   "fb_mobile_purchase",
   adjustEventTokenForPurchase,
);

픽셀 이벤트 이름	Facebook 앱 이벤트 이름
View Content	`fb_mobile_content_view`
검색	`fb_mobile_search`
장바구니에 추가	`fb_mobile_add_to_cart`
위시리스트에 추가	`fb_mobile_add_to_wishlistt`
InitiateCheckout	`fb_mobile_initiated_checkout`
AddPaymentInfo	`fb_mobile_add_payment_info`
구매	`fb_mobile_purchase`
CompleteRegistration	`fb_mobile_complete_registration`

Adjust SDK는 특정 이벤트에 대해 디폴트 이벤트 토큰을 찾을 수 없는 경우 경고를 다음과 같이 로깅합니다.

There is not a default event token configured or a mapping found for event named: 'fb_mobile_search'. It won't be measured as an adjust event.

또한 구성된 매핑이 없는 경우 디폴트 Adjust 이벤트를 설정할 수 있습니다. 이를 위해 Adjust SDK를 초기화하기 전에 adjustConfig.setFbPixelDefaultEventToken(defaultEventToken);을 호출합니다.