어도비(Data Collection) 디버깅하기 - 2. 디버거를 통해 개발환경 적용해보기

어도비(Data Collection) 디버깅하기 - 2. 디버거를 통해 개발환경 적용해보기

2024-09-03 05:46

38 views

어도비 런치(Data Collection)로 룰을 작성한 뒤에 우리는 세 가지 환경에 데이터를 배포할 수 있습니다.

각각 Dev, Staging, Production환경인데요

앞에서 계속 이야기했듯이 Production환경은 실제 작업 내용이 배포되는 환경입니다.

그렇다면 Production이 아닌 Dev 혹은 Staging에서 데이터를 확인해야하는데 실제 Dev나 Staging서버가 없는 경우 참 난감합니다.

하지만 다행히도 어도비 디버거(Adobe Experience Platform Dibugger)를 사용하면 이를 해결할 수 있는데요

실제 Production환경에서도 디버거를 통해 Dev환경을 적용해볼 수 있습니다. 단순히 배포되는 형태가 아닌 내가 사용하고있는 크롬 브라우저에서만 작동하기 때문에 테스트용도로 활용할 수 있습니다. 마치 GTM의 미리보기 처럼 말이죠

실제로 진행해보겠습니다.

지난번 실습에서 테스트 룰을 하나 만들어놨었는데요 해당 룰에는 다음과 같이 코딩을 진행했었습니다

- 지난번 실습 내용: https://pluszero.co.kr/ko/blog/adobe-experience-cloud/%EC%96%B4%EB%8F%84%EB%B9%84-%EB%9F%B0%EC%B9%98-adobe-data-collection-%EB%A3%B0-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/

Adobe Data Collection console log test code

해당 룰이 발동하면 개발자 콘솔(F12)에 "Custom Rule" 이라는 문자를 확인할 수 있게 될 것입니다.

해당 룰을 Dev환경에 배포한 뒤 실제로 확인해보겠습니다.

1 - 왼쪽 메뉴의 Publishing Flow로 이동합니다.

Adobe Data Collection Main

2 - 오른쪽 상단의 [Add Library]를 클릭합니다.

Adobe Data Collection Publishing Flow

3 - 그 뒤 뜨는 창에서 Name을 입력하고 Environment를 [Development]로 설정한 뒤 [Add All Changed Resource]를 클릭하고 [Save & Build to Development]를 클릭합니다.

여기서 Add All Changed Resource를 클릭하면 가운데 목록이 뜨는데 내가 작업한 룰을 모두 가져오는 버튼입니다. 따라서 정리하자면 내가 작업한 룰들을 배포할건데 [Development] 환경에 배포할 거라는 뜻이 됩니다. 간단하죠?

Adobe Data Collection Create Publishing Flow

4 - 그럼 아래와 같이 Development영역에 First work가 생기고 로딩중인 것을 확인할 수 있습니다.

이미 예상하시겠지만 Development에서 최종 Production으로 배포를 하면 Published쪽으로 카드가 이동하게 됩니다. Approved영역을 Staging으로 보면 되는데 사실 잘 사용하진 않습니다.

Adobe Data Collection Create Dev Card

5 - 아래와 같이 준비가 완료되면 초록색 불이 들어옵니다.

Adobe Data Collection(Launch) Created Publishing Flow Card

6 - 이제 Dev환경에 배포가 완료되었으니 해당 환경을 적용해보겠습니다. 왼쪽의 [Environments]를 클릭한 뒤 Development환경의 Install영역 박스를 클릭합니다.

Adobe Data Collection(Launch) Environments Dev install


7 - 박스의 중간 영역의 script를 복사합니다. 해당 스크립트는 프로덕션과는 다른 스크립트입니다.

Adobe Data Collection(Launch) Copy Dev Environment Script

8 - 사이트로 이동해 어도비 디버거(Adobe Experience Platform Dibugger)를 실행한 뒤 [새로고침] 하고 [Experience Platform Tags > Configuration]으로 이동합니다. 그런 뒤 중간 script에 [Action > Replace]를 클릭합니다.

Adobe Experience Platform Tag Replace Embed Code

9 - 복사해뒀던 Dev script를 집어넣어 Replace 해줍니다.

Adobe Experience Platform Tags Replace Embed Code to Dev

10 - 그런 뒤 개발자 도구(F12)로 이동하여 [콘솔]을 확인해보면 Custom Rule이 정상적으로 출력되는것을 확인할 수 있습니다.

Adobe Data Collection(Launch) Test rule console log

다음 게시글에서는 실제로 Publishing 배포를 시도해보도록 하겠습니다.



다음글 - 어도비(Data Collection) 디버깅하기 - 3. 실제 Production환경에 배포하기
이전글 - 어도비(Data Collection) 디버깅하기 - 1. 런치가 제대로 설치되어있는지 확인하기