Criteo OneTag가 올바르게 작동하려면 두 가지 구성 요소가 필요합니다. 하나는 로더 스크립트이고 다른 하나는 이벤트 및 데이터 컬렉션입니다. 아래에서 이러한 두 가지를 간단한 홈페이지 이벤트를 사용해 간략하게 설명합니다.

아래는 전체 홈페이지 태그이지만 다른 태그도 유사합니다.

<!-- Criteo Homepage Tag -->
<script
    type="text/javascript"
    src="//static.criteo.net/js/ld/ld.js"
    async="true"
></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
      { event: "setAccount", account: YOUR_PARTNER_ID},
      { event: "setEmail", email: "##Email Address##" },
      { event: "setSiteType", type: deviceType},
      { event: "viewHome" }
    );
</script>
<!-- END Criteo Homepage Tag -->

위의 예시에서,

 <script type="text/javascript" src="//static.criteo.net/js/ld/ld.js"async="true"></script>

는 로더이고 나머지는 이벤트 및 데이터 컬렉션입니다.

새로운 Dynamic Loader는 정적 로더와 거의 같지만 웹사이트의 다른 위치에 배치되어야 하고 파트너 ID 파라미터가 필요합니다. 다음은 새로운 Dynamic Loader 스크립트의 예입니다:

<!-- Criteo Loader File -->
<script
    type="text/javascript"
    src="//dynamic.criteo.com/js/ld/ld.js?a=YOUR_PARTNER_ID"
    async="true"
></script>
<!-- END Criteo Loader File -->

이 스크립트는 사이트의 <head> 부분에서 이벤트와 데이터 수집 스크립트 이전에 포함되어 모든 페이지에서 실행되어야 합니다.

기존 정적 로더 삭제

Dynamic Loader를 추가한 후, 태그에서 정적 로더를 삭제합니다.

정적 로더를 사용하는 홈페이지 태그의 예:

<!-- Criteo Homepage Tag -->
<script
    type="text/javascript"
    src="//static.criteo.net/js/ld/ld.js"
    async="true"
></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
      { event: "setAccount", account: YOUR_PARTNER_ID},
      { event: "setEmail", email: "##Email Address##" },
      { event: "setSiteType", type: deviceType},
      { event: "viewHome" }
    );
</script>
<!-- END Criteo Homepage Tag -->

Dynamic Loader를 사용하는 홈페이지 태그의 예:

<!-- Criteo Homepage Tag -->
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
      { event: "setAccount", account: YOUR_PARTNER_ID},
      { event: "setEmail", email: "##Email Address##" },
      { event: "setSiteType", type: deviceType},
      { event: "viewHome" }
    );
</script>
<!-- END Criteo Homepage Tag -->

사이트의 <body> 부분 태그에서 정적 로더 파일이 제거된 것을 볼 수 있습니다. 이제 새 Dynamic Loader 파일이 사이트의 <head>에 포함되어 모든 페이지에서 실행됩니다.

방문 태그 추가

먼저 <body>에서 정적 로드 파일을 제거한 후, <head>에 Dynamic Loader 파일을 추가합니다. 방문 태그를 사이트에 추가하여 크리테오 태그가 포함되지 않은 모든 페이지에서 실행되도록 해야 합니다.

다음은 추가해야 할 방문 태그입니다.

<!-- Criteo Visit Tag -->
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
      { event: "setAccount", account: YOUR_PARTNER_ID},
      { event: "setEmail", email: "##Email Address##" },
      { event: "setSiteType", type: deviceType},
      { event: "viewPage" }
    );
</script>
<!-- END Criteo Visit Tag -->

간단합니다! Dynamic Loader로 업데이트하기 위해 수행해야 하는 세 가지 단계를 요약하면 다음과 같습니다:

새로운 Dynamic Loader 스크립트를 웹사이트의 head 부분에 추가하여 모든 페이지에서 실행되도록 합니다.
태그에서 이전 로더의 스크립트를 제거하되 태그 정보와 구조는 동일하게 유지합니다.
태그가 포함되지 않은 모든 페이지에 방문 태그를 추가합니다.

Criteo OneTag를 위한 동적 로더로 전환하는 방법

목차

Criteo OneTag를 위한 Dynamic Loader(동적 로더)로 전환하는 방법