콘텐츠로 건너뛰기
사용자 가이드지원 데모 요청 로그인
Pushwoosh.com

리치 미디어 템플릿 구문

템플릿 구조

Anchor link to

템플릿은 리치 미디어 자산으로 HTML, JavaScript, CSS 및 이미지를 포함할 수 있는 간단한 .zip 아카이브입니다. 아카이브의 루트에는 index.html 파일이 포함되어야 합니다.

템플릿 플레이스홀더

Anchor link to

리치 미디어 템플릿에서 플레이스홀더를 사용하여 리치 미디어 콘텐츠의 값을 변경하고 현지화할 수 있습니다.

플레이스홀더는 아래 형식을 따라야 합니다:

{{ Placeholder name | Type | Default value }}`

여기서:

  • 플레이스홀더 이름 — 리치 미디어 편집기에 표시될 플레이스홀더의 이름입니다.
  • 유형 — 플레이스홀더의 유형입니다. 유형은 다음 값 중 하나일 수 있습니다:
    • color — 색상 입력
    • text — 텍스트 입력
    • html — 텍스트 영역 (여러 줄 텍스트)
  • 기본값 — 편집기에서 값이 제공되지 않을 경우 사용되는 기본값입니다. 설정된 값이 없으면 플레이스홀더 이름이 기본값으로 사용됩니다.

예시:

{{Header text|text|Tell Us What You Think}}`

Pushwoosh.json 추가하기

Anchor link to

리치 미디어 편집기에서 플레이스홀더를 그룹화하여 서로 연결할 수 있습니다:

입력 그룹으로 함께 연결된 그룹화된 플레이스홀더를 보여주는 리치 미디어 편집기 인터페이스

이를 위해 리치 미디어 템플릿이 포함된 아카이브에 index.html 파일 옆에 pushwoosh.json 파일을 추가하십시오.

파일 구조는 매우 간단하며 자명합니다:

{
  "input_groups": [
    ["Logo image URL", "Logo background color"],
    ["Topic text", "Topic text color", "Topic background color", "Sub-topic text"],
    ["Main text", "Text background color"],
    ["Button text", "Button URL", "Button text color", "Button background color"]
  ]
}

예시

Anchor link to

설문조사를 위한 사용자 지정 양식은 사용자 지정 리치 미디어 템플릿의 일반적인 사용 사례입니다. 이러한 양식을 통해 귀중한 사용자 피드백을 수집할 수 있습니다. 사용자 지정 설문조사 양식이 포함된 사전 디자인된 템플릿은 기본 템플릿에서 사용할 수 있습니다. 이를 시작점으로 사용하여 자신만의 설문조사를 만드십시오.

사용자 피드백 수집을 위한 입력 필드가 있는 사용자 지정 설문조사 양식 템플릿 예시

양식을 만들 때 리치 미디어 편집기 내에서 호환성과 원활한 기능을 보장하기 위해 몇 가지 모범 사례를 따르십시오.

다음은 제어판에서 사용할 수 있는 기본 템플릿 중 하나의 또 다른 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }
        .main {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .logo {
            width: 100%;
            height: 15%;
            background-image: url('{{Logo image URL|text|https://www.pushwoosh.com/wp-content/themes/pushwoosh/img/logo.png}}');
            background-position: 50% 50%;
            background-size: 50%;
            background-repeat: no-repeat;
            background-color: #{{Logo background color|color|343434}};
        }
        .topic-wrapper {
            width: 100%;
            height: 30%;
            text-align: center;
            display: table;
            color: #{{Topic text color|color|FFFFFF}};
            background-color: #{{Topic background color|color|23B7A4}};
        }
        .topic {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .topic-wrapper h1, .topic-wrapper p {
            margin: 0;
        }
        .padding-wrapper {
            width: 100%;
            height: 55%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding: 0 2% 0 2%;
            background-color: #{{Text background color|color|FFFFFF}};
        }
        .text-wrapper {
            height: 70%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            overflow: hidden;
        }
        .text {
            width: 100%;
            height: 99%;
            overflow: auto;
            padding-right: 15px;
        }
        .button-wrapper {
            height: 30%;
            width: 100%;
            padding: 2% 0 2% 0;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .button {
            display: table;
            width: 100%;
            height: 100%;
        }
        .button a {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            font-size: 2em;
            text-decoration: none;
            color:#{{Button text color|color|FFFFFF}};
            border-radius: 20px;
            background-color: #{{Button background color|color|23B7A4}};
        }


        @media only screen
        and (orientation: landscape) {
            .padding-wrapper {
                height: 45%;
            }
            .logo {
                height: 20%;
            }
            .button a {
                border-radius: 10px;
            }
        }
    </style>
</head>
<body>


<div class="main">
    <div class="logo"></div>
    <div class="topic-wrapper">
        <div class="topic">
            <h1>{{Topic text|text|TOPIC TEXT}}</h1>
            <p>{{Sub-topic text|text|Subtopic here}}</p>
        </div>
    </div>
    <div class="padding-wrapper">
        <div class="text-wrapper">
            <div class="text">
                {{Main text|html|Main text here}}
            </div>
        </div>
        <div class="button-wrapper">
            <div class="button">
                <a href="{{Button URL|text|https://www.pushwoosh.com}}">
                    {{Button text|text|Submit}}
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

사용자 지정 리치 미디어 성능 모니터링

Anchor link to

또한 사용자가 직접 만들어 ZIP 파일로 Pushwoosh에 업로드하는 사용자 지정 리치 미디어 콘텐츠의 성능을 모니터링할 수 있습니다.

다음과 같은 방법으로 사람들이 리치 미디어와 상호 작용하는 방식을 추적할 수 있습니다:

  • 버튼 클릭
  • 링크 클릭
  • 양식 제출

Pushwoosh가 이러한 상호 작용을 추적할 수 있도록 하려면:

  1. 추적하려는 각 요소에 “id” 속성을 추가합니다.

예를 들어:

링크 클릭을 추적하려면:

<a id=“my_link_1” href=“#”>…</a>

양식 제출을 추적하려면:

<form id=“my_form_1” action=“#” method=“GET”>…</form>

버튼 클릭을 추적하려면:

<button id=“my_button_1” type=“button”>…</button> // type="button"이 필요합니다
  1. 태그 끝에 CDN의 JavaScript 파일에 대한 링크를 추가합니다:
<script src="https://cdn.pushwoosh.com/richmedia-service/statistics/v1/richmedia-statistics.js"></script>

리치 미디어의 사용자 지정 요소에 대한 모범 사례

Anchor link to

CSS 스타일 신중하게 관리하기

Anchor link to

CSS 스타일이 리치 미디어 편집기 스타일과 충돌하지 않도록 구체적으로 지정해야 합니다. 태그 이름이나 일반적인 클래스 이름에 적용되는 것과 같은 낮은 특이성의 스타일을 사용하면 리치 미디어 편집기의 모양에 영향을 줄 수 있습니다. 스타일을 로컬로 유지하는 것이 가장 좋습니다. 콘텐츠를 고유한 ID나 클래스가 있는 컨테이너로 감싸고 이 식별자를 자식 요소의 CSS 선택기에서 사용하십시오.

외부 라이브러리 포함하기

Anchor link to

CSS 또는 JavaScript 라이브러리(예: Font Awesome, Bootstrap, Tailwind CSS 등)를 통합하여 해당 라이브러리의 메서드, 아이콘, 글꼴, 애니메이션 등을 활용할 수 있습니다.