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

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

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

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

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

Anchor link to

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

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

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

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

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

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

Anchor link to

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

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

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

{
  "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 Tab ของตัวแก้ไขแล้ว ให้รวมเข้ากับเนื้อหา HTML ของคุณโดยใช้ placeholders โดย placeholders จะแทรกข้อความที่แปลแล้วลงในเนื้อหาของคุณแบบไดนามิกตามการตั้งค่าภาษาของผู้ใช้ นี่คือวิธีการนำไปใช้ใน HTML ของคุณ

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

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

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

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

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

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

ตัวอย่างส่วนท้ายของอีเมลพร้อมลิงก์ยกเลิกการสมัครทั้งสามประเภท: ยกเลิกการสมัคร, จัดการการตั้งค่า, ยกเลิกการสมัครจากอีเมลทั้งหมด

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

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 เพื่อส่งข้อความทดสอบไปยังที่อยู่อีเมลที่ให้ไว้
กล่องโต้ตอบยืนยันการส่งอีเมลทดสอบพร้อมช่องข้อมูลตัวอย่าง