[marketing solution] 네이버 애널리틱스

marketing solution

현재 운영중인 서비스에 IFDO, GoogleTagManager, Criteo 3가지의 마케팅 솔루션을 사용하고 있다.
최근 naverAnalytics에 대한 추가 요청을 받게 되었다.

react 및 next 에 대한 마케팅 솔루션 관련 스크립트에 대한 문서를 흔하게 찾을 수 없고, 한번 정리해두면 좋을 것 같아 해당 글을 작성하게 되었다.

이 글에서는 네이버 마케팅 솔루션에 관한 내용만 다룰 예정이다.

공통 스크립트

네이버 애널리틱스 문서에 따르면

<script type="text/javascript" src="//wcs.naver.net/wcslog.js"/>
위 스크립트를 최상단에 import 후,

<script type="text/javascript"> 
	if (!wcs_add) var wcs_add={}; 
	wcs_add["wa"] = "accountId"; // 사이트 식별자 (=네이버공통키, na_account_id)
	if(window.wcs){
      wcs.inflow(`${siteDomain}`); // 광고 전환추적을 위한 cookie domain설정
      wcs_do(); // PageView 이벤트 전송
	}	
</script>
해당 스크립트를 실행해야 한다.

NaverTracker 이란 컴포넌트를 생성 후, 공통적으로 페이지가 전환될때마다, PageView 전환 이벤트를 전송해야하기에
useEffect 의 dependency에 router 변화를 감지할때마다 전환이벤트를 호출하도록 해주었다.
여기서 중요한 것은 위의 네이버 애널리틱스 문서에는 var 를 사용하고있는데, useEffect안에서의 var 사용을 하게되면
스코프가 함수내에서만 적용되기에 naverAnalytics의 스크립트에서 window.wcs_add 에 접근하면 undefined 를 반환하게 된다.

때문에 꼭 !!

❌ if (!wcs_add) var wcs_add={}; 가 아니라 !! ,

⭕ if (!window.wcs_add) window.wcs_add = {}; 로 window객체에 할당해주어야 정상적으로 작동한다.

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export const NaverTracker = () => {
  const router = useRouter();
  // router 변경 감지시 pageview 이벤트 전송
  useEffect(() => {
    if (!window.wcs_add) window.wcs_add = {};
    //  각 사이트별 식별자 설정
    window.wcs_add.wa = "accountId"; // 사이트 식별자 (=네이버공통키, na_account_id)
    if (window.wcs) {
      // 광고 전환추적을 위한 cookie domain설정
      wcs.inflow(`${siteDomain}`);
      wcs_do(); // PageView 이벤트 전송
    }
  }, [router.asPath]);
};

또한 필자는 개발환경에서는 마케팅 정보가 수집되지 않도록,
해당 스크립트 파일을 조건을 걸어 삽입하였다.

if(process.env.NEXT_PUBLIC_MODE !== 'production'){
  <script type="text/javascript" src="//wcs.naver.net/wcslog.js" async />
}

해당 공통 스크립트가 진입 및 페이지 전환시 전송되는 것을 확인할 수 있다.
페이로드의 wcs 객체 wa값에 accountId 가 들어가있다면 제대로 작동하는 것이다.

전환 스크립트

전환 이벤트는 현재 검수 요청하기 위해 찜 리스트 및 검색 시에만 하도록하였다.
네이버 애널리틱스를 예로 들자면,

운영 중인 서비스에서는 여러가지 마케팅 솔루션을 사용하기에 hooks 안에서 switch 문을 통해 각각의 타입을 지정하였다.
  
  export const useMarketingSolution = (marketingInitializeType) => {
    const insertMarketingSolutionTags = (solutionType, analysisData, analysisType, extraUserEmail) => {
      if (process.env.NEXT_PUBLIC_MODE === 'production') {
        switch (solutionType) {
          case MARKETING_SOLUTION_TYPE.CRITEO:
            criteoTag(userEmail, analysisData, analysisType);
            return;
          case MARKETING_SOLUTION_TYPE.IFDO:
            ifDoTag(userEmail, analysisData, analysisType);
            return;
          case MARKETING_SOLUTION_TYPE.HURDLERS:
            hurdlersTag(analysisData, analysisType);
            return;
          case MARKETING_SOLUTION_TYPE.NAVER:
            naverTag(analysisData, analysisType);
            return;

          default:
            console.error('정의되지 않은 solutionType');
        }
      }
    };
    return { insertMarketingSolutionTags };
  };

      
// 크리테오 
  const criteoTag = (...) => {...} 
// 이프두 
  const ifDoTag = (...) => {...} 
// 허들러스 
  const hurdlersTag = (...) => {...} 
// 네이버
  const naverTag = (naverData, analysisType) => {
    try {
      switch (analysisType) {
        case 'wish': {
          // 구매 완료
          const _conv = {}; // 전환이벤트 정보 담을 object 생성

          _conv.type = 'add_to_wishlist	'; // 찜하기

          _conv.items = naverData;

          wcs.trans(_conv); // 전환 이벤트 정보를 담은 object를 서버에 전송
          break;
        }
        case 'search': {
          // 구매 완료
          const _conv = {}; // 전환이벤트 정보 담을 object 생성

          _conv.type = 'search'; // 찜하기

          _conv.items = naverData;

          wcs.trans(_conv); // 전환 이벤트 정보를 담은 object를 서버에 전송
          break;
        }
        default:
          console.error(`정의되지 않은 analysisType : ${analysisType}`);
      }
    } catch (error) {
      console.error(error);
    }
  };
                                
                                
                                
                                
 - pages\mypage\wishes.jsx

const naverData = [];
                                
if (wishResponse.wishList.length > 0) {
        wishResponse.wishList.forEach((item) => {
          naverData.push({ id: productIdx, name: productName });
        });
}

insertMarketingSolutionTags(MARKETING_SOLUTION_TYPE.NAVER, naverData, 'wish');
                                
찜한 상품이 한개 이상이라면 상품의 idx와 상품의 name을 push후, 스크립트를 전송.

전환이벤트는 네이버 애널리틱스에서 제공하는 문서를 보면 다양한 전환스크립트가 있으니, 해당 문서를 참고하여 _convs.items 의 배열에 담아 스크립트를 전송하면 된다.