# Shopify 연동

## 연동 개요

Pushwoosh는 기업이 온라인 스토어를 생성, 관리 및 확장할 수 있게 해주는 선도적인 전자상거래 플랫폼인 Shopify와 원활하게 연동됩니다. 이 가이드는 Shopify 스토어에 Pushwoosh 앱을 설치 및 구성하고, 사용자 식별을 설정하며, 알림 및 자동화 도구를 사용하여 모바일과 웹에서 고객과 소통하는 방법을 안내합니다.
### 연동 유형

- **대상(Destination)**: Shopify는 고객 데이터를 Pushwoosh로 전송하며, 이 데이터는 타겟팅 및 메시징에 사용됩니다.

### 전제 조건

* [Pushwoosh 계정](https://www.pushwoosh.com/)
* Shopify 관리자 패널 접근 권한
* Pushwoosh [Device API Access Token](/ko/developer/api-reference/api-access-token/#device-api-token) 및 **Application Code**
* 고객 및 주문 데이터가 있는 Shopify 스토어

### 동기화되는 엔티티

* **고객**: Shopify 메타필드를 통해 Pushwoosh UserID를 할당하고 식별하는 데 사용됩니다.

<Aside>
##### Pushwoosh의 고객 동기화 접근 방식

기술적 제약으로 인해 Pushwoosh는 알림에 사용되는 통신 채널에 따라 여러 가지 고객 동기화 방법을 제공합니다:

* **이메일, 웹, SMS 및 WhatsApp**: 디바이스/사용자는 Pushwoosh 애플리케이션에 자동으로 등록됩니다.
* **모바일 및 데스크톱 앱**: 디바이스/사용자는 Pushwoosh 및 Shopify 관리자 패널을 통해 수동으로 동기화할 수 있습니다.
* **웹 플랫폼 (Chrome, Firefox, Safari)**: 디바이스/사용자는 Shopify 테마 확장 프로그램 자체에서 관리됩니다.

##### 어떻게 작동하나요?
동기화 프로세스는 다음과 같이 작동합니다:

1. 시스템은 현재 사용자 세션을 검색하여 이메일 또는 전화번호(추가 구성 없이 작동하는 식별자)를 얻으려고 시도합니다.
2. 성공하면 이메일 또는 전화번호가 Pushwoosh와 고객 데이터의 `pushwoosh_userid` 속성 모두에 대한 `userID` 식별자로 설정됩니다.
3. 이것이 불가능한 경우, 기본 Pushwoosh SDK `userID`가 Pushwoosh와 `pushwoosh_userid` 속성 모두에 대한 식별자로 할당됩니다.
4. 어떤 경우든 양쪽에 `userID`가 할당되어 일관된 동기화를 보장합니다.

</Aside>

* **고객 세그먼트**: 그룹 기반 타겟팅 및 메시징에 사용됩니다.
* **이벤트 및 트리거** (예: 주문 접수, 태그 적용): Shopify Flow에서 푸시 메시징을 자동화하는 데 사용됩니다.
* **스토어프론트**: 내장된 스크립트를 통해 웹 푸시 옵트인을 캡처하는 데 사용됩니다.

### 용어집 (엔티티 이름이 다른 경우 매핑)

| **Shopify**   <div style="width:150px"></div>               | **Pushwoosh**      <div style="width:150px"></div>                                         |
| -------------------------- | --------------------------------------------------------- |
| Customer                   | UserID           |

## 연동 작동 방식

Pushwoosh는 Shopify의 메시징 대상 역할을 합니다. 연동되면 Shopify는 고객 및 행동 데이터를 Pushwoosh로 전송하며, 이 데이터는 웹과 모바일에서 실시간 알림, 고객 세분화 및 개인화된 메시징을 지원합니다.

### 연동의 주요 구성 요소

1. **메타필드를 통한 고객 식별**
    각 Shopify 고객에게는 고유한 `UserID`가 할당되며, 이는 메타필드(`custom.pushwoosh_userid`)에 저장됩니다. 이 ID를 통해 Pushwoosh는 플랫폼 전반에서 사용자를 일관되게 인식하고 메시지를 보낼 수 있습니다.

2. **Shopify Flow를 통한 이벤트 기반 자동화**
    Pushwoosh는 다음과 같은 Shopify 이벤트를 기반으로 푸시 알림을 자동화할 수 있는 Flow 액션을 제공합니다:

   * 신규 주문 접수
   * 고객에게 태그 적용
   * 장바구니 포기

3. **세그먼트 기반 타겟팅**
    Shopify의 고객 세그먼트를 사용하여 첫 구매자 대상 프로모션이나 비활성 사용자 대상 재활성화 캠페인과 같은 그룹별 푸시 알림을 보낼 수 있습니다.

4. **수동 및 실시간 메시징**
    Shopify 고객 또는 세그먼트 보기에서 Pushwoosh 확장 프로그램을 사용하여 수동으로 알림을 트리거할 수 있습니다:

   * **고객별 알림**: 개인적인 후속 조치 또는 테스트용
   * **세그먼트별 알림**: 캠페인 기반 메시지용

### 스토어프론트 임베드를 통한 웹 푸시 알림
Shopify 테마에서 Pushwoosh 임베드를 활성화하면 웹사이트 방문자에게 브라우저 기반 푸시 알림에 옵트인하도록 유도할 수 있습니다. 모바일 앱이 필요 없습니다.

#### 데이터 흐름 개요

```
Shopify 고객 및 이벤트 데이터
         ↓
Pushwoosh API (앱을 통해)
         ↓
UserID → 세분화 → 트리거 또는 수동 알림
```
이 연동을 통해 시기적절하고 관련성 있는 메시지를 전달하여 사용자 유지율을 높이고, 전환율을 증대시키며, 고객 경험을 향상시킬 수 있습니다. 이 모든 것이 자동으로 또는 필요에 따라 가능합니다.

## 1부. 설치

### Shopify에 로그인

1. [Shopify 관리자](https://admin.shopify.com/)로 이동합니다.
2. 대시보드에서 스토어를 선택합니다.

<Aside>이 가이드는 이미 Pushwoosh 계정이 있다고 가정합니다. 계정이 없다면 [계정을 만드세요](https://www.pushwoosh.com/)</Aside>


### Pushwoosh 앱 설치

1. [Pushwoosh 앱 스토어 페이지](https://apps.shopify.com/pushwoosh-notifications)를 방문합니다.
2. **설치**를 클릭합니다.
![Pushwoosh 앱 설치](/integrations-shopify-integration-19.webp)
3. Shopify 대화 상자에서 설치를 확인합니다.
![설치 확인](/integrations-shopify-integration-1.webp)

### Pushwoosh 앱 연결

설치 후 Shopify 내의 Pushwoosh 앱으로 리디렉션됩니다.

1. **연결**을 클릭합니다.

![연결 버튼 클릭](/integrations-shopify-integration-22.webp)

2. **Pushwoosh 제어판 → 설정 → API 접근**에서 찾을 수 있는 **Application Code**와 [Device API Access Token](/ko/developer/api-reference/api-access-token/#device-api-token)을 입력합니다.

![Pushwoosh 앱 연결](/integrations-shopify-integration-2.webp)

연결되면 "Pushwoosh 앱이 연결되었습니다."라는 성공 메시지가 나타납니다.

![Pushwoosh 앱 연결됨](/integrations-shopify-integration-3.webp)

### 플랜 구독

1. **구독 업그레이드**를 클릭합니다.
2. 단일 사용량 기반 플랜이 표시됩니다.
3. 결제를 확인합니다.

![플랜 구독](/integrations-shopify-integration-4.webp)


<Aside>푸시 전송 및 세분화 기능을 사용하려면 결제가 필요합니다.</Aside>

## 2부. 설정: 메타필드를 통한 고객 User ID

식별된 사용자에게 모바일 푸시 알림을 전달하기 위해 Pushwoosh는 고객당 고유한 **User ID**를 사용합니다. Shopify는 이 값을 Shopify의 **고객 메타필드** 내에 저장합니다.

1. **설정 → 메타필드 및 메타오브젝트 → 고객**으로 이동합니다.

![정의 추가](/integrations-shopify-integration-6.webp)

2. **정의 추가**를 클릭하고 다음 값을 사용합니다:

| 필드 | 값 |
| ----------------------- | ------------------------ |
| 네임스페이스 및 키 | custom.pushwoosh_userid |
| 네임스페이스 | custom |
| 유형 | 한 줄 텍스트 |
| 유효성 검사 | 없음 |
| 고객 계정 접근 | 읽기 및 쓰기 |
| 스토어프론트 API 접근 | 활성화됨 |


![정의 추가](/integrations-shopify-integration-7.webp)
![정의 추가](/integrations-shopify-integration-9.webp)


<Aside type="caution" title="이것이 왜 중요한가요?">
이 메타필드는 알림 및 세분화를 위해 모바일/웹 디바이스 전반에서 지속적으로 사용되는 사용자 식별자입니다.
</Aside>


## 3부. Pushwoosh 확장 프로그램 사용

Pushwoosh에는 세그먼트 타겟팅, 자동화(Flow) 및 고객별 알림을 위한 Shopify 확장 프로그램이 포함되어 있습니다.

### 확장 프로그램 1. 고객별 알림 보내기

#### 사용 사례

특정 사용자에게 개인화된 메시지를 수동으로 보내거나 알림을 테스트합니다.

#### 단계

1. **고객 → 고객 선택**을 엽니다.
2. **추가 작업 → 고객별 알림**을 클릭합니다.
![고객별 알림](/integrations-shopify-integration-10.webp)
3. 메시징 플랫폼(예: 이메일)과 [콘텐츠 프리셋](/ko/product/content/push-presets/)을 선택합니다.
![양식 채우기](/integrations-shopify-integration-11.webp)
4. **보내기**를 클릭합니다.


<Aside type="tip">
구매 후 알림, 개인적인 감사 메시지 또는 재활성화 프롬프트에 이 기능을 사용하세요.
</Aside>

### 확장 프로그램 2. 세그먼트별 알림

#### 사용 사례

장바구니를 포기한 고객, 첫 구매자, 고액 구매자 등 특정 고객 그룹을 타겟팅합니다.

#### 단계

1. **고객 → 세그먼트**로 이동합니다.

2. 세그먼트 선택 → **세그먼트 사용**을 클릭합니다.

![세그먼트 사용](/integrations-shopify-integration-12.webp)

3. **세그먼트별 알림**을 선택합니다.
![세그먼트별 알림](/integrations-shopify-integration-13.webp)
4. 원하는 통신 채널과 메시지 프리셋을 선택합니다. **보내기**를 클릭합니다.
![메시지 양식 작성](/integrations-shopify-integration-14.webp)
<Aside type="tip">
세그먼트는 구매 내역, 위치, 활동 또는 태그를 기반으로 생성할 수 있습니다.
</Aside>


### 확장 프로그램 3. Shopify Flow의 Pushwoosh

#### 사용 사례

주문, 태그 또는 행동과 같은 트리거를 사용하여 고객 여정에서 메시징을 자동화합니다.

#### 단계

1. **Shopify Flow**에서 새 Flow를 생성합니다.
2. 작업 추가 → **Pushwoosh 알림**을 선택합니다.

![Pushwoosh flow 작업](/integrations-shopify-integration-15.webp)

3. 메시지 및 동적 필드를 구성합니다.

![메시지 및 동적 필드 구성](/integrations-shopify-integration-16.webp)


예를 들어:

* 주문 접수 후 메시지 보내기

* 장바구니를 포기했을 때 사용자에게 알림

* 30일 동안 비활성 상태인 후 재활성화 푸시 보내기

## 4부. 웹 푸시 활성화 (선택 사항이지만 권장)

스토어프론트에서 브라우저 기반 웹 푸시 알림을 지원하려면 다음을 수행하십시오:

1. **온라인 스토어 → 테마 → 사용자 지정**으로 이동합니다.
![테마 → 사용자 지정으로 이동](/integrations-shopify-integration-17.webp)
2. 왼쪽 메뉴에서 **앱 임베드**를 엽니다.
3. **Push Init Embed**를 ON으로 전환합니다.

![Push Init Embed를 ON으로 전환](/integrations-shopify-integration-18.webp)

<Aside type="note">
이제 스토어에서 사용자에게 스토어프론트에서 직접 웹 푸시에 옵트인하도록 유도할 수 있습니다.
</Aside>


## 사용 사례 요약

| 시나리오 | 사용된 도구 |
| ----- | ----- |
| 개인화된 후속 조치 | 고객별 알림 |
| 장바구니 포기 알림 | Shopify Flow + Pushwoosh 작업 |
| 세그먼트 기반 프로모션 | 세그먼트별 알림 |
| 가입 후 환영 메시지 | Flow + 메타필드 추적 |
| 푸시 옵트인 | 테마 임베드 + Push Init 토글 |