네이버 프리미엄 로그분석과 구글 애즈를 사용하여 홈페이지에서 버튼에 전환 스크립트를 설치하는 방법에 대해서 안내해 드리겠습니다.

내용이 길지 않고 크게 어렵지 않으니 차근차근 시도해보시기 바랍니다.

 

전환 스크립트를 실행하기 위해서는 공통 스크립트 설치가 필수입니다.

공통 스크립트 설치와 회원가입, 구매완료, 장바구니, 맞춤 전송폼에 전환 스크립트 설치하는 방법은 다음 링크를 참고해주세요.

- 스크립트를 설치하려는 홈페이지가 하드 코딩으로 제작되어 있는 맞춤디자인이라면 여기를 참고하세요.

- 스크립트를 설치하려는 홈페이지가 마우스 드래그만으로 반응형 홈페이지를 제작할 수 있는 디자인팜2.0이라면 여기를 참고하세요.

홈페이지가 어떻게 제작됐는지 모르시다면 관리자 디자인관리에서 확인 가능합니다.

 

                            

                           [맞춤디자인]                                                                                    [디자인팜2.0]

 

 

1. 네이버 프리미엄 로그분석

네이버의 전환스크립트는 일반적으로 다음과 같은 코드를 전달 받습니다.

<!-- 전환페이지 설정 -->

<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script> 

<script type="text/javascript"> 

var _nasa={};

_nasa["cnv"] = wcs.cnv("2","10"); // 전환유형, 전환가치 설정해야함. 설치매뉴얼 참고

</script>

 

여기서 중요한 것은 전환유형입니다. 위 예시코드에서 wcs.cnv("2","10")에서 2를 의미합니다.

버튼을 클릭했을 때 위 스크립트를 실행하기 위해서는 함수를 만드는 것이 관리하기 편합니다.

홈페이지 관리자화면 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성] "모든페이지 하단 소스 관리" 에 아래 스크립트를 추가합니다.

<!-- 전환페이지 설정 -->

<script type="text/javascript"> 

function log_script(type, url){

    var _nasa={};

    if(typeof (type) == 'undefined') type = 1;

    if(window.wcs) _nasa["cnv"] = wcs.cnv(type,"10"); // 전환유형, 전환가치 설정해야함. 하단 전환유형 가치 설정 확인 

    wcs_do(_nasa);

    

    if(typeof (url) != 'undefined') location.href = url;

    return false;

}

</script> 

 

 

log_script 함수를 홈페이지 하단에 추가했습니다. 이제 홈페이지 어느 곳에서나 log_script 함수를 사용할 수 있습니다.

만약 전환유형을 2로 전달하고 싶다면 해당 버튼이 있는 페이지를 수정하여 버튼에 onclick="log_script(2)" 를 사용하면 됩니다.

전환 스크립트를 실행한 다음 링크 이동을 하고 싶다면 onclick="log_script(2, 'url주소')" 를 사용하면 됩니다.

 

예시 1. 문의하기 버튼 클릭시 전환유형 4를 전달하고, 카카오톡 채널로 이동

a 태그

수정 전

<a href="https://pf.kakao.com/">문의하기</a>

수정 후

<a onclick="return log_script(4, 'https://pf.kakao.com/')" href="https://pf.kakao.com/">문의하기</a>

 

button 태그

수정 전

<button onclick="location.href='https://pf.kakao.com/'">문의하기</button>

수정 후

<button onclick="return log_script(4, 'https://pf.kakao.com/')">문의하기</button>

 

 

예시 2. 전화하기 버튼 클릭시 전환유형 5를 전달하고, 010-1234-5678로 전화 걸기

a 태그

수정 전

<a href="tel:010-1234-5678">전화하기</a>

수정 후

<a onclick="return log_script(5, 'tel:010-1234-5678')" href="tel:010-1234-5678">전화하기</a>

 

button 태그

수정 전

<button onclick="location.href='tel:010-1234-5678'">전화하기</button>

수정 후

<button onclick="return log_script(5, 'tel:010-1234-5678')">전화하기</button>

 

이것으로 원하는 버튼에 log_script 함수를 사용하여 전환 스크립트를 실행할 수 있습니다.

 

 

 

2. 구글 애즈

구글 애즈 전환스크립트는 네이버보다 복잡해 보이지만 원리는 동일합니다.

네이버는 log_script 함수를 저희가 직접 만들어서 사용했지만 구글 애즈는 log_script 함수와 유사한 gtag_report_conversion 함수를 제공해주고 있습니다.

 

네이버와 마찬가지로 공통 스크립트를 먼저 설치해야 합니다.

전달받은 공통 스크립트를 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]에 삽입합니다.

자세한 위치는 상단 네이버 공통 스크립트 설치 링크를 참고하시면 됩니다.

<!-- Google tag (gtag.js) -->

<script async src="https://www.googletagmanager.com/gtag/js?id=AW-123456789"></script>

<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-123456789'); </script>

AW-123456789 은 구글로부터 전달 받은 실제 값을 입력해야 합니다.

 

 

예시 1. 방문예약및문의 버튼 클릭시 전환 스크립트 실행하고, 카카오톡 채널로 이동

홈페이지 관리자화면 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성] "모든페이지 하단 소스 관리" 에 구글로부터 제공 받은 코드를 붙여 넣습니다.

<!-- Event snippet for 방문예약및문의 conversion page In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->

<script>

function gtag_report_conversion(url) {

    var callback = function() {

        if (typeof(url) != 'undefined') {

            window.location = url;

        }

    };

    gtag('event', 'conversion', {

        'send_to': 'AW-123456789/abcVCMDd6K0ZEJhO_i8B',

        'event_callback': callback

    });

    return false;

}

</script>

 

 

그리고 버튼이 있는 페이지에서 버튼에 onclick 속성을 추가합니다.

 

a 태그

수정 전

<a href="https://pf.kakao.com/">문의하기</a>

수정 후

<a onclick="return gtag_report_conversion('https://pf.kakao.com/');" href="https://pf.kakao.com/">문의하기</a>

 

button 태그

수정 전

<button onclick="location.href='https://pf.kakao.com/'">문의하기</button>

수정 후

<button onclick="return gtag_report_conversion('https://pf.kakao.com/')">문의하기</button>

 

 

예시 2. 전화하기 버튼 클릭시 전환 스크립트 실행하고, 010-1234-5678로 전화 걸기

홈페이지 관리자화면 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성] "모든페이지 하단 소스 관리" 에 구글로부터 제공 받은 코드를 붙여 넣습니다.

<!-- Event snippet for 전화하기 conversion page In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->

<script>

function gtag_report_conversion(url) {

    var callback = function() {

        if (typeof(url) != 'undefined') {

            window.location = url;

        }

    };

    gtag('event', 'conversion', {

        'send_to': 'AW-123456789/abcVCMDd6K0ZEJhO_i8B',

        'event_callback': callback

    });

    return false;

}

</script>

 

 

그리고 버튼이 있는 페이지에서 버튼에 onclick 속성을 추가합니다.

 

a 태그

수정 전

<a href="tel:010-1234-5678">전화하기</a>

수정 후

<a onclick="return gtag_report_conversion('tel:010-1234-5678');" href="tel:010-1234-5678">전화하기</a>

 

button 태그

수정 전

<button onclick="location.href='tel:010-1234-5678'">전화하기</button>

수정 후

<button onclick="return gtag_report_conversion('tel:010-1234-5678')">전화하기</button>

 

 

이것으로 네이버 프리미엄 로그 분석과 구글 애즈에서 버튼에 전환 스크립트를 설치하는 방법에 대해 안내드렸습니다.

감사합니다.