에어브릿지 적용기

사내에서 딥링크, 딥퍼드딥링크를 사용하며 앱 인스톨/이벤트 등의 어트리뷰션 분석이 필요해졌습니다. 이러한 상황에서 마케팅 툴중 하나인 에어브릿지를 사용하게되어 적용했던 과정을 공유하겠습니다.

설치

// html
<button id="app_download"> </button> // javascript

airbridge.setDownloads({
    buttonID: "app_download",
    // or ["app_download_1", "app_download_2", ...]
    defaultParams: {
        campaign: 'example_campaign',
        medium: 'example_medium',
        term: 'example_term',
        content: 'example_content'
} });

DeepLink Guide

airbridge.openDeeplink({
    type: "redirect",
    deeplinks: {
        ios: "ablog://main",
        android: "ablog://main",
        desktop: "http://blog.ab180.co"
    },
    fallbacks: {
        ios: "itunes-appstore",
        android: "google-play"
    },
});

실제 적용기

custom hooks를 활용하였습니다.

const useAirbridge = () => {
  const initializedRef = useRef(false);
  const paramRef = useRef();
  // Airbridge Action
  const handleAirbridge = () => {
    if (paramRef.current.actionType == Const.ACTION_TYPE_DO
WNLOAD) {
      handleDownload();
}
    if (paramRef.current.actionType == Const.ACTION_TYPE_DE
EPLINK) {
      handleDeepLink();
    }
};
// 다운로드 
  const handleDownload = () => {
    getAirbridge().then((airbridge) => {
      airbridge.default.setDownloads({
        buttonID: Const.DEFAULT_PARAM.BUTTON_ID.DOWNLOAD,
        defaultParams: {
          campaign: Const.DEFAULT_PARAM.CAMPAIGN.WEB_TO_AP
          medium: Const.DEFAULT_PARAM.TOP
});
      paramRef.current.initCallback();
    });
};
// 딥링크 & 디퍼드 딥링크 
  const handleDeepLink = () => {
    getAirbridge().then((airbridge) => {
      airbridge.default.openDeeplink({
        type: 'redirect',
        deeplinks: {
          ios: paramRef.current.deepLink,
            android: paramRef.current.deepLink
},
fallbacks: {
  ios: Const.MARKET.IOS,
  android: Const.MARKET.AND
},
defaultParams: {
  campaign: Const.DEFAULT_PARAM.CAMPAIGN.WEB_TO_AP
  medium: Const.DEFAULT_PARAM.POP_UP,
  term: paramRef.current.trackingParams
}
}); });
};
/**
 * Airbridge Hooks의 Event 발생시 호출되는 콜백
 */
Event
const onChangeAction = useCallback(
  (params) => {
    paramRef.current = params;
    if (!initializedRef.current) {
      getAirbridge().then((airbridge) => {
        airbridge.default.init(
          {
            app: Const.APP_NAME,
            webToken: Const.WEB_TOKEN,
            useProtectedAttributionWindow: true
},
() => {
            initializedRef.current = true;
            handleAirbridge();
          }
); });
return;
      }
    handleAirbridge();
  },
  [initializedRef]
);
// Dynamic Import (Loadable Component React )
Library
  const getAirbridge = () => {
    return import('airbridge-web-sdk-loader');
};
  return { onChangeAction };
};
export default useAirbridge;

아래 코드를 좀더 살펴보자면 Code Splitting을 활용하였습니다.
웹+모웹에서 에어브릿지 링크를 사용하는 경우는 전체 트래픽에 비해 많지 않습니다. 그런 데 사용할지 사용하지 않을지 결정되지 않은 기능을 위해 전체 웹사이트 js 용량을 증가시킬 필요는 없습니다. SEO에도 좋지 않지만 사용자들도 초기 로딩이 늦어지게되는 문제가 발생 합니다.

const getAirbridge = () => { 
 return import('airbridge-web-sdk-loader'); 
}; 

useState 를 활용하기보다는 useRef 를 활용하였습니다. 리 렌더링이 필요한 상황은 아니였 기 때문입니다.

const initializedRef = useRef(false); 
const paramRef = useRef();

실제 호출하는 곳에서는 사용법이 두가지로 나뉩니다.
1. 콜백이 필요한 경우. (앱 다운로드의 상황) downloadRef는 <div id= {C.DEFAULT_PARAM.BUTTON_ID.DOWNLOAD} ref={downloadRef}> 와 같이 실제 클릭이 필요한 dom에 연결시켜 둡니다. 콜백이 발생하면 해당 div의 click 이벤트가 발생해야 airbridge의 download가 수행되게 됩니다.

const handleDownload = () => { 
 const handleDownloadClick = () => { 
 downloadRef.current.click(); 
 }; 
 onChangeAction({ actionType: C.ACTION_TYPE_DOWNLOAD, init Callback: handleDownloadClick }); 
}; 

2. 딥링크가 필요한 경우. 이경우는 좀더 사용이 간단해 집니다. 콜백이 필요없기 때문에 클 릭 이벤트가 발생하면 바로 훅의 onChangeAction function 을 호출하면 되겠습니다

const { onChangeAction } = useAirbridge; 
onChangeAction({ 
 actionType: C.ACTION_TYPE_DEEPLINK, 
 deepLink: deepLink, 
 trackingParams: trackingParams 
});