ไวยากรณ์เทมเพลตริชมีเดีย
คู่มือนี้อ้างอิงถึงการพัฒนาหน้า Rich Media แบบกำหนดเอง
โครงสร้างเทมเพลต
Anchor link toเทมเพลตคือไฟล์เก็บถาวร .zip ที่สามารถบรรจุ HTML, JavaScript, CSS และรูปภาพเป็นแอสเซทของ Rich Media ได้ ไฟล์เก็บถาวรจะต้องมีไฟล์ index.html อยู่ในไดเรกทอรีราก (root)
ตัวยึดตำแหน่งในเทมเพลต (Template placeholders)
Anchor link toคุณสามารถใช้ตัวยึดตำแหน่ง (placeholder) ในเทมเพลต Rich Media ซึ่งจะช่วยให้คุณสามารถเปลี่ยนแปลงและปรับค่าต่าง ๆ ในเนื้อหา Rich Media ให้เข้ากับท้องถิ่นได้
ตัวยึดตำแหน่งต้องเป็นไปตามรูปแบบด้านล่าง:{{ Placeholder name | Type | Default value }}
โดยที่:
- Placeholder name — คือชื่อของตัวยึดตำแหน่งที่จะปรากฏในเครื่องมือแก้ไข Rich Media
- Type — คือประเภทของตัวยึดตำแหน่ง ประเภทสามารถเป็นค่าใดค่าหนึ่งต่อไปนี้:
- color — อินพุตสี
- text — อินพุตข้อความ
- html — พื้นที่ข้อความ (ข้อความหลายบรรทัด)
- Default value — ค่าเริ่มต้นที่จะถูกใช้หากไม่มีการระบุค่าในเครื่องมือแก้ไข หากไม่มีการตั้งค่าใด ๆ Placeholder name จะถูกใช้เป็นค่าเริ่มต้น
ตัวอย่าง:{{Header text|text|Tell Us What You Think}}
การเพิ่มไฟล์ Pushwoosh.json
Anchor link toคุณสามารถจัดกลุ่มตัวยึดตำแหน่งเพื่อให้เชื่อมโยงเข้าด้วยกันในเครื่องมือแก้ไข Rich Media:

เพื่อให้ได้ผลลัพธ์ดังกล่าว ให้เพิ่มไฟล์ pushwoosh.json ลงในไฟล์เก็บถาวรพร้อมกับเทมเพลต Rich Media ของคุณ ถัดจากไฟล์ index.html
โครงสร้างของไฟล์นั้นเรียบง่ายและควรจะอธิบายได้ในตัวเอง:
{ "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แบบฟอร์มที่กำหนดเองสำหรับแบบสำรวจเป็นกรณีการใช้งานทั่วไปสำหรับเทมเพลตริชมีเดียแบบกำหนดเอง แบบฟอร์มเหล่านี้ช่วยให้คุณสามารถรวบรวมความคิดเห็นของผู้ใช้ที่มีค่าได้ มีเทมเพลตที่ออกแบบไว้ล่วงหน้าพร้อมแบบฟอร์มสำรวจที่กำหนดเองในเทมเพลตเริ่มต้น (Default templates) ใช้สิ่งนี้เป็นจุดเริ่มต้นสำหรับแบบสำรวจของคุณเอง

เมื่อสร้างแบบฟอร์ม ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด เพื่อให้แน่ใจว่าสามารถทำงานร่วมกันได้อย่างราบรื่นภายใน Richmedia Editor
นี่คืออีกตัวอย่างหนึ่งจากเทมเพลตเริ่มต้นที่มีอยู่ใน Control Panel
<!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>
ติดตามประสิทธิภาพของ Custom Rich Media
Anchor link toคุณยังสามารถติดตามประสิทธิภาพของเนื้อหา Rich Media แบบกำหนดเองที่คุณสร้างและอัปโหลดไปยัง Pushwoosh เป็นไฟล์ ZIP ได้
คุณสามารถติดตามวิธีที่ผู้คนโต้ตอบกับ Rich Media ของคุณได้โดย:
- การคลิกปุ่ม
- การคลิกลิงก์
- การส่งแบบฟอร์ม
เพื่อให้ Pushwoosh สามารถติดตามการโต้ตอบเหล่านี้ได้:
- เพิ่มแอตทริบิวต์ “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" is required
- เพิ่มลิงก์ไปยังไฟล์ JavaScript จาก CDN ที่ส่วนท้ายของแท็ก:
<script src="https://cdn.pushwoosh.com/richmedia-service/statistics/v1/richmedia-statistics.js"></script>
แนวทางปฏิบัติที่ดีที่สุดสำหรับองค์ประกอบที่กำหนดเองใน Rich media
Anchor link toจัดการสไตล์ CSS อย่างระมัดระวัง
Anchor link toตรวจสอบให้แน่ใจว่าสไตล์ CSS ของคุณมีความเฉพาะเจาะจงเพื่อหลีกเลี่ยงความขัดแย้งกับสไตล์ของ Richmedia Editor การใช้สไตล์ที่มีความเฉพาะเจาะจงต่ำ เช่น สไตล์ที่ใช้กับชื่อแท็กหรือชื่อคลาสทั่วไป อาจส่งผลต่อลักษณะที่ปรากฏของ Richmedia Editor ทางที่ดีที่สุดคือเก็บสไตล์ของคุณไว้ในเครื่อง—ห่อหุ้มเนื้อหาของคุณในคอนเทนเนอร์ที่มี ID หรือคลาสที่ไม่ซ้ำกัน และใช้ตัวระบุนี้ในตัวเลือก CSS ของคุณสำหรับองค์ประกอบลูก
รวมไลบรารีภายนอก
Anchor link toคุณสามารถรวมไลบรารี CSS หรือ JavaScript (เช่น Font Awesome, Bootstrap, Tailwind CSS เป็นต้น) เพื่อใช้วิธีการ ไอคอน แบบอักษร แอนิเมชัน และอื่น ๆ ของไลบรารีเหล่านั้นได้