Liquid 템플릿 사용하기

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

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

Liquid 템플릿은 동적 콘텐츠에 더 많은 로직을 추가합니다. 예를 들어, 사용자의 구독 태그에 ‘free’가 포함되어 있다면 ‘10% 할인 혜택을 받으세요.‘와 같은 메시지를 보낼 수 있습니다.

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

구문

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

참고

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

객체

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

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

입력

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

출력

Hi Anna! We’re glad you’re back!

태그

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

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

입력

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

출력 (fr)

Salut!

출력 (es)

Hello!

태그 연산자

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

참고

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

필터

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' %}
Content to send in this case
{% else %}
Content to send otherwise
{% endif %}

Liquid 템플릿 사용 사례

다음은 Liquid 템플릿이 유용하게 사용되는 몇 가지 사례입니다.

다국어 푸시

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

Liquid 입력

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

API 요청

{
  "request": {
    "application": "XXXXX-XXXXX", // Pushwoosh app code
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "content": "{% raw %}
{% if language == 'es' %}¡Hola!{% else %}hello!{% endif %}
{% endraw %}",
        "template_bindings": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "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 app code
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "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": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "language" : "es"
        }
      }
    ]
  }
}

출력

Basic 구독 요금제 사용자: Upgrade to Silver for getting more product features and 24/7 support.

Silver 구독 요금제 사용자: Upgrade to Gold for priority support and advanced features.

기타 요금제 사용자: Please contact your manager to renew your subscription.

리스트 태그

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

변수 크기

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

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 app code
    "auth": "yxoPUlw.....IyEX4H", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "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"]
        }
      }
    ]
  }
}

위시리스트 크기 ≥ 3

위시리스트 크기 = 2

변수 포함

다루어야 할 또 다른 사례는 리스트 태그 값을 처리하고 태그에 포함된 값에 따라 가장 관련성 높은 콘텐츠를 전달하는 것입니다.

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", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "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"]
        }
      }
    ]
  }
}

변수에 데이터 포함

변수에 데이터 미포함

복수형

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

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", // API access token from Pushwoosh Control Panel
    "notifications" : [ // push message parameters
      {
       "content": "Get 20% off item{% raw %}
{% if WishList.size > 1 %}s in your WishList!{% else %} in your Wishlist!{% endif %}
{% endraw %}",
        "template_bindings": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "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", // API access token from Pushwoosh Control Panel
    "application" : "XXXXX-XXXXX", // Pushwoosh app code
    "notifications" : [ // push message parameters
      {
        "content": "Current Date: {{ MyDate | timezone: MyTimezone | date: \"%Y-%m-%d %H:%M\" }}",
        "template_bindings": { // optional. When no template_bindings are passed in a request, Tag values from the device are used.
         "MyDate" : "2019-07-23 15:00",
         "MyTimezone" : "Asia/Dubai"
        }
      }
    ]
  }
}

출력

연결된 콘텐츠

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

주요 사용 사례

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

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

전제 조건

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

단계별 구현 가이드

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

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

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

작동 방식

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

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

응답 예시

{ "code": "SPECIALOFFERFORUSER12345" }

2단계. Pushwoosh에서 연결된 콘텐츠로 프리셋 생성하기

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

예시

{% 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 변수에 저장합니다.

인증 (선택 사항)

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

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

연결된 콘텐츠에서 태그 사용하기

사용자 지정 태그를 포함하려면 연결된 콘텐츠 요청({{ 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 이외의 상태를 반환하면 이메일 또는 푸시 알림이 전송되지 않습니다. 이는 필요한 데이터가 성공적으로 검색된 경우에만 통신이 전송되도록 보장합니다.