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

สร้างเนื้อหาอีเมลด้วยเครื่องมือแก้ไขโค้ด HTML

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

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

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

Anchor link to

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

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

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

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

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

ใช้การแปลเป็นภาษาท้องถิ่น (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 ช่วยให้คุณสามารถรวมเนื้อหาอีเมลโดยการแทรกเนื้อหาอีเมลชิ้นหนึ่งเข้าไปในอีกชิ้นหนึ่ง ซึ่งทำให้ง่ายต่อการนำองค์ประกอบต่างๆ เช่น ส่วนหัว (headers) ส่วนท้าย (footers) หรือบล็อกเนื้อหาเฉพาะมาใช้ซ้ำในอีเมลต่างๆ

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

ไวยากรณ์ (Syntax)

Anchor link to

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

{% email_content "AAAAA-BBBBB" %}

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

ตัวอย่าง

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

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

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

{% email_content "AAAAA-BBBBB" %}

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

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

Anchor link to

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

เพิ่ม ลิงก์ยกเลิกการสมัคร (Unsubscribe link) ไปยังอีเมลของคุณดังนี้:

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

ค่า attribute %%PW_EMAIL_UNSUBSCRIBE%% จะถูกแทนที่ด้วยลิงก์ Unsubscribe ของ Pushwoosh ในขณะที่คุณส่งข้อความอีเมล เมื่อผู้รับคลิกลิงก์ พวกเขาจะยกเลิกการรับอีเมลของคุณและจะถูกนับในอัตราการยกเลิกการสมัครสำหรับข้อความอีเมลนั้นๆ ใน ประวัติข้อความ (Message History)

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

Anchor link to

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

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

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

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

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

Anchor link to

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

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

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

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

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

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

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

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

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

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