# ไวยากรณ์เทมเพลต Rich media ## โครงสร้างเทมเพลต เทมเพลตเป็นเพียงไฟล์ .zip ที่สามารถมี HTML, JavaScript, CSS และรูปภาพเป็นเนื้อหา Rich Media ได้ ไฟล์เก็บถาวรจะต้องมีไฟล์ **index.html** อยู่ในไดเรกทอรีราก ## ตัวยึดตำแหน่งเทมเพลต คุณสามารถใช้ตัวยึดตำแหน่งในเทมเพลต Rich Media ซึ่งจะช่วยให้คุณสามารถเปลี่ยนแปลงและปรับค่าในเนื้อหา Rich Media ให้เข้ากับท้องถิ่นได้ ตัวยึดตำแหน่งต้องเป็นไปตามรูปแบบด้านล่าง: ```liquid {{ ชื่อตัวยึดตำแหน่ง | ประเภท | ค่าเริ่มต้น }}` ``` โดยที่: * **ชื่อตัวยึดตำแหน่ง** — คือชื่อของตัวยึดตำแหน่งที่จะปรากฏในตัวแก้ไข Rich Media * **ประเภท** — คือประเภทของตัวยึดตำแหน่ง ประเภทสามารถเป็นค่าใดค่าหนึ่งต่อไปนี้: * **color** — อินพุตสี * **text** — อินพุตข้อความ * **html** — พื้นที่ข้อความ (ข้อความหลายบรรทัด) * **ค่าเริ่มต้น** — ค่าเริ่มต้นที่ใช้หากไม่มีการระบุค่าในตัวแก้ไข หากไม่ได้ตั้งค่าใดๆ **ชื่อตัวยึดตำแหน่ง** จะถูกใช้เป็นค่าเริ่มต้น ตัวอย่าง: ```liquid {{ข้อความส่วนหัว|text|บอกเราว่าคุณคิดอย่างไร}}` ``` ## การเพิ่ม Pushwoosh.json คุณสามารถจัดกลุ่มตัวยึดตำแหน่งเพื่อให้เชื่อมโยงกันในตัวแก้ไข Rich Media: อินเทอร์เฟซตัวแก้ไข Rich Media ที่แสดงตัวยึดตำแหน่งที่จัดกลุ่มซึ่งเชื่อมโยงกันในกลุ่มอินพุต เพื่อให้บรรลุเป้าหมายนี้ ให้เพิ่มไฟล์ **pushwoosh.json** ลงในไฟล์เก็บถาวรพร้อมกับเทมเพลต Rich Media ของคุณถัดจากไฟล์ **index.html** โครงสร้างของไฟล์นั้นเรียบง่ายมากและควรจะอธิบายได้ในตัวเอง: ``` { "input_groups": [ ["URL รูปภาพโลโก้", "สีพื้นหลังโลโก้"], ["ข้อความหัวข้อ", "สีข้อความหัวข้อ", "สีพื้นหลังหัวข้อ", "ข้อความหัวข้อย่อย"], ["ข้อความหลัก", "สีพื้นหลังข้อความ"], ["ข้อความบนปุ่ม", "URL ของปุ่ม", "สีข้อความบนปุ่ม", "สีพื้นหลังปุ่ม"] ] } ``` ## ตัวอย่าง แบบฟอร์มที่กำหนดเองสำหรับแบบสำรวจเป็นกรณีการใช้งานทั่วไปสำหรับเทมเพลต Rich Media แบบกำหนดเอง แบบฟอร์มเหล่านี้ช่วยให้คุณรวบรวมความคิดเห็นอันมีค่าของผู้ใช้ได้ มีเทมเพลตที่ออกแบบไว้ล่วงหน้าพร้อมแบบฟอร์มสำรวจที่กำหนดเองในเทมเพลตเริ่มต้น ใช้สิ่งนี้เป็นจุดเริ่มต้นสำหรับแบบสำรวจของคุณเอง ตัวอย่างเทมเพลตแบบฟอร์มสำรวจที่กำหนดเองพร้อมช่องป้อนข้อมูลสำหรับรวบรวมความคิดเห็นของผู้ใช้ เมื่อสร้างแบบฟอร์ม [ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด](#best-practices-for-custom-elements-in-rich-media) เพื่อให้แน่ใจว่าเข้ากันได้และทำงานได้อย่างราบรื่นภายใน Rich Media Editor นี่คืออีกตัวอย่างหนึ่งจากเทมเพลตเริ่มต้นที่มีอยู่ใน Control Panel ```txt

{{ข้อความหัวข้อ|text|ข้อความหัวข้อ}}

{{ข้อความหัวข้อย่อย|text|หัวข้อย่อยที่นี่}}

{{ข้อความหลัก|html|ข้อความหลักที่นี่}}
{{ข้อความบนปุ่ม|text|ส่ง}}
``` ## ติดตามประสิทธิภาพของ Rich Media แบบกำหนดเอง คุณยังสามารถติดตามประสิทธิภาพของเนื้อหา Rich Media แบบกำหนดเองที่คุณสร้างและอัปโหลดไปยัง Pushwoosh เป็นไฟล์ ZIP ได้ คุณสามารถติดตามว่าผู้คนโต้ตอบกับ Rich Media ของคุณได้อย่างไรโดย: * การคลิกปุ่ม * การคลิกลิงก์ * การส่งแบบฟอร์ม เพื่อให้ Pushwoosh สามารถติดตามการโต้ตอบเหล่านี้ได้: 1. เพิ่มแอตทริบิวต์ "id" ให้กับแต่ละองค์ประกอบที่คุณต้องการติดตาม ตัวอย่างเช่น: **เพื่อติดตามการคลิกลิงก์:** ```html … ``` **เพื่อติดตามการส่งแบบฟอร์ม:** ```html
…
``` **เพื่อติดตามการคลิกปุ่ม:** ```html // type="button" is required ``` 2. เพิ่มลิงก์ไปยังไฟล์ JavaScript จาก CDN ที่ส่วนท้ายของแท็ก: ```html ``` ## แนวทางปฏิบัติที่ดีที่สุดสำหรับองค์ประกอบที่กำหนดเองใน Rich media ### จัดการสไตล์ CSS อย่างระมัดระวัง ตรวจสอบให้แน่ใจว่าสไตล์ CSS ของคุณมีความเฉพาะเจาะจงเพื่อหลีกเลี่ยงความขัดแย้งกับสไตล์ของ Rich Media Editor การใช้สไตล์ที่มีความเฉพาะเจาะจงต่ำ เช่น สไตล์ที่ใช้กับชื่อแท็กหรือชื่อคลาสทั่วไป อาจส่งผลต่อลักษณะที่ปรากฏของ Rich Media Editor ทางที่ดีที่สุดคือเก็บสไตล์ของคุณไว้ในเครื่อง—ห่อเนื้อหาของคุณในคอนเทนเนอร์ที่มี ID หรือคลาสที่ไม่ซ้ำกัน และใช้ตัวระบุนี้ในตัวเลือก CSS ของคุณสำหรับองค์ประกอบย่อย ### รวมไลบรารีภายนอก คุณสามารถรวมไลบรารี CSS หรือ JavaScript (เช่น Font Awesome, Bootstrap, Tailwind CSS เป็นต้น) เพื่อใช้วิธีการ ไอคอน แบบอักษร แอนิเมชัน และอื่นๆ ของไลบรารีเหล่านั้นได้