소개
지난 번에는 서비스의 메인 기능을 개발했다면 이번에는 디테일한 부분을 추가하여 서비스의 완성도를 높이는 것이 목표였습니다.
또한 추가로 유저 데이터 수집을 위해 GTM 설치를 해보았습니다.
서비스 링크: https://wdpdevdev.bubbleapps.io/version-test
진행 방법
사용도구
1. 버블
2. GTM(구글태그매니저)
3. Chat GPT
학습내용
GTM 연동하기
서비스 출시 후 유저 데이터를 확보하기 위해 GTM을 설치하였습니다.
설치 방법은 매우 간단했습니다. 버블의 설정에서 SEO / metatags에 들어간 뒤 GTM에서 제공하는 스크립트를 각각 header와 body에 넣어주면 설치됩니다.
다만 해당 기능은 유 료 버전에서만 사용 가능합니다.
GTM 디버그 모드와 사이트의 개발자 도구 모두 GTM이 잘 설치된 것을 확인할 수 있었습니다.
저는 서비스 내에서 유저가 입력폼을 클릭할 때와 신청하기(submit) 버튼, 공유하기 버튼을 클릭하는 데이터를 보고 싶 었습니다.
따라서 GTM에 해당 영역들을 클릭할 때 트리거가 발생하게끔 연결을 하려고 했고, 이를 위해서는 각 영역별로 ID를 지정해주어야 했습니다.
ID를 지정하고 싶은 요소를 클릭한 뒤 Appearance의 가장 하단에 보면 ID Attrubute 입력란이 있고 여기에 ID를 지정해주면 됩니다.
이후 해당 ID를 활용하여 GTM에서 트리거를 생성해주면 됩니다.
저는 GA 대신 믹스패널이라는 PA툴에 연동을 해놨는데요, 데이터가 잘 수집되는 것을 확인할 수 있었습니다.
공유하기 기능
서비스 이용 시 가장 마지막 화면에 공유하기 기능을 추가하여 바이럴 루프를 만들고 싶었습니다.
신청완료 화면에 링크 공유 아이콘을 추가해줍니다.
아이콘에 워크플로우를 생성하겠습니다.
해당 기능은 자바스크립트로 구현해야 하므로 Run javascript를 선택해줍니다.
Script에 코드를 넣어줍니다. 참고로 해당 코드는 챗지피티에게 물어보았습니다.
아이콘을 클릭하면 사이트 링크가 복사되고 '링크가 복사되었습니다!'라는 메세지가 뜨고, 만약 실패 시 '복사 실패'라는 에러 메세지가 뜨게 했습니다.
테스트 결과 링크가 정상적으로 복사되었고 메세지도 잘 뜨는 것을 볼 수 있었습니다.
입력폼 에러메세지 구현
서비스 신청을 위한 입력폼 중 필수값 미입력 시 또는 형식이 잘못된 경우 유저에게 안내를 위해 에러메세지를 뜨게 했습니다.
기존에는 입력폼의 테두리 색만 빨간색으로 변경되었고 별도의 에러메세지는 뜨지 않았습니다. (버블에서 기본으로 제공하는 기능)
먼저 에러메세지 텍스트를 입력합니다. (참고로 저는 입력필드와 에러메세지 사이 의 gap을 조절하기 위해 두 요소를 그룹으로 묶어주었습니다)
에러메세지는 처음에는 뜨면 안되기 때문에 페이지 로드 시에는 보이지 않게 설정을 해놓았습니다. (해당 기능의 자세한 내용은 1주차 사례 게시글 참고)
이후 Conditional에서 조건을 추가해줍니다.
먼저 When에 입력필드(Dropdown)의 형식이 맞지 않을 때(isn't valid)를 조건으로 추가해줍니다.
이후 프로퍼티 중 This element is visible를 선택해주면 끝입니다.
이 방식으로 모든 입력필드에 에러메세지를 추가해주었습니다.
테스트 결과 에러메세지가 잘 표시되는 것을 확인할 수 있었습니다.
결과와 배운 점
버블은 GTM 설치와 요소 ID 추가가 간단하여 데이터 수집을 위한 세팅을 간편하게 할 수 있다.
