ข้ามไปยังเนื้อหา
เอกสารสำหรับนักพัฒนา การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

เครื่องมือแก้ไขโค้ด HTML

วิดีโอ Youtube: สร้างเนื้อหาอีเมลของคุณตั้งแต่ต้นด้วย HTML

หากคุณมีความเชี่ยวชาญใน HTML และต้องการเขียนโค้ดของคุณเอง คุณสามารถสร้างอีเมลโดยใช้เครื่องมือแก้ไขโค้ด HTML ของ Pushwoosh ได้

สร้างเนื้อหาอีเมล

Anchor link to

ในการเริ่มสร้างเนื้อหาอีเมล ให้วางโค้ด HTML ของคุณลงในแท็บ HTML เครื่องมือแก้ไขจะแสดงตัวอย่างอีเมลแบบเรียลไทม์ในขณะที่คุณกำลังทำงาน

อีกทางเลือกหนึ่ง คุณสามารถอัปโหลดไฟล์ HTML ได้โดยคลิกที่ Upload HTML File ที่แผงด้านล่าง

หากต้องการเพิ่มความเป็นส่วนตัวให้กับอีเมลของคุณ ให้ใช้ custom tags โดยทำดังนี้:

  1. คลิกที่ไอคอน Tag ที่ด้านล่างของเครื่องมือแก้ไข
  2. เลือก Tag ที่ต้องการ, modifier ของมัน และระบุค่าเริ่มต้นหากจำเป็น
  3. คลิก Insert เพื่อรวม custom tag ในเนื้อหาอีเมลของคุณ
อินเทอร์เฟซการแทรก custom tag ที่แสดงตัวเลือก Tag และค่าเริ่มต้น

หากต้องการรวมอีโมจิในอีเมลของคุณ ให้คลิกไอคอน Emoji ที่ด้านล่างของเครื่องมือแก้ไข

เพิ่มรูปภาพ

Anchor link to

หากต้องการเพิ่มรูปภาพลงในอีเมลของคุณ ให้เพิ่มแท็ก <img> ใน HTML ของคุณและตั้งค่าแอตทริบิวต์ src เป็น URL ของรูปภาพ

หากต้องการใช้รูปภาพซ้ำจาก Media store ของคุณ ให้คัดลอก URL ของรูปภาพจากที่นั่นแล้ววางลงในแอตทริบิวต์ src ดู คัดลอก URL ของรูปภาพ สำหรับขั้นตอน

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

แทนที่ YOUR-MEDIA-STORE-URL ด้วย URL ที่คุณคัดลอกมาจาก Media store

ใช้การแปลภาษา (Localization)

Anchor link to

Localization ช่วยให้คุณสามารถมอบประสบการณ์ที่เป็นส่วนตัวให้กับผู้ใช้ในภาษาต่างๆ ได้

ในเครื่องมือแก้ไขโค้ด HTML คุณสามารถใช้ localization โดยการกำหนดภาษาเริ่มต้นและเพิ่มตัวเลือกภาษาหลายภาษา ตัวอย่างเช่น คุณสามารถตั้งค่าข้อความเริ่มต้นเป็นภาษาอังกฤษแล้วเพิ่มคำแปลเป็นภาษาเยอรมันและสเปน สิ่งนี้ช่วยให้แน่ใจว่าเนื้อหาอีเมลของคุณปรับให้เข้ากับความต้องการทางภาษาของผู้ใช้แต่ละคน

ด้านล่างนี้คือตัวอย่างวิธีการจัดโครงสร้างข้อมูล localization ของคุณ ซึ่งใช้ภาษาอังกฤษเป็นภาษาเริ่มต้นและมีคำแปลเป็นภาษาเยอรมันและสเปน

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

เมื่อข้อมูล localization ของคุณมีโครงสร้างและถูกเพิ่มใน Localization Tab ของเครื่องมือแก้ไขแล้ว ให้รวมเข้ากับเนื้อหา HTML ของคุณโดยใช้ placeholders ตัว placeholders จะแทรกข้อความที่แปลแล้วลงในเนื้อหาของคุณแบบไดนามิกตามความต้องการทางภาษาของผู้ใช้ นี่คือวิธีการนำไปใช้ใน HTML ของคุณ

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

ลองพิจารณาสถานการณ์นี้: คุณกำลังโฆษณาส่วนลดสำหรับกาแฟเบลนด์ในช่วงเวลาจำกัด โดยใช้โครงสร้าง localization ที่กล่าวถึงข้างต้น คุณสามารถสื่อสารข้อความโปรโมชั่นของคุณได้อย่างมีประสิทธิภาพไปยังผู้ใช้ที่พูดภาษาต่างๆ โค้ด HTML สำหรับโปรโมชั่นของคุณอาจมีลักษณะดังนี้:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>


  </div>
</body>
</html>

ด้วยการตั้งค่านี้ หากภาษาของผู้ใช้เป็นภาษาเยอรมัน พวกเขาจะเห็นอีเมลเป็นภาษาเยอรมัน ผู้ใช้ที่เลือกรับอีเมลเป็นภาษาอังกฤษจะเห็นเป็นภาษาอังกฤษ ส่วนผู้ที่เลือกรับเป็นภาษาสเปนจะได้รับเป็นภาษาสเปน สิ่งนี้ช่วยให้แน่ใจว่าผู้รับทุกคนได้รับข้อความของคุณในภาษาที่ต้องการ

แทรกและรวมบล็อกเนื้อหาอีเมล

Anchor link to

Pushwoosh ช่วยให้คุณสามารถรวมเนื้อหาอีเมลโดยการแทรกเนื้อหาอีเมลชิ้นหนึ่งเข้าไปในอีกชิ้นหนึ่ง ซึ่งทำให้ง่ายต่อการนำองค์ประกอบต่างๆ เช่น ส่วนหัว ส่วนท้าย หรือบล็อกเนื้อหาเฉพาะกลับมาใช้ใหม่ในอีเมลต่างๆ

ตัวอย่างเช่น หากคุณมี เนื้อหาอีเมล A (ส่วนหัว) และ เนื้อหาอีเมล B (จดหมายข่าว) คุณสามารถแทรก เนื้อหาอีเมล A ลงใน เนื้อหาอีเมล B ได้โดยไม่ต้องคัดลอกเนื้อหาด้วยตนเองทุกครั้ง

ไวยากรณ์ (Syntax)

Anchor link to

ในการแทรกเนื้อหาชิ้นหนึ่งเข้าไปในอีกชิ้นหนึ่ง ให้ใช้ไวยากรณ์ต่อไปนี้:

{% email_content "AAAAA-BBBBB" %}

โดยที่ “AAAAA-BBBBB” คือ ID ของเนื้อหาอีเมลที่คุณต้องการแทรก คุณสามารถค้นหา ID ได้ที่ใต้ชื่อเนื้อหาในรายการเนื้อหาอีเมลของคุณ

การแสดง ID เนื้อหาอีเมลที่แสดงชื่อเนื้อหาและตัวระบุที่ไม่ซ้ำกัน

ตัวอย่าง

สมมติว่าคุณมีเนื้อหาสองชิ้น:

  • เนื้อหาส่วนหัว (ID: “AAAAA-BBBBB”) พร้อมดีไซน์ส่วนหัวที่กำหนดไว้ล่วงหน้า
  • เนื้อหาจดหมายข่าว ที่คุณต้องการรวมส่วนหัวเข้าไป

ในการแทรกส่วนหัวลงในจดหมายข่าว คุณจะใช้สิ่งต่อไปนี้:

{% email_content "AAAAA-BBBBB" %}

สิ่งนี้ช่วยให้คุณสามารถนำส่วนหัวที่กำหนดไว้ล่วงหน้ากลับมาใช้ใหม่ในแคมเปญอีเมลหลายๆ แคมเปญได้อย่างง่ายดาย ซึ่งช่วยประหยัดเวลาและรับประกันความสอดคล้องกันในอีเมลของคุณ

เพิ่มลิงก์ยกเลิกการสมัคร

Anchor link to

รวมลิงก์ยกเลิกการสมัครในอีเมลของคุณเพื่อให้ผู้รับสามารถเลือกไม่รับได้ตามกฎระเบียบและความต้องการของพวกเขา Pushwoosh มีตัวแปรสามตัวที่คุณสามารถใช้ใน HTML ของคุณได้

ลิงก์ยกเลิกการสมัคร

Anchor link to

เพิ่มลิงก์นี้เพื่อให้ผู้ใช้สามารถเลือกไม่รับข้อความที่พวกเขาได้รับ:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

ตัวแปรจะถูกแทนที่ด้วย URL การยกเลิกการสมัครของ Pushwoosh เมื่อคุณส่งอีเมล

  • เมื่อเปิดใช้งานศูนย์การตั้งค่าการสมัครรับข้อมูล ผู้รับจะถูกยกเลิกการสมัครเฉพาะจากหมวดหมู่ที่กำหนดให้กับอีเมลนั้น (เช่น จดหมายข่าว) หน้าจอยืนยันจะปรากฏขึ้นซึ่งพวกเขาสามารถ สมัครรับข้อมูลอีกครั้ง ในหมวดหมู่นั้นหรือ จัดการการตั้งค่า เพื่อปรับหมวดหมู่อีเมลทั้งหมด เรียนรู้เพิ่มเติม

  • เมื่อไม่ได้เปิดใช้งานศูนย์การตั้งค่าการสมัครรับข้อมูล ผู้รับจะยกเลิกการสมัครจากอีเมลการตลาดทั้งหมด

การคลิกจะถูกนับในอัตราการยกเลิกการสมัครสำหรับข้อความนั้นใน Message History

ยกเลิกการสมัครจากทุกหมวดหมู่

Anchor link to

เพิ่มลิงก์ที่ยกเลิกการสมัครผู้ใช้จากทุกหมวดหมู่อีเมลในครั้งเดียว:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>

ลิงก์ศูนย์การตั้งค่า

Anchor link to

เพิ่มลิงก์โดยตรงไปยัง ศูนย์การตั้งค่า ที่ผู้ใช้สามารถจัดการหมวดหมู่ที่พวกเขาได้รับ:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>

เรียนรู้ว่าศูนย์การตั้งค่าทำงานอย่างไร

ภาพหน้าจอด้านล่างแสดงส่วนท้ายที่ใช้ลิงก์ทั้งสามประเภท

ตัวอย่างส่วนท้ายอีเมลที่มีลิงก์ยกเลิกการสมัครทั้งสามประเภท: Unsubscribe, Manage preferences, Unsubscribe from all emails

บันทึกเนื้อหาอีเมล

Anchor link to

หลังจากที่คุณสร้างอีเมลเสร็จแล้ว ให้คลิกปุ่ม Save ที่ด้านบนของเครื่องมือแก้ไข

กล่องโต้ตอบบันทึกเนื้อหาอีเมลที่แสดงช่องชื่อและป้ายกำกับ

ในหน้าต่างใหม่ที่ปรากฏขึ้น ให้ตั้งชื่อที่ชัดเจนให้กับอีเมลของคุณ ซึ่งอาจเป็นชื่อเดียวกับหัวเรื่องของคุณ และสร้างป้ายกำกับเพื่อช่วยให้คุณค้นหาได้ง่ายในรายการอีเมลของคุณ

หากคุณยังไม่ได้ ตั้งค่ารายละเอียดผู้ส่ง อย่าลืมทำด้วย จากนั้นคลิก Save

ตอนนี้เนื้อหาอีเมลของคุณพร้อมแล้ว สามารถใช้ในแคมเปญอีเมลได้ เรียนรู้เพิ่มเติม

ส่งอีเมลทดสอบ

Anchor link to

ก่อนที่จะส่งแคมเปญอีเมลของคุณ คุณสามารถส่งอีเมลทดสอบเพื่อดูตัวอย่างว่าเนื้อหาจะปรากฏในกล่องจดหมายของผู้รับอย่างไร ซึ่งช่วยให้คุณสามารถตรวจสอบเค้าโครง เนื้อหา และองค์ประกอบส่วนบุคคลใดๆ เพื่อให้แน่ใจว่าถูกต้องก่อนที่จะสรุปแคมเปญ หากจำเป็น ให้ปรับเนื้อหาตามผลการทดสอบ

ในการส่งอีเมลทดสอบ ให้คลิก Test email ในเครื่องมือแก้ไขอีเมล

ปุ่ม Test email ในอินเทอร์เฟซเครื่องมือแก้ไขอีเมล

ในหน้าต่างที่เปิดขึ้น:

  1. ในช่อง Email address ให้ป้อนที่อยู่อีเมลที่คุณต้องการรับอีเมลทดสอบ

หากยังไม่เสร็จสิ้น KYC คุณจะต้องเลือกที่อยู่อีเมลที่ตรวจสอบแล้วจากรายการที่อยู่ทดสอบแทนการป้อนอีเมล

ดรอปดาวน์การเลือกที่อยู่อีเมลทดสอบที่ตรวจสอบแล้ว
  1. หากอีเมลของคุณมีเนื้อหาแบบไดนามิก (placeholders สำหรับข้อมูลส่วนบุคคล) ให้เพิ่มค่าตัวอย่างเพื่อวัตถุประสงค์ในการทดสอบ

ตัวอย่างเช่น:

  • Age (integer): ป้อนตัวเลขเพื่อแทนที่ placeholder อายุ (เช่น 21)
  • FirstName (string): ป้อนชื่อตัวอย่าง (เช่น David)

ค่าเหล่านี้จะแทนที่ข้อมูลผู้รับจริงในอีเมลทดสอบ ทำให้คุณสามารถตรวจสอบได้ว่าเนื้อหาแบบไดนามิกปรากฏอย่างไร

  1. เมื่อคุณกรอกรายละเอียดที่จำเป็นแล้ว ให้คลิก Send test email เพื่อส่งข้อความทดสอบไปยังที่อยู่อีเมลที่ให้ไว้
กล่องโต้ตอบยืนยันการส่งอีเมลทดสอบพร้อมช่องข้อมูลตัวอย่าง