들어가며
우피에서 제공하는 CTA(Call To Action) 버튼은 사람들이 가장 많이, 자주 사용하는 기능입니다. 이 때, CTA 가 있는 페이지 링크에 utm params 등이 있다면, CTA 에 이를 넘겨주는 작업이 필요할 수 있습니다. 이후의 페이지에서도 계속 추적을 이어가기 위해서요. 이를 어떻게 하는지 알아보겠습니다.
이번 글의 대부분은 코드 관련 내용입니다. 모두 동작을 보장하는 코드입니다만, 코드 레벨의 안내를 문의에 대한 답변으로 드리지는 않고 있다는 점 참고해주세요~!
코드
CTA 버튼 클릭시 이벤트 보내기 에서와 마찬가지로, 우피에서 내부적으로 선언한 변수를 이용합니다. 더 사용자 친화적으로 개발을 할 필요가 있습니다만, 당장의 동작을 위해서는 아래와 같이 해주세요 <head>
<script>
var OOPYctaQueryParams = new URLSearchParams(window.location.search)
// 필요하다면 OOPYctaQueryParams 에 원하는 params 를 추가하거나 삭제할 수도 있습니다.
</script>
</head>
HTML
복사
CTA 버튼이 있는 노션 페이지의 최상단에 위와 같이 코드 블럭을 작성해주세요.
페이지별 HTML 코드 블럭은 페이지당 하나만 존재할 수 있습니다. (페이지 최상단) Oopy HTML 코드 블럭 과는 달라요! 만약 기존에 이미 코드블럭이 있었다면 head 에 추가해주시면 됩니다. 아래와 같은 식으로요.
Oopy HTML 코드 블럭 과는 달라요! 만약 기존에 이미 코드블럭이 있었다면 head 에 추가해주시면 됩니다. 아래와 같은 식으로요. <head>
... 기존 코드들
<script>
var OOPYctaQueryParams = new URLSearchParams(window.location.search)
// 필요하다면 OOPYctaQueryParams 에 원하는 params 를 추가하거나 삭제할 수도 있습니다.
</script>
</head>
<body>
...기존 코드들
</body>
HTML
복사
동작 확인하기
해당 변경이 우피 페이지에 반영되기까지 기다리시거나, 혹은 어드민에서 새로고침을 요청해주세요. 이제 여러분이 작성한 페이지에 접속(test 하는 query param 을 추가하셔야겠죠?)해서 CTA 버튼을 클릭해보세요.
연결된 링크에 query param 이 붙어 있다면 성공입니다.
OOPYctaQueryParams 에 선언된 param 이 실제 CTA 버튼의 url 에 있는 query param 보다 우선순위를 갖게 됩니다(key 가 중복되는 경우에요).
이 페이지의 CTA 링크에는 원래 query param 이 없지만, 위 기능을 이용해서 ?oopy=good 이라는 query param 을 추가했습니다. 아래 링크를 클릭해보세요!