구글 애널리틱스

gtag(=global tag)를 이용한 샵바이 구글애널리틱스, 전자상거래 스크립트 적용 방법

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

본 문서에서는 구글 태그매니저 적용 방법에 대해서 기입하지 않습니다.

관련 문서

• 구글 애널리틱스 개발자 문서: https://developers.google.com/analytics/devguides/collection/ga4

• 샵바이 변수 조회 가이드: https://admin-remote.shopby.co.kr/popup/variable-guide

• 구글 애널리틱스 추천 이벤트: https://support.google.com/analytics/answer/9267735

구글 애널리틱스 스크립트 예시

상단 공통

상단 공통 스크립트는 샵바이 관리자페이지에서 아이디 값을 입력할 경우 자동으로 삽입 됩니다.

따라서, 샵바이 어드민에 아이디를 입력하여 저장한 경우에는 상단 공통 스크립트는 생략 하시면 됩니다.

<!-- 예시 코드 -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id={{GA4 ID}}"
></script>
<script>
  globalThis.dataLayer = globalThis.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "{{GA4 ID}}"); // GA4, Stream ID로 변경해주세요
</script>

상품 상세 페이지

<!-- 예시 코드 -->
<script>
  try {
    if (sb.product) {
      const {
        baseInfo: { productNo, productName },
        price: { salePrice, immediateDiscountAmt },
      } = sb.product;

      const gaViewItem = {
        item_id: String(productNo),
        item_name: productName,
        price: salePrice - immediateDiscountAmt,
        quantity: 1,
      };

      gtag('event', 'view_item', {
        currency: 'KRW',
        value: gaViewItem.price,
        items: [gaViewItem],
      });
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

회원가입 완료 페이지

<!-- 예시 코드 -->
<script>
  try {
    gtag("event", "sign_up", {
      currency: "KRW",
      value: 1,
    });
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

장바구니 페이지

<!-- 예시 코드 -->
<script>
  try {
    if (sb.cart?.deliveryGroups?.length > 0) {
      function getGAViewCartInfo() {
        const gaOrderProducts = sb.cart.deliveryGroups.flatMap(({ orderProducts }) =>
          orderProducts.map((product) => {
            const { productNo, productName, buyAmt, orderProductOptions } = product;
            const quantity = orderProductOptions.reduce((sum, { orderCnt }) => {
              sum += orderCnt;

              return sum;
            }, 0);

            return {
              item_id: productNo,
              item_name: productName,
              currency: 'KRW',
              price: buyAmt,
              quantity,
            };
          }),
        );

        const gaOrderPrice = gaOrderProducts.reduce((sum, cur) => {
          sum += cur.price;

          return sum;
        }, 0);

        return { gaOrderProducts, gaOrderPrice };
      }


      const { gaOrderPrice, gaOrderProducts } = getGAViewCartInfo();
      if(gaOrderProducts.length > 0){
      gtag('event', 'view_cart', {
        currency: 'KRW',
        value: gaOrderPrice,
        items: gaOrderProducts,
      });
      }
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>

주문 완료 페이지

<!-- 예시 코드 -->
<script>
  try {
    if (sb.order) {
      const {
        orderNo,
        payInfo: { payAmt },
        orderOptionsGroupByPartner,
      } = sb.order;

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

            return {
              item_id:String(item_id),
              item_name,
              currency: 'KRW',
              discount,
              price,
              quantity,
            };
          }),
        ),
      );

      gtag('event', 'purchase', {
        transaction_id: orderNo,
        value: payAmt,
        currency: 'KRW',
        items: gaOrderItems,
      });
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
</script>