오늘은 지난번에 이어 Adobe Data Collection(ADC)로 작성한 룰을 개발 환경에 적용해보도록 하겠습니다. 개발, 스테이징, 프로덕션 환경에 대해 설명했던 내용은 아래 글을 참고하세요!
웹사이트에 Adobe Data Collection(ADC) 설치하기
이전 룰을 만들었던 글은 아래 글을 참고하세요!
Adobe Data Collection(ADC) Rules 이해하기
환경 복습하기
이전에 확인했던 글에서 Adobe Data Collection은 총 3가지 환경을 제공한다고 이야기했었는데요 다시한번 복습하자면 아래와 같습니다.
- Dev – 실제 개발을 진행하는 서버로 보통 해당 서버에서 최초 개발된 코드들을 테스트하는 서버입니다.
- Staging – 배포를 위해 Production에 배포되어야 하는 코드를 테스트하기 위한 서버입니다.
- Production – 최종 사용자에게 서비스되는 서버입니다.
우리는 오늘 Dev환경에 내용을 배포하고, 사이트에서 디버깅 하는 방법에 대해 알아보도록 하겠습니다.
서버가 필요할까?
이전 ADC 설치 글에서 Dev, Staging, Production 환경별로 각각 서버가 존재하고 그 서버에 맞는 <script>를 넣으면 된다고 이야기했었는데요 그렇다면 테스트는 매번 Dev서버나 Staging서버에서 해야할까요?
다행히도 아닙니다. 어도비는 크롬 확장프로그램(Chrome Extension)에서 Adobe Experience Platform Debugger라는 솔루션을 제공합니다. 이 디버거를 통해서 실제 운영되고 있는 사이트에도 Dev환경을 적용해 볼 수 있습니다.
이 방법을 이용하면 Dev나 Staging서버를 사용하지 않거나 혹은 서버가 없더라도 테스트가 가능하고 내가 사용하고있는 Chrome 브라우저에서만 확인이 가능하기 때문에 손쉽게 테스트를 진행할 수 있습니다.
지난번에 우리가 무엇을 했었을까요?
Adobe Data Collection(ADC) Rules 이해하기
지난번 글에서 Rule이 무엇이고 어떻게 작동하는지 알아봤었고 아래와 같은 Console log가 작동하는 룰을 만들었었습니다.
이렇게 룰이 만들어졌다고 바로 사이트에 적용하는 것이 아닌 실제 Dev, Production 환경 등 환경에 해당 룰을 올려야 실제 작동하는데요 지금부터 직접 해보도록 하겠습니다.
Dev환경에 배포하기
- 먼저 왼쪽 메뉴의 Publishing Flow로 이동합니다.
- 이제 여기 보이는 것이 바로 각 환경을 대변하는 영역입니다. Dev가 개발환경 Submitted부터가 스테이징, published가 실제 Production환경이라고 보면 됩니다. 오른쪽 상단의 [Add Library]를 클릭합니다.
- 그 뒤 화면에서 Name을 입력하고 Environment를 [Development]로 설정한 뒤 [Add All Changed Resource]를 클릭하고 [Save & Build to Development]를 클릭합니다.
여기서 Add All Changed Resource를 클릭하면 가운데 목록이 뜨는데 내가 작업한 룰을 모두 가져오는 버튼입니다. 따라서 정리하자면 내가 작업한 룰들을 배포할건데 [Development] 환경에 배포할 거라는 뜻이 됩니다. 간단하죠?
- 그럼 아래와 같이 Development영역에 First work가 생기고 로딩중인 것을 확인할 수 있습니다.
- 아래와 같이 준비가 완료되면 초록색 불이 들어옵니다.
- 이제 Dev환경에 배포가 완료되었으니 해당 환경을 적용해보겠습니다. 왼쪽의 [Environments]를 클릭한 뒤 Development환경의 Install영역 박스를 클릭합니다.
- 박스의 중간 영역의 script를 복사합니다. 해당 스크립트는 프로덕션과는 다른 스크립트입니다.
- 사이트로 이동해 어도비 디버거(Adobe Experience Platform Dibugger)를 실행한 뒤 [새로고침] 하고 [Experience Platform Tags > Configuration]으로 이동합니다. 그런 뒤 중간 script에 [Action > Replace]를 클릭합니다.
* Adobe Experience Platform Dibugger 다운받기
- 복사해뒀던 Dev script를 집어넣어 Replace 해줍니다.
- 그런 뒤 개발자 도구(F12)로 이동하여 [콘솔]을 확인해보면 Custom Rule이 정상적으로 출력되는것을 확인할 수 있습니다.
여기까지 만든 룰을 Dev환경에 적용하고 실제 정상적으로 동작하는지 확인하는 것 까지 진행해 봤습니다. 다음 글에서는 실제로 Production에 배포하는 방법에 대해 알아보도록 하겠습니다 🙂
