SERIES
프로덕트 블로그 트래킹 사이트 제작기
제출 폼 3가지 추가
- 문제신고 폼, 블로그 추천 폼, 건의사항 폼 추가
- 구글 시트로 정보 전송
- Desktop, Tablet, Phone 사이즈에서는 GNB에서 접근 가능
- width 1500 이상의 큰 스크린 사이즈에서는 플로팅 폼으로 접근 가능
- 접었다 폈다 할 수 있음
- 모든 폼을 펴고 싶을 수 있기 때문에 height 90vh의 프레임을 만들고 overflow: scroll 적용
등록된 블로그 모아보는 페이지 추가 (CMS 작업은 수동)
- 블로그별 링크 따기
- 깃허브와 연결되어 아티클 수집하는 시트 뒤에 시트 추가
- 아티클 시트 정보 전체를 복사하여 블로거 이름을 기준으로 중복 제거
- 아티클 시트를 vlookup으로 탐색하여 블로거별로 아무 아티클 링크 따옴
- 수동으로 해당 링크의 게시물번호 path 제거
- 블로그별 최신 업로드일 따기
- 아티클 시트에 필터 추가하여 업로드일 내림차순 정렬
- 아티클 시트를 vlookup으로 탐색하여 처음으로 탐색된 업로드일 가져옴
- 버튼 디자인
- Framer 샵 페이지에서 컴포넌트 퍼옴
- Grid + Masonry 적용
- 폭 넘으면 2줄 되도록
트래킹 설정
페이지 이동 트래킹 설정
- GA4 연결
동작 수행 트래킹 설정
- 링크 이동 트래킹을 위해 아티클 제목에 Link To > Tracking ID 지정
정보 복사 트래킹
- 정보 복사 버튼은 코드로 만든 것이라 Framer 내 Link To > Tracking ID 연결이 불가능했음
- 처음엔 Gemini와 Claude의 도움을 받아 패널에서 수동으로 Variable 입력 가능하도록 하고자 했으나, 잘 안되었음 (제미나이는 addPropertyControls에 link 속성을 추가하면 Framer가 자동으로 Tracking 필드를 생성해준다고 생각하고 패널에서 볼 수 있게 명시화하는 절차를 생략했고, 클로드는 패널에 Tracking ID를 입력할 수 있도록 바꾸었으나 내가 입력한 ID가 Framer 통게 대시보드에 뜨지 않았음)
- 뭔가 데이터타입이 문자열로 잘못 지정되어 있는 것같아서 코드를 뜯어보니 ControlType이 String이었음. 혹시나 해서 프레이머 공식 문서(🔗)를 읽어보니, Tracking ID의 ControlType은 TrackingId이고 useTracking() 훅으로 track() 함수를 가져와야 한다는 것을 알게 되어 반영함
유입경로 트래킹 설정
- bitly로 배포채널별 링크를 따로 만들고, 내가 진입할 링크도 따로 만듦
Description 스키밍이 편하도록 키워드 강조
- Override 적용
플랫폼 아이콘 삽입
유튜브 영상 임베드
