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