그로스 액션 (Growth Action) 연동하기 [Web]

Introduction

디파이너리 그로스액션은 고객사의 인게이지먼트 마케팅 활동을 돕기 위한 기능을 제공합니다.

참고링크 : [그로스액션 (Growth Action) 서비스 알아보기]

디파이너리가 제공하는 기능을 이용하여 오디언스 그룹을 생성하고 각 오디언스를 타겟으로 하는 개인화된 마케팅을 진행할 수 있습니다.

[[인용:안내:보통]] 그로스액션을 이용하기 위해서는 디파이너리 유료플랜 이용이 필요합니다. [이용 문의하기]

지원 브라우저

Growth Action 의 웹 푸시 알림은 최소 아래 버전 이상의 브라우저에서 지원합니다.

	Window	Mac	Android	iOS
IE	X	-	-	-
MS Edge	17+	17+	17+	-
Google Chrome	50+	50+	50+	Push Unsupported
Mozilla Firefox	47+	47+	105+	Push Unsupported
Apple Safari	-	10+	-	Push Unsupported
Samsung browser	-	-	4+	-

디파이너리 콘솔 설정

Growth Action Push 사용을 위해서는 우선 콘솔에서 Web Push Setting 이 필요합니다.

Web Push Setting 은 디파이너리 콘솔에 접속 후 Growth Action -> Settings -> Web Push Setting 메뉴에서 진행합니다.

디파이너리 콘솔 내 푸시와 관련된 설정은 아래 가이드를 참고해 주시길 부탁드립니다.

참고링크 : [웹 푸시 설정]

[[인용:안내:보통]] In-Web Message 는 콘솔에서 별도의 설정이 필요하지 않습니다.

Web SDK 설정

Web SDK 연동하기

Web 환경에서 Growth Action 을 사용하기 위해서는 기본적으로 Web SDK 가 연동되어 있어야 합니다.

참고링크 : [Web SDK 연동 가이드]

Web SDK init 추가 설정

Web Push 를 사용하기 위해서는 SDK init 시 푸시 사용여부를 아래와 같이 사용하셔야 합니다.

<head>
…
<!-- AdBrix Web SDK init -->
<script>
  window.adbrix.init({
    appkey: 'your_appkey',
    webSecretkey: 'your_webSecretKey',
    // push 관련 설정 추가
    push: {
      enable: true,
      serviceWorkerOptions: {
        file_name: 'service-worker.js',
        file_path: '/',
        scope: '/'
      },
    },
    // In Web Message 추가 설정
    inWebMessage: {
      enable: true,
      openInNewWindow: true,
      zIndex: 9999,
      fetchListener: function(message){
        console.log('fetch_listener ' + message);
      },
      clickListener: function(actionId, actionType, actionArg, isClosed){
        console.log('click_listener ' + actionId + actionType + actionArg + isClosed);
      },
    },
  });
</script>
…
</head>

Push 사용을 위한 SDK init 시 사용하는 옵션은 아래와 같습니다.

Push

푸시 사용에 대한 옵션을 지정합니다.

Keys	Type	Note
enable	bool	푸시 서비스 사용 여부 옵션
serviceWorkerOptions	ServiceWorkerOptions	Service Worker 사용 옵션 [서비스 워커란?]

ServiceWorkserOptions

푸시 사용을 위한 ServiceWorkseOption 을 지정합니다.

Keys	Type	Note
file_name	string	Service worker 파일명
file_path	string	Service Worker 파일 경로
scope	string	Service Worker 적용 범위

자체적인 ServiceWorker 파일이 없을 경우 다운로드 받아서 적용합니다(다운로드 후 압축을 해제하고 적용합니다.). [다운로드]

이미 사용중인 ServiceWorker 파일이 있으면 아래와 같이 스크립트를 추가합니다.

//AdBrix Push Service worker
importScripts('https://static.adbrix.io/web-sdk/latest/service-worker.min.js');

In-Web Message Option

In-Web Message 사용에 대한 옵션을 지정합니다.

Name	Description	Type	Example
enable	인웹 메시지를 사용할지에 대한 유무입니다	boolean	true : 사용 false : 사용안함
openInNewWindow	인웹 메시지를 클릭하여 특정 링크로 이동할때 새창으로 열릴지/ 현재 창에서 열릴지에 대한 유무입니다	boolean	true : 새 창으로 열기 false : 현재 창에서 열기
fetchListener	팝업 메시지 데이터를 서버에서 가져와 fetch 할때 이벤트를 가져옵니다	function	message : fetch 완료 후 메시지
clickListener	팝업 메시지 내에서 클릭 이벤트가 발생할때 이벤트를 가져옵니다	function	actionId : 클릭 액션의 ID actionType : 클릭 액션의 타입 actionArg : 클릭 액션의 변수 isClosed : 팝업 메시지 종료 여부
zIndex	팝업 메시지 표시 창의 zIndex를 설정합니다	number	기본값 : 99999999

알림 수신 동의 설정

디파이너리 서버에 저장된 사용자의 알림 수신 동의 값을 설정하고 가져올 수 있는 기능입니다.

알림 수신 동의 설정하기

디파이너리 서버로 사용자의 알림 수신 동의 값을 설정합니다.

Sample Code

const subscriptionStatus = {
  //Add Only Updated information
  "informative_notification_flag": true,
  "marketing_notification_flag": true,
  "marketing_notification_flag_for_push_channel": true,
  "marketing_notification_flag_for_sms_channel": true,
  "marketing_notification_flag_for_kakao_channel": true,
  "marketing_notification_at_night_flag": true,
  "marketing_notification_at_night_flag_for_push_channel": true,
  "marketing_notification_at_night_flag_for_sms_channel": true,
  "marketing_notification_at_night_flag_for_kakao_channel": true,
};

adbrix.setSubscriptionStatus(subscriptionStatus).then(result => {
  if (result.is_success) {
    // If it's Success
  }
});

subscriptionStatus 객체 정보

Name	Note	Type	Example
informative_notification_flag	정보성 알림 동의 여부	boolean	true
marketing_notification_flag	광고성 알림 동의 여부	boolean	true
marketing_notification_flag_for_push_channel	광고성 알림 동의 여부 (푸시 채널)	boolean	true
marketing_notification_flag_for_sms_channel	광고성 알림 동의 여부 (문자 채널)	boolean	true
marketing_notification_flag_for_kakao_channel	광고성 알림 동의 여부 (알림톡 채널)	boolean	true
marketing_notification_at_night_flag	야간 광고성 알림 동의 여부	boolean	true
marketing_notification_at_night_flag_for_push_channel	야간 광고성 알림 동의 여부 (푸시 채널)	boolean	true
marketing_notification_at_night_flag_for_sms_channel	야간 광고성 알림 동의 여부 (문자 채널)	boolean	true
marketing_notification_at_night_flag_for_kakao_channel	야간 광고성 알림 동의 여부 (알림톡 채널)	boolean	true

Result

Name	Note	Type	Example
is_success	API 성공 여부	boolean	true
result_code	결과 코드	number	2000
result_message	결과 메시지 (실패 했을때 디버그 용)	string	Internal Server Error.

알림 수신 동의 가져오기

현재 설정된 알림 수신 동의 정보를 디파이너리 서버로부터 가져옵니다.

Sample Code

adbrix.getSubscriptionStatus().then(result => {
  if (result.is_success) {
    const info_flag = result.informative_notification_flag;
    const mkt_flag = result.marketing_notification_flag;
    const mkt_push = result.marketing_notification_flag_for_push_channel;
    const mkt_sms = result.marketing_notification_flag_for_sms_channel;
    const mkt_kakao = result.marketing_notification_flag_for_kakao_channel;
    const night_flag = result.marketing_notification_at_night_flag;
    const night_flag_push = result.marketing_notification_at_night_flag_for_push_channel;
    const night_flag_sms = result.marketing_notification_at_night_flag_for_sms_channel;
    const night_flag_kakao = result.marketing_notification_at_night_flag_for_kakao_channel;
  }
});

getSubscriptionStatus 정보

Name	Note	Type	Example
is_success	API 성공 여부	boolean	true
result_code	결과 코드	number	2000
result_message	결과 메시지 (실패 했을때 디버그 용)	string	Internal Server Error.
informative_notification_flag	정보성 알림 동의 여부	boolean \| undefined	true
marketing_notification_flag	광고성 알림 동의 여부	boolean \| undefined	true
marketing_notification_flag_for_push_channel	광고성 알림 동의 여부 (푸시 채널)	boolean \| undefined	true
marketing_notification_flag_for_sms_channel	광고성 알림 동의 여부 (문자 채널)	boolean \| undefined	true
marketing_notification_flag_for_kakao_channel	광고성 알림 동의 여부 (알림톡 채널)	boolean \| undefined	true
marketing_notification_at_night_flag	야간 광고성 알림 동의 여부	boolean \| undefined	true
marketing_notification_at_night_flag_ for_push_channel	야간 광고성 알림 동의 여부 (푸시 채널)	boolean \| undefined	true
marketing_notification_at_night_flag_ for_sms_channel	야간 광고성 알림 동의 여부 (문자 채널)	boolean \| undefined	true
marketing_notification_at_night_flag_ for_kakao_channel	야간 광고성 알림 동의 여부 (알림톡 채널)	boolean \| undefined	true

[[인용:안내:보통]] 알림 수신 정보 설정 이력이 없을 경우 "undefined" 를 Return 합니다.

Web Push

푸시 구독 알림 호출

푸시 수신을 위해 특정 시점에 사용자가 푸시를 수신받을 수 있도록 푸시 구독 알림 API 를 호출합니다. 구독알림에서 사용자가 푸시 구독을 승인하면 이후부터 푸시를 수신할 수 있습니다.

사용자가 이미 푸시 구독 알림을 승인했을 경우 더이상 호출되지 않습니다.

//AdBrix Push subscription alarm
await adbrix.push.showPrompt();

[[인용:안내:보통]] 대안 도메인의 경우 푸시 구독 알림 호출하여 사용자가 승인을 하면 설정하신 푸시 구독 팝업창이 호출 됩니다.

카카오톡 설정

Kakao 알림톡, 친구톡 사용을 위한 설정입니다. *kakaoId : 카카오 싱크 API를 통해 받은 10자리 카카오 ID

setKakaoId(kakaoId: string): Promise<SetCiProfileResult>
- SetCiPropertyResult
  - is_success : 서버에서 정상 적용 됐는지 유무
  - result_code : 결과 코드 가져오기
  - result_message : 결과 메시지 가져오기

가이드

adbrix.setKakaoId('1234567890').then(result => {
  if(result.is_success){
    ...
  }
//kakaoId의 포맷이 틀릴 경우 isSuccess가 false가 됩니다. 
});

[[인용:위험:작게]] 해당 API는 로그인 이후에 사용 가능합니다.

SMS 설정

SMS 사용을 위한 설정입니다. *PHONE_NUMBER :E.164를 준수하는 국가코드 + 번호에서 "+"를 제외한 값 (예시 : 8210********)

setPhoneNumber(phoneNumber: string): Promise<SetCiProfileResult>
- SetCiPropertyResult
  - is_success : 서버에서 정상 적용 됐는지 유무
  - result_code : 결과 코드 가져오기
  - result_message : 결과 메시지 가져오기
가이드

adbrix.setPhoneNumber('821012345678').then(result => {
  if(result.is_success){
    ...
  }
//number의 포맷이 틀릴 경우 isSuccess가 false가 됩니다. 
});

[[인용:경고:작게]] PHONE_NUMBER :E.164를 준수하는 국가코드 + 번호에서 "+"를 제외한 값 (예시 : 8210********)

[[인용:위험:작게]] 해당 API는 로그인 이후에 사용 가능합니다.

[[인용:위험:작게]] SDK에 별도로 정해진 규격은 없으나 사용처(카카오톡 비즈메시지 등)에 따라 요구하는 규격이 다르므로 확인 후 입력 해주시기 바랍니다.

In-Web Message

In-Web Message의 데이터를 가져오고 표시하는 로직은 기본적으로 SDK에서 자동으로 처리하여 사용자가 별도로 API를 호출할 필요 없습니다.

In-Web Message 설정은 Web SDK init 추가 설정과 In-Web Message Option에서 확인하세요.

이 섹션의 문서

Introduction

지원 브라우저

디파이너리 콘솔 설정

Web SDK 설정

Web SDK 연동하기

Web SDK init 추가 설정

알림 수신 동의 설정

알림 수신 동의 설정하기

알림 수신 동의 가져오기

Web Push

푸시 구독 알림 호출

카카오톡 설정

SMS 설정

In-Web Message

클릭하여 고객지원팀에게 문의하기

이 섹션의 문서

Introduction

지원 브라우저

디파이너리 콘솔 설정

Web SDK 설정

Web SDK 연동하기

Web SDK init 추가 설정

알림 수신 동의 설정

알림 수신 동의 설정하기

알림 수신 동의 가져오기

Web Push

푸시 구독 알림 호출

카카오톡 설정

SMS 설정

In-Web Message

관련 문서

클릭하여 고객지원팀에게 문의하기