날조하지 않는 Shopify 소셜 프루프의 조건

이 기능을 만나면 탭을 닫는 게 맞다

소셜 프루프 앱을 찾아보면 같은 선택지를 계속 만납니다. 보통 데이터가 쌓이기 전에 시작하는 방법으로 소개됩니다. 알림 문구를 직접 적어 넣거나, 도구가 그럴듯한 구매 이벤트를 만들어 줍니다. 이름 하나, 도시 하나, 상품 하나, 시각 하나. 그리고 그것을 상품 페이지 구석에서 쇼퍼에게, 방금 누가 무엇을 산 것처럼 보여 줍니다.

쇼퍼는 그것을 마케팅 장식으로 읽지 않습니다. 내 스토어에 관한 사실로 읽고, 그것도 카드 번호를 넘길지 정하는 바로 그 순간에 읽습니다. 소비자 보호 당국은 없던 고객 활동과 아무도 하지 않은 추천을 기만적 광고로 봅니다. 미국 Federal Trade Commission 과 EU 소비자법 모두 최근 몇 년 사이 조작된 후기와 추천에 손을 댔습니다. 생성된 구매 토스트가 내 시장에서 실제로 문제가 되는지는 위젯 벤더가 아니라 변호사에게 물을 일입니다.

변호사가 필요 없는 부분은 이것입니다. 이벤트가 스토어가 아니라 목록에서 나오면 그 목록은 반복됩니다. 누군가 탭을 열어 둔 채 같은 이름 셋이 돌아가는 것을 보다가, 이 스토어가 카드 번호를 맡기라면서 사소한 것에는 거짓말할 뜻이 있다는 사실을 배웁니다. 지면 한 구석을 채우는 값으로는 너무 비쌉니다.

정직한 토스트가 말할 수 있는 것

BootSignal 소셜 프루프 토스트에는 문구 입력 칸도, 생성기도 없습니다. 내 사이트 말고는 이벤트를 가져올 곳이 없기 때문입니다. 이 위젯은 BootSignal 위젯들이 내 도메인에 이미 저장해 둔 활동(댓글, 이모지 반응, 별점, 투표)을 읽어 돌립니다. 문구는 일반적인 표현으로 남고 방문자 이름은 나오지 않습니다. "Someone just left a comment" 처럼 누군가 방금 댓글을 남겼다는 정도에 상대 시간이 붙습니다. 사흘보다 오래된 활동은 후보에서 빠지므로, 지난달의 한 차례 몰림을 오늘 오후로 재활용할 수는 없습니다.

설치하기 전에 일부러 받아들일 결과가 하나 있습니다. 최근 활동이 없는 스토어는 구석이 빈 채로 있습니다. 대체 문구도, 채움용 표시도, 운영에 새어 나오는 데모 모드도 없습니다.

설치를 막는 Shopify 요금제 둘

설치 자체를 위해 올릴 요금제는 없습니다. Shopify 는 코드 편집기와 테마 편집기, 사용자 지정 Liquid 섹션, App embed 블록에 어떤 요금제 조건도 붙이지 않고 문서로 설명하고, Basic 요금제 페이지는 내장 테마 편집기로 손보는 온라인 스토어를 이야기합니다. 두 요금제는 더 근본적인 이유로 빠집니다. Lite 에는 온라인 스토어 판매 채널이 포함되지 않아 위젯을 올릴 지면이 없습니다. Starter 는 쓸 수 있는 테마를 Spotlight 하나로 제한하고 다른 테마와 사용자 지정 옵션은 제공되지 않는다고 적으면서 코드 편집기에 닿을 수 있는지는 말하지 않으니, 확인 안 됨으로 둡니다(신규 스토어에는 닫혀 있기도 합니다).

위젯 셋이 각각 들어가는 자리

로더도 사이트 전체, 토스트도 사이트 전체라서 둘은 레이아웃 파일에 들어갑니다. 나머지 둘은 페이지에 매인 것이라 섹션으로 갑니다. 이 구분을 처음에 맞춰 두면 나중에 반나절을 아낍니다.

1. 스토어가 응답하는 주소가 둘이니 등록 항목도 둘이다

   BootSignal 대시보드를 열어 스토어 도메인을 추가하고, .myshopify.com 도메인도 함께 추가합니다. 위젯은 location.hostname 을 그 site id 로 등록된 도메인들과 맞춰 보는데, Shopify 스토어는 양쪽으로 응답합니다. 등록하면 site id 가 돌아오고, Shopify 로 들고 갈 값은 그것뿐입니다.

2. 코드 편집에 들어가기 전에 테마 사본을 만든다

   Shopify 관리자에서 온라인 스토어(Online Store)를 열고 테마 옆 "..." 메뉴에서 코드 편집(Edit code)을 고릅니다. 모바일에서는 메뉴 아이콘 > Sales channels(판매 채널) > 온라인 스토어 > Manage themes(테마 목록) > 가로 메뉴 아이콘 > 코드 편집입니다. 아무것도 손대기 전에 테마를 복제하세요. 테마 업데이트가 코드 수정분을 지울 수 있습니다.

3. 로더와 토스트는 레이아웃 파일에 함께 들어간다

   파일 목록에서 레이아웃(Layout)을 펼쳐 theme.liquid 를 엽니다. 두 줄을 닫는 </body> 태그 바로 앞에 두고 저장(Save)합니다. 여기서는 전역 레이아웃이 제자리입니다. 토스트는 상품 페이지와 컬렉션 페이지, 장바구니에서 떠야 하고, 로더 하나가 나중에 더할 위젯까지 전부 띄웁니다. defer 는 그대로 두세요. Shopify 의 Theme Check 는 파서를 막는 스크립트를 스토어가 느려지는 원인으로 지적합니다.

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ko" defer></script>
   <div data-bootsignal="social-proof-toast"></div>

   복사

4. 리뷰월은 후기가 있어야 할 자리에 넣는다

   이것은 지면 콘텐츠 한 덩어리라서 섹션으로 갑니다. 코드 편집기가 필요 없는 경로는 이렇습니다. 온라인 스토어 > 테마 편집(Edit theme)에서 위쪽 가운데 드롭다운으로 템플릿을 바꾸고, 섹션 추가(Add section) > 사용자 지정 Liquid 를 고른 다음 붙여넣습니다. 리뷰월은 기본값으로 별 넷 이상 후기만 보여 주고 카드는 아홉 개까지 깔며, 둘 다 속성으로 바꿀 수 있습니다.

   <div data-bootsignal="testimonials" data-min-stars="4" data-max="9"></div>

   복사

5. 라이브 방문자 배지는 방문자가 있는 페이지에 둔다

   배지는 페이지 단위라서 페이지를 구분하는 data-thread-id 를 받습니다. 상품 메인 섹션 안에서, 또는 그 섹션에 놓은 사용자 지정 Liquid 블록에서 상품 핸들에 연결하세요. thread id 에는 콜론과 슬래시가 들어갈 수 없는데, 핸들에는 원래 그런 문자가 없습니다.

   <div data-bootsignal="live-visitors" data-thread-id="{{ product.handle }}"></div>

   복사

사용자 지정 Liquid 경로에 붙여넣기 전에 알아 둘 것이 셋입니다. 내용은 50kb 를 넘을 수 없는데, 위젯 스니펫은 그 근처에도 가지 않습니다. 닫히지 않은 HTML 태그는 저장할 때 대신 닫히므로 허술한 붙여넣기는 조용히 구조가 바뀔 수 있고, 그래서 스니펫은 온전하게 넣어야 합니다. 그리고 {% javascript %} 나 {% stylesheet %} 태그를 쓸 수 없어서, 들어갈 수 있는 것은 평범한 HTML 에 <script src> 하나뿐입니다. 사용자 지정 Liquid 는 Shopify Theme Store 요구사항이지 플랫폼의 보장이 아닙니다. 직접 만든 테마나 오래된 테마에는 그냥 없을 수 있고, 그러면 아래 이야기는 전부 코드 편집기에서 일어납니다.

위젯마다 주장할 수 있는 것과 없는 것

스토어가 진짜로 조용할 때

가짜 생성기가 팔리는 상황이 바로 이것이고, 실제로 있는 상황입니다. 지난주에 문을 연 스토어에는 다시 보여 줄 것이 없습니다. 답은 활동을 만들어 내는 것이 아니라, 첫날부터 정직하게 쓸 만한 것이 나오는 위젯을 돌리면서 나머지 둘이 필요한 재료를 모으기 시작하는 것입니다.

1. 상품 페이지에 별점을 먼저 답니다. 이것이 수집기입니다. 리뷰월과 토스트가 둘 다 여기 저장된 것을 읽으니, 이것이 살아나기 전에는 아무것도 차지 않습니다.
2. 이미 산 사람들에게 상품 페이지 링크를 보내 별점을 부탁합니다. 이미 응대한 구매자가 가장 빠른 정당한 후기 출처이고, 가짜 생성기는 바로 이 단계를 건너뛰려고 존재합니다.
3. 동시 접속이 그럴듯한 자리에 라이브 방문자 배지를 씁니다. 출시일, 세일, 지금 광고를 돌리는 상품 같은 자리입니다. 이 배지는 지금 이 순간에 관한 사실을 말하므로 쌓인 이력이 없어도 참입니다.
4. 조용한 페이지에서는 배지를 뗍니다. 한 명이라고 적힌 배지는 정확하지만 도움이 되지 않고, 어디에 걸지 고르는 일에는 부정직한 구석이 없습니다.
5. 후기가 생기면 리뷰월을 더하고, 토스트는 계속 켜 둡니다. 스토어가 조용한 동안에는 비어 있고, 활동이 들어오면 알아서 뜨기 시작합니다.

활동이 실제로 일어나는 곳이 블로그라면, Shopify 댓글 위젯 안내가 글 섹션 설치를 다룹니다. 글에 달린 댓글 하나하나가 상품 페이지의 토스트가 다시 보여 줄 수 있는 재료가 됩니다.

세일에 트래픽이 네 배가 될 때 드는 값

구독 하나로 끝납니다. 등록 도메인 하나에 월 $20 또는 연 $200, 카탈로그의 모든 위젯이 포함이고 값의 어느 항목도 트래픽이나 페이지뷰, 노출에 걸려 있지 않습니다. 소개용 사이트보다 Shopify 에서 이 차이가 더 큽니다. 스토어 트래픽은 설계상 계절을 타기 때문입니다. 세일 주간에 세션이 네 배가 된 스토어도 그 전주와 같은 값을 내고, 한 달 내내 토스트가 비어 있던 스토어도 같은 값을 냅니다.

카탈로그는 유료 위젯 31개와 무료 브라우저 도구 31개이고, 구독한 뒤에 나오는 위젯도 포함입니다. 그래서 이 지면의 두 번째, 세 번째 마운트 요소에는 값이 더 붙지 않습니다. 도메인을 더 쓰려면 대시보드에서 따로 사고, 스토어를 여러 개 돌린다면 그 경우입니다. 숫자 전체는 요금 지면에 있고, 다른 도구와 값을 나란히 놓고 본 글은 비교 지면에 있습니다.

알아채지 못할 고장

정직한 소셜 프루프 설치에는 약점이 하나 있고, 이름을 붙여 둘 값이 있습니다. Shopify 는 테마 코드에 넣은 수정이 테마 업데이트와 호환되지 않으면 업데이트된 사본에서 그 수정분이 전부 제거된다고 분명히 적어 두었습니다. 내 로더와 마운트 요소도 코드 수정입니다. 댓글창에 이런 일이 생기면 지면 한 덩이가 사라지니 바로 압니다. 진짜 활동이 있을 때만 뜨는 토스트에 생기면, 평범하게 조용한 한 주와 똑같이 보입니다.

그래서 확인은 눈이 아니라 절차여야 합니다. 테마를 업데이트했거나 바꿨거나 새로 샀다면 이렇게 합니다.

1. 스토어 페이지 아무 곳이나 열어 페이지 소스에서 bootsignal.js 를 찾습니다. 없으면 로더가 업데이트와 함께 사라진 것이고, 위젯 전체가 조용한 게 아니라 꺼진 것입니다.
2. 라이브 방문자 배지가 있는 상품 페이지를 평범한 브라우저 탭에서 엽니다. 배지는 위젯이 돌고 있으면 언제나 그려지므로, 다른 활동이 없는 스토어에서 가장 빠른 생존 확인입니다.
3. 없어진 쪽을 그 자리에 다시 붙입니다. 로더와 토스트는 theme.liquid, 페이지마다 다른 마운트는 각자의 섹션입니다.
4. 데이터는 걱정하지 않아도 됩니다. 댓글과 별점, 후기는 site id 와 thread id 로 BootSignal 쪽에 있으니, 다시 붙여넣으면 같은 이력이 그대로 돌아옵니다.

테마 수정 사항을 적어 두는 곳에 이 네 줄을 옮겨 두세요. 테마 업데이트가 깨뜨리는 다른 것들 옆에 두면 됩니다. 그다음엔 리뷰월이 보여 주는 후기를 읽으러 가면 됩니다. 보여 줄 활동이 실제로 있는 스토어에는 고객이 뭔가 말해 주고 있고, 그중에 제일 재미없는 부분이 위젯입니다.