ไวยากรณ์เทมเพลต Rich media
โครงสร้างเทมเพลต
Anchor link toเทมเพลตเป็นเพียงไฟล์ .zip ที่สามารถมี HTML, JavaScript, CSS และรูปภาพเป็นเนื้อหา Rich Media ได้ ไฟล์เก็บถาวรจะต้องมีไฟล์ index.html อยู่ในไดเรกทอรีราก
ตัวยึดตำแหน่งเทมเพลต
Anchor link toคุณสามารถใช้ตัวยึดตำแหน่งในเทมเพลต Rich Media ซึ่งจะช่วยให้คุณสามารถเปลี่ยนแปลงและปรับค่าในเนื้อหา Rich Media ให้เข้ากับท้องถิ่นได้
ตัวยึดตำแหน่งต้องเป็นไปตามรูปแบบด้านล่าง:
{{ ชื่อตัวยึดตำแหน่ง | ประเภท | ค่าเริ่มต้น }}`โดยที่:
- ชื่อตัวยึดตำแหน่ง — คือชื่อของตัวยึดตำแหน่งที่จะปรากฏในตัวแก้ไข Rich Media
- ประเภท — คือประเภทของตัวยึดตำแหน่ง ประเภทสามารถเป็นค่าใดค่าหนึ่งต่อไปนี้:
- color — อินพุตสี
- text — อินพุตข้อความ
- html — พื้นที่ข้อความ (ข้อความหลายบรรทัด)
- ค่าเริ่มต้น — ค่าเริ่มต้นที่ใช้หากไม่มีการระบุค่าในตัวแก้ไข หากไม่ได้ตั้งค่าใดๆ ชื่อตัวยึดตำแหน่ง จะถูกใช้เป็นค่าเริ่มต้น
ตัวอย่าง:
{{ข้อความส่วนหัว|text|บอกเราว่าคุณคิดอย่างไร}}`การเพิ่ม Pushwoosh.json
Anchor link toคุณสามารถจัดกลุ่มตัวยึดตำแหน่งเพื่อให้เชื่อมโยงกันในตัวแก้ไข Rich Media:
เพื่อให้บรรลุเป้าหมายนี้ ให้เพิ่มไฟล์ pushwoosh.json ลงในไฟล์เก็บถาวรพร้อมกับเทมเพลต Rich Media ของคุณถัดจากไฟล์ index.html
โครงสร้างของไฟล์นั้นเรียบง่ายมากและควรจะอธิบายได้ในตัวเอง:
{ "input_groups": [ ["URL รูปภาพโลโก้", "สีพื้นหลังโลโก้"], ["ข้อความหัวข้อ", "สีข้อความหัวข้อ", "สีพื้นหลังหัวข้อ", "ข้อความหัวข้อย่อย"], ["ข้อความหลัก", "สีพื้นหลังข้อความ"], ["ข้อความบนปุ่ม", "URL ของปุ่ม", "สีข้อความบนปุ่ม", "สีพื้นหลังปุ่ม"] ]}ตัวอย่าง
Anchor link toแบบฟอร์มที่กำหนดเองสำหรับแบบสำรวจเป็นกรณีการใช้งานทั่วไปสำหรับเทมเพลต Rich Media แบบกำหนดเอง แบบฟอร์มเหล่านี้ช่วยให้คุณรวบรวมความคิดเห็นอันมีค่าของผู้ใช้ได้ มีเทมเพลตที่ออกแบบไว้ล่วงหน้าพร้อมแบบฟอร์มสำรวจที่กำหนดเองในเทมเพลตเริ่มต้น ใช้สิ่งนี้เป็นจุดเริ่มต้นสำหรับแบบสำรวจของคุณเอง
เมื่อสร้างแบบฟอร์ม ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด เพื่อให้แน่ใจว่าเข้ากันได้และทำงานได้อย่างราบรื่นภายใน Rich Media 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('{{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: #{{สีพื้นหลังโลโก้|color|343434}}; } .topic-wrapper { width: 100%; height: 30%; text-align: center; display: table; color: #{{สีข้อความหัวข้อ|color|FFFFFF}}; 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: #{{สีพื้นหลังข้อความ|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:#{{สีข้อความบนปุ่ม|color|FFFFFF}}; border-radius: 20px; 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>{{ข้อความหัวข้อ|text|ข้อความหัวข้อ}}</h1> <p>{{ข้อความหัวข้อย่อย|text|หัวข้อย่อยที่นี่}}</p> </div> </div> <div class="padding-wrapper"> <div class="text-wrapper"> <div class="text"> {{ข้อความหลัก|html|ข้อความหลักที่นี่}} </div> </div> <div class="button-wrapper"> <div class="button"> <a href="{{URL ของปุ่ม|text|https://www.pushwoosh.com}}"> {{ข้อความบนปุ่ม|text|ส่ง}} </a> </div> </div> </div></div></body></html>ติดตามประสิทธิภาพของ 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 ของคุณมีความเฉพาะเจาะจงเพื่อหลีกเลี่ยงความขัดแย้งกับสไตล์ของ Rich Media Editor การใช้สไตล์ที่มีความเฉพาะเจาะจงต่ำ เช่น สไตล์ที่ใช้กับชื่อแท็กหรือชื่อคลาสทั่วไป อาจส่งผลต่อลักษณะที่ปรากฏของ Rich Media Editor ทางที่ดีที่สุดคือเก็บสไตล์ของคุณไว้ในเครื่อง—ห่อเนื้อหาของคุณในคอนเทนเนอร์ที่มี ID หรือคลาสที่ไม่ซ้ำกัน และใช้ตัวระบุนี้ในตัวเลือก CSS ของคุณสำหรับองค์ประกอบย่อย
รวมไลบรารีภายนอก
Anchor link toคุณสามารถรวมไลบรารี CSS หรือ JavaScript (เช่น Font Awesome, Bootstrap, Tailwind CSS เป็นต้น) เพื่อใช้วิธีการ ไอคอน แบบอักษร แอนิเมชัน และอื่นๆ ของไลบรารีเหล่านั้นได้