<head>
  <script>
    var OOPYctaClickHandler = () => {
      gtag('event', 'cta_test_real', {
        'app_name': 'oopy_homepage',
        'behavior': 'click_cta'
      });
      console.log('버튼 클릭시 이 코드가 동작합니다. Welcome!');
    };
		var OOPYctaQueryParams = new URLSearchParams(window.location.search);
  </script>
</head>

cleanUrl: "ko/guides/tips-and-tricks/cta-click-event"

들어가며

우피에서 제공하는 CTA(Call To Action) 버튼은 사람들이 가장 많이, 자주 사용하는 기능입니다. 이 때, 방문자들의 행동을 측정하기 위해서는 CTA 버튼을 클릭했을 때, GA 나 Pixel 등으로 이벤트를 발생하는 것이 필요합니다. 이 글에서는 우피에서 해당 부분을 어떻게 구현하는 지 설명합니다.

0. 준비물

필요한 도구는 크롬 브라우저입니다. 크롬 브라우저에서도 ‘개발자 도구’를 이용할 것입니다. 개발자 도구에 진입하는 방법은 다음의 글을 참조해주세요. (2. 개발자 모드 진입 까지만 보시면 됩니다)

신입 웹디자이너를 위한 크롬 개발자도구 활용법 Part 1

1. 필요한 이벤트 작성하기

해당 CTA 버튼을 클릭했을 때 필요한 이벤트를 작성해봅시다. 이 문서에서는 구글 애널리틱스와 페이스북 픽셀 이벤트를 살펴보겠습니다.

1.1. 구글 애널리틱스

https://app.oopy.io/plugins 에서 GA 플러그인을 설정한 경우를 가정하겠습니다. 플러그인을 이용하지 않고, 직접 설치 스크립트를 https://app.oopy.io/script 에 작성한 경우에도 별 차이는 없습니다.

우선 개발자 도구에서 해당 플러그인이 올바로 설치되었는지 확인해봅시다. 개발자 도구의 Console 에서 gtag 를 입력하고 엔터를 치면, 다음 화면과 같이 gtag 라는 이름의 f(function)이 존재하는 것을 알 수 있습니다.

gtag 가 유효하네요

gtag 가 유효하네요

만약 플러그인 설정이 제대로 되지 않았다면, 다음과 같은 오류가 발생합니다. 이 경우 우선 플러그인부터 설정해주세요.

gtag 가 없습니다. 우선 플러그인을 통해 GA 부터 설정해주세요.

gtag 가 없습니다. 우선 플러그인을 통해 GA 부터 설정해주세요.