크리테오

크리테오 샵바이 스크립트 코드 예시 입니다.

예시 코드들은 스크립트 동작을 보장하지 않습니다.

광고주 코드 (p값)은 크리테오 혹은 대행사에 문의 주시기 바랍니다.

해당 문서에서는 고객 이메일 주소, 고객 아이디 등 개인 정보와 관련 된 부분은 제외 합니다.

주의사항

샵바이 베이직, 프로 버전의 경우 마케팅 앱을 사용하여 크리테오 스크립트 적용 바랍니다.
- https://apps.nhn-commerce.com/apps/311
네트워크앱을 통해 크리테오 스크립트(one tag)가 정상적으로 적용되지 않을 경우 하기 문서를 참조하여 외부스크립트 등에 적용해주시기 바랍니다.
샵바이 엔터프라이즈의 경우 크리테오 카탈로그(피드)에 대해서 담당자에게 발급 문의 요청 주시기 바랍니다.
샵바이 엔터프라이즈 또는 커스텀 상태에 따라 EP생성이 오류가 나는 경우 별도로 개발파트에 요청하여 수동 생성 요청 해주시길 바랍니다. 1:1 문의하기

크리테오 스크립트(코드) 예시

크리테오 로더 스크립트

<head></head>태그 등 모든 페이지에서 확인이 가능한 곳에 코드(스크립트)를 심습니다.
YOUR_PARTER_ID 부분은 크리테오 혹은 대행사로부터 받은 p값을 입력 합니다.

<script
  type="text/javascript"
  src="//dynamic.criteo.com/js/ld/ld.js?a=YOUR_PARTNER_ID"
  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: "", hash_method: "sha256" },
    { event: "setZipcode", zipcode: "" },
    { event: "setSiteType", type: deviceType },
    { event: "viewHome" }
  );
</script>

상세페이지

상품상세페이지에 하기와 같이 스크립트를 적용 합니다.
YOUR_PARTER_ID 부분은 크리테오 혹은 대행사로부터 받은 p값을 입력 합니다.

<script type="text/javascript">
  try {
    if (sb?.product) {
      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" }, // P값을 넣어주세요
        { event: "setEmail", email: "", hash_method: "sha256" },
        { event: "setZipcode", zipcode: "" },
        { event: "setSiteType", type: deviceType },
        { event: "viewItem", item: sb.product.baseInfo.productName }
      );
    }
  } catch (error) {
    console.error("Criteo Script has occurred: ", error);
  }
</script>

장바구니 페이지

장바구니페이지에 하기 스크립트를 적용 합니다.
- 해당 문서에서는 viewCart를 addToCart 이벤트로 대처 합니다.
YOUR_PARTER_ID 부분은 크리테오 혹은 대행사로부터 받은 p값을 입력 합니다.

<script type="text/javascript">
  try {
    const crItems = [];

    const {
      deliveryGroups = [],
      price: { buyAmt = 0 },
    } = sb.cart;

    if (deliveryGroups.length > 0) {
      deliveryGroups.map(({ orderProducts }) => {
        orderProducts.map((product) => {
          const { orderProductOptions } = product;

          orderProductOptions.map((option) => {
            const { productNo } = option;
            const price = option.price.salePrice
              ? option.price.salePrice
              : option.price.buyAmt;
            crItems.push({
              id: String(productNo),
              price: price,
              quantity: option["orderCnt"],
            });
          });
        });
      });

      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: "", hash_method: "sha256" },
        { event: "setZipcode", zipcode: "" },
        { event: "setSiteType", type: deviceType },
        {
          event: "addToCart",
          item: crItems,
        }
      );
    }
  } catch (error) {
    console.error("Criteo Script has occurred: ", error);
  }
</script>

주문완료페이지

YOUR_PARTER_ID 부분은 크리테오 혹은 대행사로부터 받은 p값을 입력 합니다.

<script type="text/javascript">
  try {
    if (sb.order) {
      const {
        orderNo,
        payInfo: { payAmt },
        orderOptionsGroupByPartner,
      } = sb.order;

      const criteoOrderItems = orderOptionsGroupByPartner.flatMap(
        ({ orderOptionsGroupByDelivery }) =>
          orderOptionsGroupByDelivery.flatMap(({ orderOptions }) =>
            orderOptions.map((options) => {
              const {
                productNo: id,
                price: { immediateDiscountAmt: discount, buyPrice: price },
                orderCnt: quantity,
              } = options;

              return {
                id: String(id),
                price,
                quantity,
              };
            })
          )
      );
      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: "", hash_method: "sha256" },
        { event: "setZipcode", zipcode: "" },
        { event: "setSiteType", type: deviceType },
        {
          event: "trackTransaction",
          id: orderNo,
          item: criteoOrderItems,
        }
      );
    }
  } catch (error) {
    console.error("Criteo Script has occurred: ", error);
  }
</script>

Previous모비온 Next샵바이 쇼핑몰 구축 포트폴리오

Last updated 3 months ago

Was this helpful?

주의사항

관련 문서

크리테오 스크립트(코드) 예시

크리테오 로더 스크립트

메인페이지 태그

상세페이지

장바구니 페이지

주문완료페이지