쇼피파이

공통

아래의 주소로 방문해 Shopify 계정으로 로그인합니다.

• https://accounts.shopify.com/lookup

테마 편집

온라인 스토어에서 테마를 선택합니다. 현재 테마에서 작업을 클릭한 뒤, 코드 편집을 클릭합니다.

코드 편집

코드 편집창이 뜨면 theme.liquid를 클릭하고 태그 밑으로 아래 코드를 입력합니다. accesskey를 'ACCESS_KEY' 부분에 입력하고 저장합니다.

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'ACCESS_KEY', platform: 'SHOPIFY' });
   {% if customer %}
   cloud.shoplive.setUserObject({userId: "{{ customer.id }}", userName: "{{ customer.first_name }}"});
   {% endif %}
</script>

페이지 편집

페이지 버튼을 클릭하여 라이브 페이지를 추가합니다. 페이지 추가 버튼을 클릭하고 제목을 입력한 뒤, 아래 코드를 입력한 뒤 저장합니다.

<div id="shoplive-overall"></div>
<script defer>
   document.addEventListener('DOMContentLoaded', function() {
   cloud.shoplive.setOverall('shoplive-overall');
});
</script>

메뉴 편집

탐색을 클릭하여 라이브 페이지를 노출할 메뉴를 선택한 뒤 카테고리를 편집합니다.

설정 완료

모든 설정이 완료되었다면 홈페이지 미리보기를 통해 미니 프리뷰가 노출되는지 확인합니다. 만약 미니 프리뷰가 노출되지 않는다면 방송 상세정보에서 진행중인 라이브 방송의 플러그인/API를 공개로 설정해주세요.

Conversion Pixel

Shopify에서 구매 신호 발생 스크립트 설치하기

1. 하단 설정 버튼을 클릭합니다.

2. 고객 이벤트 > 사용자 지정 픽셀 추가 버튼을 클릭합니다.

3. 제목을 입력한 후, 아래 코드를 입력하고 저장합니다.

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://static.shoplive.cloud/shoplive.js';
script.async = true;
document.head.appendChild(script);

script.onload = function () {
   if (typeof cloud !== 'undefined' && cloud.shoplive) {
       var customerId = null;
       
       cloud.shoplive.init({
           accessKey: '<YOUR_ACCESS_KEY>'
       });

       analytics.subscribe('checkout_completed', (event) => {
           try {
               console.log("Event received:", event);
               const checkout = event.data.checkout;
               console.log("Checkout data:", checkout);
               const orderId = checkout.order.id;
               console.log("Order ID:", orderId);

               if (customerId == null) {
                    customerId = checkout.order.customer.id
                    console.log("Customer ID:", customerId);
                    if (customerId !== null) {
                        cloud.shoplive.setUserObject({
                            userId: customerId
                        });
                    }
                    else console.log('customer id is null')
                }
             
               const purchasedItems = checkout.lineItems.map((item) => {
                   console.log("Processing item:", item);
                   return {
                       sku: item.variant.sku,
                       purchaseUnitPrice: parseFloat(item.variant.price.amount),
                       purchaseQuantity: item.quantity
                   };
               }
               );
               console.log("Purchased items:", purchasedItems)
               const conversionConfig = {
                   accessKey: '<YOUR_ACCESS_KEY>',
                   eventType: 'purchase',
                   products: purchasedItems,
                   orderId: orderId
               };
               cloud.shoplive.sendConversionEvent(conversionConfig);
           } catch (error) {
               console.error('send conversion failure:', error);
           }
       }
       );
   } else {
       console.error('cloud.shoplive does not exist');
   }
}
script.onerror = function () {
   console.error('script load failure');
}

4. 연결 버튼을 클릭합니다.