Vendo 통합으로 Shopify 스토어를 OneSignal에 연결하는 설정 과정을 안내합니다. 테마 코드 수정 없이 웹 푸시 알림을 배포하고 고객 태그, 서버 사이드 커머스 이벤트, 장바구니 이탈 등 행동 타겟팅 캠페인을 구축하세요.
OneSignal은 Vendo와 파트너십을 맺어 원활한 Shopify 통합을 만들었습니다. Vendo는 클릭 한 번으로 Shopify 스토어에 OneSignal SDK를 배포합니다 — 테마 코드를 수동으로 편집할 필요가 없습니다. 고객 태그, 클라이언트 사이드 탐색 이벤트, 서버 사이드 커머스 이벤트를 OneSignal에 동기화하여 실제 행동과 구매 이력을 기반으로 세그먼트를 만들고 푸시 캠페인을 트리거할 수 있습니다.Vendo 문서는 Vendo OneSignal Destination을 참조하세요.
반드시 Custom Code를 선택해야 합니다. Typical Site 옵션은 서비스 워커 경로 설정을 노출하지 않으므로 SDK가 스토어 루트에서 /OneSignalSDKWorker.js를 로드하려고 시도합니다 — Shopify는 이를 차단하고 푸시 구독이 조용히 실패합니다. 이미 Typical Site로 앱을 만들었다면 Settings > Platforms > Web에서 Custom Code로 전환하거나 앱을 삭제하고 다시 만드세요.
2
웹 푸시 설정 구성
OneSignal 앱에서 Settings > Push & In-App > Web Settings으로 이동하거나 웹 푸시 설정 가이드를 따릅니다.사이트 설정
Site Name: 스토어 이름으로, 기본 알림 제목으로 사용됩니다.
Site URL: Shopify 스토어의 공개적으로 액세스 가능한 URL(예: https://yourstore.com).
고객이 https://your-site.com/과 같은 커스텀 도메인을 통해 사이트에 액세스하는 경우 https://your-site.myshopify.com/을 사용하지 마세요.
Default Icon URL: 알림 및 프롬프트에 표시되는 정사각형 256×256 PNG, JPG 또는 애니메이션이 아닌 GIF를 업로드합니다. 설정하지 않으면 기본 아이콘으로 벨이 사용됩니다. 알림 아이콘을 참조하세요.
3
서비스 워커 경로 구성
Shopify는 사이트 루트에서 파일을 제공할 수 없으므로 Vendo가 서비스 워커 파일을 제공하는 위치를 OneSignal에 알려야 합니다.OneSignal에서 Settings > Push & In-App > Web Settings으로 이동하고 Advanced Push Settings까지 스크롤하여 Customize service worker paths and filenames를 켠 다음 다음과 같이 구성합니다:
설정
값
Path to service worker files
/apps/vendo/
Main service worker filename
OneSignalSDKWorker.js
Updater service worker filename
OneSignalSDKWorker.js
Service worker registration scope
/apps/vendo/
Vendo를 사용하는 Shopify 스토어의 서비스 워커 구성.
Vendo는 https://yourstore.myshopify.com/apps/vendo/OneSignalSDKWorker.js에 필요한 OneSignalSDKWorker.js 파일을 자동으로 제공합니다 — 수동 파일 업로드가 필요하지 않습니다.
Vendo 앱의 OneSignal > Push Settings 페이지에는 클릭하여 복사할 수 있는 이 정확한 값들이 표시되므로 다시 입력할 필요가 없습니다.Updater Filename과 Main Service Worker Filename은 동일한 파일입니다. OneSignal v16+는 두 가지 목적 모두에 단일 서비스 워커를 사용합니다.
4
자격 증명 복사
OneSignal에서 Settings > Keys & IDs로 이동하여 App ID와 REST API Key를 복사합니다. Vendo에 입력할 것입니다.
이전 섹션의 OneSignal App ID와 REST API Key를 입력한 다음 Save를 클릭합니다.
4
Vendo 테마 블록 활성화
Vendo 테마 블록은 스토어프론트에 OneSignal SDK를 로드합니다. 이것 없이는 푸시 프롬프트가 나타나지 않고 클라이언트 사이드 추적이 작동하지 않습니다.
Shopify 관리자에서 Online Store > Themes > Customize로 이동합니다.
App embeds(왼쪽 사이드바의 퍼즐 조각 아이콘)를 클릭합니다.
Vendo를 켭니다.
Save를 클릭합니다.
테마 블록은 SDK 초기화, 서비스 워커 등록, 푸시 프롬프트 표시, 사용자 식별(푸시 구독, 로그인, 뉴스레터 가입) 및 식별된 사용자에 대한 태그 동기화를 처리합니다.
5
동기화할 이벤트 선택
Vendo 앱의 OneSignal > Events에서 OneSignal에 보내려는 클라이언트 사이드 및 서버 사이드 이벤트를 활성화합니다. 전체 이벤트 목록은 아래 추적을 참조하세요.
6
푸시 프롬프트 구성
각 프롬프트가 스토어프론트에 표시되는지 여부와 시기는 OneSignal 대시보드가 아니라 Vendo 앱에서 제어됩니다. Vendo 앱에서 OneSignal > Push Settings를 엽니다. 각각 자체 토글이 있는 네 개의 섹션이 표시됩니다:
섹션
기능
Subscription Bell
방문자가 언제든지 클릭하여 구독할 수 있는 플로팅 벨 아이콘
Push Slide Prompt
푸시 권한을 요청하는 브랜드화된 슬라이드인 배너
Native Browser Prompt
브라우저의 기본 제공 권한 대화 상자를 직접 트리거
Welcome Notification
방문자가 구독할 때 자동으로 전송되는 푸시 알림
Push Slide 및 Native 프롬프트의 경우 트리거도 설정합니다 — 프롬프트가 실행되기 전에 기다릴 페이지 조회 수와 시간(초)입니다. 합리적인 기본값이 미리 입력되어 있습니다.네 개의 프롬프트는 모두 기본적으로 꺼져 있습니다 — 원하는 것만 활성화하세요. 페이지 하단에서 한 번 저장하면 테마 재배포 없이 다음 스토어프론트 로드 시 변경 사항이 적용됩니다.
프롬프트 버튼 문구, 액션 메시지 텍스트, 아이콘, A/B 테스트 및 현지화와 같은 고급 옵션은 OneSignal 대시보드에서 구성됩니다. Vendo의 Push Settings에서 Open OneSignal Dashboard를 클릭하면 Permission Prompt Setup 페이지로 바로 이동합니다. 프롬프트가 OneSignal 대시보드에 구성되어 있어도 Vendo 토글이 꺼져 있으면 렌더링되지 않습니다 — 표시 여부에 대해서는 Vendo의 토글이 기준입니다.
7
히스토리 데이터 동기화(선택 사항)
Vendo는 기존 고객과 최근 주문 내역을 OneSignal에 역채울 수 있습니다. 자격 증명을 저장한 후 백그라운드에서 자동으로 실행됩니다.
모바일 앱이나 서드파티 연결이 있는 경우, 사용자 프로필이 플랫폼 전반에 걸쳐 일관되게 유지되도록 다른 도구와 일치하는 식별자(Shopify Customer ID 대 Email)를 선택하세요. Vendo 앱의 Settings > Customer Identifier에서 구성합니다.
푸시 구독자(OneSignal ID로 식별)가 나중에 로그인하거나 구매를 완료하면 Vendo는 해당 Shopify Customer ID 또는 이메일로 OneSignal.login()을 호출합니다. OneSignal은 푸시 구독을 식별된 사용자에 연결합니다 — 중복 사용자가 생성되지 않습니다. 모든 과거 푸시 구독이 보존되고, 서버 사이드 이벤트(주문, 이행)가 올바른 사용자 프로필에 도달합니다.
브라우저에서 https://yourstore.myshopify.com/apps/vendo/OneSignalSDKWorker.js를 방문합니다. JavaScript 코드가 보여야 합니다. 404가 표시되면 Vendo 앱이 설치되어 있고 테마 블록이 활성화되어 있는지 확인하세요.브라우저 DevTools(F12)를 열고 Application > Service Workers로 이동하여 OneSignalSDKWorker.js가 범위 /apps/vendo/로 등록되어 있는지 확인할 수도 있습니다.
서비스 워커는 /apps/vendo/OneSignalSDKWorker.js에 있어야 합니다. 루트 경로(/OneSignalSDKWorker.js)에서 404 오류가 표시되면 OneSignal에 서비스 워커 경로가 구성되지 않은 것입니다 — 서비스 워커 구성 단계를 따르세요. /apps/vendo/ 경로에서 404가 발생하면 Vendo 앱이 설치되어 있고 테마 블록이 활성화되어 있는지 확인하세요.
Vendo는 Custom Code 통합 유형이 필요합니다. Typical Site는 서비스 워커 경로 설정을 노출하지 않으므로 SDK가 스토어 루트에서 /OneSignalSDKWorker.js를 로드하려고 시도합니다 — Shopify는 이를 차단하고 푸시 구독이 조용히 실패합니다.해결 방법: OneSignal 대시보드에서 Settings > Platforms > Web에서 앱의 통합 유형을 Custom Code로 전환하거나, 앱을 삭제하고 처음부터 Custom Code를 사용하여 다시 만드세요.
Vendo 앱의 OneSignal > Push Settings에서 프롬프트 토글(Subscription Bell, Push Slide Prompt 또는 Native Browser Prompt) 중 하나 이상이 켜져 있는지 확인하세요 — 네 개 모두 기본적으로 꺼져 있습니다.
트리거 지연을 확인하세요 — 여러 페이지 조회로 설정된 Push Slide는 첫 페이지 로드 시 실행되지 않습니다.
Vendo 앱의 OneSignal > Events에서 이벤트가 활성화되어 있는지 확인하세요. 클라이언트 사이드 이벤트는 Shopify Web Pixel이 활성화되어 있고 사용자가 식별되어 있어야 합니다. 서버 사이드 이벤트는 REST API Key가 구성되어 있어야 합니다.
식별되지 않은 방문자의 이벤트는 OneSignal로 전송되지 않습니다. 방문자가 자신을 식별하면(푸시 구독, 로그인, 뉴스레터 가입 또는 결제 완료), Vendo가 이벤트를 보내기 시작합니다. 이 식별된 사용자 전용 접근 방식은 중복 사용자를 방지하고 깔끔한 데이터를 보장합니다.
