[[신규기능]] 그로스 액션 (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 사용을 위해서는 우선 콘솔에서 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();

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

In-Web Message

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

In-Web Message 데이터 가져오기

수동으로 디파이너리 서버에서 In-Web Message 데이터를 가져옵니다. SDK 에서는 기본적으로 자동으로 데이터를 받아오기에 직접 호출할 필요는 없습니다.

adbrix.fetchInWebMessage().then(() => {
  // Do Something when data is loded
});

저장된 In-Web Message 가져오기

디파이너리 서버로부터 가져온 In-Web Message 데이터를 불러옵니다.

const getAllInWebMessages = adbrix.getAllInWebMessages();
getAllInWebMessages.then(result => {
  result.forEach(inWebMessage => {
    ...
  });
});

In-Web Message 객체 정보

Name	Note	Type
campaign_id	캠페인 ID	string
identifier_type	오디언스 타입	string
ext_attr	사용자 설정 변수	string
timezone_offset	타임존 오프셋	string
timezone_type	타임존 타입	string
type	레이아웃 타입	string
contents_html	컨텐츠	string
bg_style_bg_color	내용 배경 색상	string
bg_style_overlay_color	화면 색상	string
position_mobile	모바일 환경 표시 위치	string
position_desktop	데스크톱 환경 표시 위치	string
frequency_cap_per_session	세션 별 노출 횟수	string
frequency_cap_per_user	유저 별 노출 횟수	string
frequency_cap_for_period_in_minutes	분당 노출 횟수	string
frequency_cap_for_period_per_period	주기별 노출 횟수	string
start_datetime	캠페인 시작 시간	string
end_datetime	캠페인 종료 시간	string
last_updated_datetime	업데이트 시간	string
ext_config	이벤트 관련 추가 정보	string

수동으로 In-Web Message 표시하기

사용자가 직접 In-Web Message 정보를 입력하여 브라우저에 저장된 In-Web Message 를 표시합니다. SDK 에서는 기본적으로 디파이너리 콘솔 내 Popup Message 옵션에 설정된 트리거에 따라 자동으로 표시되므로 직접 호출할 필요는 없습니다.

// 저장된 In-Web Message 객체정보로 호출
adbrix.openInWebMessage(inWebMessage);

// 저장된 In-WebMessage 의 객체정보 중 campaing_id 를 추출하여 호출
adbrix.openInWebMessageByCampaignId('In-Web_message_campaignId');

이 섹션의 문서

Introduction

지원 브라우저

디파이너리 콘솔 설정

Web SDK 설정

Web SDK 연동하기

Web SDK init 추가 설정

알림 수신 동의 설정

알림 수신 동의 설정하기

알림 수신 동의 가져오기

Web Push

푸시 구독 알림 호출

In-Web Message

In-Web Message 데이터 가져오기

저장된 In-Web Message 가져오기

수동으로 In-Web Message 표시하기

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

이 섹션의 문서

Introduction

지원 브라우저

디파이너리 콘솔 설정

Web SDK 설정

Web SDK 연동하기

Web SDK init 추가 설정

알림 수신 동의 설정

알림 수신 동의 설정하기

알림 수신 동의 가져오기

Web Push

푸시 구독 알림 호출

In-Web Message

In-Web Message 데이터 가져오기

저장된 In-Web Message 가져오기

수동으로 In-Web Message 표시하기

관련 문서

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