Liquid 템플릿 사용하기

Liquid 템플릿은 일반적인 동적 콘텐츠 사용 외에도 정교한 로직을 구현하여 Pushwoosh의 개인화 기능을 크게 확장합니다.

Pushwoosh의 메시지 개인화는 Tags(사용자 데이터)를 기반으로 합니다. Pushwoosh는 다양한 기본 Tags와 사용자 지정 Tags를 제공합니다. 이를 사용하여 사용자의 이름, 도시, 구매 내역 등을 지정하여 더 개인화된 메시지를 보낼 수 있습니다. 예를 들어, 안녕하세요 {First_name}님, {item}을(를) 주문해 주셔서 감사합니다.

Liquid 템플릿은 동적 콘텐츠에 더 많은 로직을 추가합니다. 예를 들어, 사용자의 구독 태그에 “free”가 포함된 경우 “10% 할인을 받으세요.”라는 메시지를 보낼 수 있습니다.

사용자의 ID, 행동 및 선호도에 따라 메시지 콘텐츠를 수정하는 것은 관련성을 높이고 마케팅 캠페인에서 더 인상적인 결과를 얻는 가장 효율적인 방법입니다.

구문

Shopify의 Liquid를 기반으로 하는 콘텐츠 템플릿은 tags, objects, filters의 조합을 사용하여 동적 콘텐츠를 로드합니다. 콘텐츠 템플릿을 사용하면 템플릿 내에서 특정 변수에 액세스하고 데이터 자체에 대해 아무것도 알 필요 없이 해당 데이터를 출력할 수 있습니다.

참고

구문에 대한 자세한 내용은 Liquid 문서를 참조하세요.

Objects

objects는 사용자에게 표시될 콘텐츠를 정의합니다. objects는 이중 중괄호 {{ }}로 묶어야 합니다.

예를 들어, 메시지를 개인화할 때 본문에 {{Name}}을 보내 메시지 콘텐츠에 사용자 이름을 추가합니다. 사용자의 이름(Name 태그 값)은 사용자가 보게 될 메시지에서 Liquid 객체를 대체합니다.

입력

Hi {{Name}}! We're glad you're back!

출력

Anna님, 다시 오신 것을 환영합니다!

Tags

tags는 템플릿의 로직과 제어 흐름을 만듭니다. 중괄호 백분율 구분 기호 {%와 %} 및 이를 둘러싼 텍스트는 템플릿이 렌더링될 때 가시적인 출력을 생성하지 않습니다. 이를 통해 사용자에게 Liquid 로직을 표시하지 않고 변수를 할당하고 조건이나 루프를 만들 수 있습니다.

예를 들어, if 태그를 사용하여 사용자 기기에 설정된 언어에 따라 메시지 언어를 다르게 할 수 있습니다.

입력

{% if Language == 'fr' %}
Salut!
{% else %}
Hello!
{% endif %}

출력 (fr)

Salut!

출력 (es)

Hello!

Tags 연산자

연산자	설명
==	같음
!=	같지 않음
>	보다 큼
<	보다 작음
>=	보다 크거나 같음
<=	보다 작거나 같음
or	논리합(or)
and	논리곱(and)
contains	문자열 또는 문자열 배열 내에 하위 문자열이 있는지 확인

참고

하나 이상의 and 또는 or 연산자가 있는 태그에서 연산자는 오른쪽에서 왼쪽 순서로 확인됩니다. 괄호를 사용하여 연산 순서를 변경할 수 없습니다. 괄호는 Liquid에서 유효하지 않은 문자이며 태그가 작동하지 않게 합니다.

Filters

filters는 Liquid 객체 또는 변수의 출력을 수정합니다. 이중 중괄호 {{ }} 및 변수 할당 내에서 사용되며 파이프 문자 |로 구분됩니다. 하나의 출력에 여러 필터를 사용할 수 있으며 왼쪽에서 오른쪽으로 적용됩니다.

입력

{{ Name | capitalize | prepend:"Hello " }}

출력

Hello Anna

API를 통해 전송된 메시지에서 Liquid 템플릿 사용하기

createMessage 요청에서 Liquid 구문을 사용하여 Liquid 템플릿을 구현하세요. 템플릿은 createMessage 요청의 “content” 매개변수뿐만 아니라 동적 콘텐츠를 지원하는 다른 모든 매개변수, 특히 플랫폼별 “title”, “subtitle”, “image” 매개변수에서도 사용할 수 있습니다.

콘텐츠 템플릿을 사용하면 API 요청에서 데이터를 지정하거나(“template_bindings” 매개변수 전달) 사용자 기기에 저장된 태그 값에서 데이터를 가져올 수 있습니다(“template_bindings” 매개변수 미사용). 이러한 방식으로 매우 관련성 높은 콘텐츠를 포함하는 사용자 기반 푸시 캠페인을 구축할 수 있습니다.

참고

동적 콘텐츠와 달리 템플릿의 변수는 {{myVariable}}과 같이 이중 중괄호로 묶어야 합니다.

이름에 공백이 있는 태그를 사용하여 템플릿 로직을 정의하려면 다음 기술을 사용하세요.

예시

{% capture my_tag %}{{My Tag}}{% endcapture %}
{% if my_tag == 'value' %}
이 경우에 보낼 콘텐츠
{% else %}
그렇지 않은 경우에 보낼 콘텐츠
{% endif %}

Liquid 템플릿 사용 사례

여기에서는 Liquid 템플릿이 유용하게 사용되는 몇 가지 사례를 소개합니다.

다국어 푸시

Liquid 템플릿을 사용하면 사용자가 어떤 언어로 푸시 메시지를 받아야 하는지 명확하게 지정할 수 있습니다. API 요청의 간단한 예와 요청에 사용된 템플릿 바인딩에 따라 수신되는 메시지를 살펴보세요.

Liquid 입력

{% if Language == 'es' %}
¡Hola!
{% else %}
Hello!
{% endif %}

API 요청

{
  "request": {
    "application": "XXXXX-XXXXX", // Pushwoosh 앱 코드
    "auth": "yxoPUlw.....IyEX4H", // Pushwoosh Control Panel의 API 액세스 토큰
    "notifications" : [ // 푸시 메시지 매개변수
      {
       "content": "{% raw %}
{% if language == 'es' %}¡Hola!{% else %}hello!{% endif %}
{% endraw %}",
        "template_bindings": { // 선택 사항. 요청에 template_bindings가 전달되지 않으면 기기의 태그 값이 사용됩니다.
         "language" : "es"
        }
      }
    ]
  }
}

출력

언어가 ‘es’인 경우: ¡Hola!

언어가 ‘en’인 경우: Hello!

구독 업그레이드 프롬프트

고객의 현재 요금제에 따라 구독을 업그레이드하도록 유도하세요.

Liquid 입력

{% if Subscription == 'Basic' %}
    Upgrade to Silver for getting more product features and 24/7 support.
{% elsif Subscription == 'Silver' %}
    Upgrade to Gold for priority support and advanced features.
{% else %}
    Please contact your manager to renew your subscription.
{% endif %}

API 요청

{
  "request": {
    "application": "XXXXX-XXXXX", // Pushwoosh 앱 코드
    "auth": "yxoPUlw.....IyEX4H", // Pushwoosh Control Panel의 API 액세스 토큰
    "notifications" : [ // 푸시 메시지 매개변수
      {
       "content": "{% raw %}
{% if Subscription == 'Basic' %}Upgrade to Silver for getting more product features and 24/7 support.{% elsif Subscription == 'Silver' %}Upgrade to Gold for priority support and advanced features.{% else %}Please contact your manager to renew your subscription. {% endif %}
{% endraw %}",
        "template_bindings": { // 선택 사항. 요청에 template_bindings가 전달되지 않으면 기기의 태그 값이 사용됩니다.
         "language" : "es"
        }
      }
    ]
  }
}

출력

기본 구독 요금제 사용자: 더 많은 제품 기능과 연중무휴 지원을 받으려면 Silver로 업그레이드하세요.

Silver 구독 요금제 사용자: 우선 지원과 고급 기능을 이용하려면 Gold로 업그레이드하세요.

기타 요금제 사용자: 구독을 갱신하려면 관리자에게 문의하세요.

List 태그

콘텐츠 템플릿은 List 유형의 태그를 처리하는 데 매우 유용합니다.

변수 크기

가능한 사용 사례 중 하나는 태그에 포함된 값의 수에 따라 다른 콘텐츠를 전달하는 것입니다. 예를 들어, 행동이 다른 고객에게 다른 할인을 제공할 수 있습니다. 고객이 위시리스트에 몇 가지 항목을 담았다고 가정해 봅시다. 구매하려는 제품 수에 따라 가장 적합한 할인으로 구매를 유도하세요!

Liquid 입력

{% if WishList.size >= 3 %}
Get 20% off your next purchase!
{% elsif WishList.size == 2 %}
Get a 10% discount on your next purchase!
{% else %}
Hey, take a look at new outwears!
{% endif %}

API 요청

{
  "request": {
    "application": "XXXXX-XXXXX", // Pushwoosh 앱 코드
    "auth": "yxoPUlw.....IyEX4H", // Pushwoosh Control Panel의 API 액세스 토큰
    "notifications" : [ // 푸시 메시지 매개변수
      {
       "content": "{% raw %}
{% if WishList.size >= 3 %}Get 20% off your next purchase!{% elsif WishList.size == 2 %}Get a 10% discount on your next purchase!{% else %}Hey, take a look at new outwears!{% endif %}
{% endraw %}",
        "template_bindings": {
         "WishList" : ["Skinny Low Ankle Jeans", "Linen Trenchcoat", "High Waisted Denim Skirt", "Strappy Tiered Maxi Dress"]
        }
      }
    ]
  }
}

WishList 크기 ≥ 3

WishList 크기 = 2

변수 포함

다루어야 할 또 다른 경우는 List 태그 값을 처리하고 태그에 포함된 값을 기반으로 가장 관련성 높은 콘텐츠를 전달하는 것입니다.

Liquid 입력

{% if WishList contains 'Skinny Low Ankle Jeans' %}
Get 20% off products in your wishlist!
{% else %}
Hey, take a look at the brand new Skinny Low Ankle Jeans!
{% endif %}

API 요청

{
  "request": {
    "application": "C90C0-0E786",
    "auth": "yxoPUlw.....IyEX4H", // Pushwoosh Control Panel의 API 액세스 토큰
    "notifications" : [ // 푸시 메시지 매개변수
      {
       "content": "{% raw %}
{% if WishList contains 'Skinny Low Ankle Jeans' %}Get 20% off your next purchase!{% else %}Hey, take a look at the brand new Skinny Low Ankle Jeans!{% endif %}
{% endraw %}",
        "template_bindings": {
         "WishList" : ["Skinny Low Ankle Jeans", "Linen Trenchcoat", "High Waisted Denim Skirt", "Strappy Tiered Maxi Dress"]
        }
      }
    ]
  }
}

변수에 데이터 포함

변수에 데이터 미포함

복수형

콘텐츠 템플릿을 사용하여 사용자 행동에 따라 메시지 콘텐츠를 조정할 수 있습니다. 예를 들어, List 태그에 값이 두 개 이상 포함된 경우 복수형 단어를 포함하도록 메시지 텍스트를 수정할 수 있습니다.

Liquid 입력

    Get 20% off item
{% if WishList.size > 1 %}
    s in your WishList!
{% else %}
    in your Wishlist!
{% endif %}

API 요청

{
  "request": {
    "application": "C90C0-0E786",
    "auth": "yxoPUlw.....IyEX4H", // Pushwoosh Control Panel의 API 액세스 토큰
    "notifications" : [ // 푸시 메시지 매개변수
      {
       "content": "Get 20% off item{% raw %}
{% if WishList.size > 1 %}s in your WishList!{% else %} in your Wishlist!{% endif %}
{% endraw %}",
        "template_bindings": { // 선택 사항. 요청에 template_bindings가 전달되지 않으면 기기의 태그 값이 사용됩니다.
         "WishList" : ["Skinny Low Ankle Jeans", "Linen Trenchcoat", "High Waisted Denim Skirt", "Strappy Tiered Maxi Dress"]
        }
      }
    ]
  }
}

복수형

단수형

시간대

시간대 템플릿은 지정된 시간대에 따라 날짜와 시간을 변환합니다.

Liquid 입력

{{ MyDate | timezone: MyTimezone | date: \"%Y-%m-%d %H:%M\" }}

API 요청

예시

{
  "request" : {
    "auth" : "3H9bk8w3.....Acge2RbupTB", // Pushwoosh Control Panel의 API 액세스 토큰
    "application" : "XXXXX-XXXXX", // Pushwoosh 앱 코드
    "notifications" : [ // 푸시 메시지 매개변수
      {
        "content": "Current Date: {{ MyDate | timezone: MyTimezone | date: \"%Y-%m-%d %H:%M\" }}",
        "template_bindings": { // 선택 사항. 요청에 template_bindings가 전달되지 않으면 기기의 태그 값이 사용됩니다.
         "MyDate" : "2019-07-23 15:00",
         "MyTimezone" : "Asia/Dubai"
        }
      }
    ]
  }
}

출력

Connected content

Connected content는 Liquid 템플릿의 기능으로, 웹 서비스와 같은 외부 소스에서 데이터를 동적으로 검색하여 이메일 또는 푸시 알림 메시지 내에서 직접 사용할 수 있게 해줍니다. 이 기능은 지정된 URL에서 JSON 데이터를 가져와 콘텐츠에서 활용할 수 있는 변수에 저장하여 실시간 개인화를 가능하게 합니다.

주요 사용 사례

• 제품 추천: 각 사용자에게 맞춤화된 개인화된 제품 목록을 표시합니다.

• 프로모션 코드: 백엔드 서비스에서 생성된 고유한 프로모션 코드를 삽입합니다.

전제 조건

• Connected Content를 사용하려면 User ID, HWID, 또는 사용자 지정 태그를 기반으로 필요한 데이터(예: 프로모션 코드, 제품 추천)를 생성하고 제공하는 자체 백엔드 서비스가 있어야 합니다. 그러면 Pushwoosh는 메시지를 보내기 전에 이 데이터를 가져옵니다.

단계별 구현 가이드

1단계. 백엔드 서비스 설정

백엔드 서비스는 다음을 수행해야 합니다.

• 사용자별 매개변수(예: userId)를 포함하는 요청을 수락합니다. Connected Content는 UserID, HWID 또는 프로젝트에 설정한 모든 사용자 지정 태그를 지원합니다.
• 필요한 데이터와 함께 JSON 응답을 반환합니다. 이 콘텐츠는 메시지에 동적으로 삽입될 수 있습니다.

작동 방식

백엔드 서비스는 데이터 제공자 역할을 하며, 사용자별 정보로 HTTP 요청에 응답합니다.

1. Pushwoosh는 백엔드에 요청을 보내고 사용자별 식별자를 쿼리 매개변수로 전달합니다.
2. 백엔드는 요청을 처리하고 요청된 데이터를 검색합니다.
3. 백엔드는 JSON 응답을 반환합니다.
4. 메시지를 보내기 전에 Pushwoosh는 백엔드 서비스에서 JSON 응답을 가져와 반환된 값(예: code)을 메시지 콘텐츠에 동적으로 사용합니다.

응답 예시

{ "code": "SPECIALOFFERFORUSER12345" }

2단계. Pushwoosh에서 Connected content로 프리셋 만들기

1. 푸시 또는 이메일 콘텐츠 편집기에서 메시지 필드에 Connected Content 구문을 삽입합니다.

예시

{% connected_content http://your-backend-url.com?userId={{ ${userid} }} :save result %}

구문 분석

connected_content	지정된 백엔드 URL에서 JSON 데이터를 가져옵니다.
http://your-backend-url.com	필요한 데이터를 JSON 형식으로 반환하는 백엔드 엔드포인트입니다.
userId={{ ${userid} }}	사용자 ID를 백엔드로 전달하는 동적 쿼리 매개변수입니다.
:save result	가져온 JSON 응답을 Liquid 템플릿에서 사용할 수 있도록 result 변수에 저장합니다.

인증(선택 사항)

백엔드 서비스에 인증이 필요한 경우, Connected Content 요청에 API 키 또는 토큰을 포함하여 안전한 액세스를 보장할 수 있습니다.

{% connected_content http://your-backend-url.com?userId={{ ${userid} }}&auth=YOUR_API_KEY :save result %}

Connected content에서 태그 사용하기

사용자 지정 태그를 포함하려면 Connected Content 요청({{ tag_name }})에 쿼리 매개변수로 삽입하세요.

{% connected_content http://your-backend-url.com?userId={{ ${userid} }}{{ Language }} :save result %}

2. 다음으로, 검색된 데이터를 통합하여 다음과 같이 메시지 텍스트를 추가합니다.

Hey, {{userid}}, grab your personal promo code - {{result.code}}

3. 메시지 콘텐츠를 완성하고 프리셋 설정을 구성한 후, 캠페인에서 재사용할 수 있도록 저장합니다.

3단계. 구성된 프리셋을 사용하여 메시지 보내기

일회성 푸시 또는 이메일 양식 또는 고객 여정을 사용하여 이 프리셋으로 메시지를 보냅니다.

중요

서비스가 HTTP 200 OK 이외의 상태를 반환하면 이메일 또는 푸시 알림이 전송되지 않습니다. 이는 필요한 데이터가 성공적으로 검색된 경우에만 통신이 전송되도록 보장합니다.