สร้างโฆษณา Gmail ด้วย HTML ที่กำหนดเอง

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

บทความนี้จะอธิบายวิธีกำหนดค่าและอัปโหลดโฆษณา Gmail ที่กำหนดเอง

ก่อนเริ่มต้น

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

 

ตอนนี้ผู้ใช้ส่วนใหญ่ใช้ประสบการณ์การใช้งานแบบใหม่ของ Google Ads เพื่อจัดการบัญชีแล้ว หากคุณยังใช้ประสบการณ์การใช้งานแบบเดิมของ AdWords อยู่ โปรดเลือกก่อนหน้าที่อยู่ด้านล่าง ดูข้อมูลเพิ่มเติม

วิธีการ

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

ขีดจำกัดขนาดโดยรวมของโฆษณามีดังนี้

  • โฟลเดอร์ ZIP ทั้งโฟลเดอร์: <1.25 MB
  • จำนวนไฟล์: <100 ไฟล์
  • ขนาดไฟล์: <500KB

วิธีสร้างโฆษณาแบบยุบ

สำหรับโฆษณาแบบยุบ คุณจะต้องใส่ 2 ไฟล์ลงในโฟลเดอร์ ZIP ได้แก่

  • รูปภาพโลโก้ (ตั้งชื่อว่า "logo.png" "logo.jpg" หรือ "logo.gif")
  • ไฟล์ข้อความ (ตั้งชื่อว่า "teaser.txt")

ข้อกำหนดรูปภาพโลโก้

ไฟล์ต้องชื่อ "logo.png" "logo.jpg" หรือ "logo.gif" เท่านั้น และรูปแบบไฟล์ต้องเป็น PNG, JPG หรือ GIF

  • ขนาดรูปภาพโลโก้: < 144 x 144
  • ขนาดไฟล์: < 500KB
  • รูปแบบไฟล์: PNG, JPG หรือ GIF (ไม่เคลื่อนไหว)

รูปภาพโลโก้คือไอคอน กราฟิก หรือโลโก้แบรนด์ขนาดเล็ก

ภาพนี้จะแสดงเป็นรูปสี่เหลี่ยมจัตุรัสขนาด 50 x 50 บนอุปกรณ์ที่มีหน้าจอความละเอียดปกติ แต่เรายอมรับภาพขนาดสูงสุด 144 x 144 เพื่อภาพที่ชัดเจนมากขึ้นบนบางหน้าจอ 

ข้อกำหนดไฟล์ข้อความ

ไฟล์ต้องชื่อ "teaser.txt" เท่านั้น และรูปแบบไฟล์ต้องเป็น TXT ต่อไปนี้เป็นตัวอย่างไฟล์ข้อความที่จัดรูปแบบอย่างถูกต้อง

ผู้ลงโฆษณา: ชื่อธุรกิจ
หัวข้อ: ลดทุกอย่าง 20% ที่ชื่อธุรกิจ
รายละเอียด: ซื้อสินค้าใหม่ราคาถูก
URL ที่แสดง: www.example.com
หน้า Landing Page: https://www.example.com/sale 

หมายเหตุ: โปรดทำตามตัวอย่างทุกประการ คุณต้องใส่ทั้งหมวดหมู่ (เช่น "ผู้ลงโฆษณา") และข้อมูลเฉพาะเจาะจงของคุณ ตารางด้านล่างแสดงจำนวนอักขระสูงสุดและแนวทางเพิ่มเติมเกี่ยวกับข้อมูลที่ต้องรวม

  จำนวนอักขระสูงสุด ข้อมูลที่ต้องรวม
ผู้ลงโฆษณา 20 ชื่อหรือโดเมนบริษัทของคุณ
หัวข้อ 25 หัวข้ออาจมีข้อเสนอพิเศษ เปอร์เซ็นต์ส่วนลด หรือการประกาศที่ดึงดูดความสนใจ
รายละเอียด 100 รายละเอียดอาจเป็นสรุปสั้นๆ หรือคำกระตุ้นการตัดสินใจ
URL ที่แสดง 32 URL ของคุณที่จะแสดงในโฆษณา
หน้า Landing Page ไม่มีขีดจำกัด URL การเปลี่ยนเส้นทางทีเซอร์ซึ่งใช้เป็น URL ปลายทางสำหรับการคลิกที่ "URL แบบสั้นที่แสดงผู้ส่ง" เมื่อเปิดโฆษณาแบบขยาย คุณสามารถเพิ่ม URL ติดตามผลการคลิกแบบคงที่ในช่องนี้ได้ นี่เป็นหน้าที่ผู้ใช้จะไปถึงหลังจากคลิก URL ที่แสดง

 

วิธีสร้างโฆษณาแบบขยาย

สำหรับโฆษณาแบบขยาย คุณจะต้องใส่ไฟล์ HTML 1 ไฟล์และโฟลเดอร์รูปภาพ 1 โฟลเดอร์ลงในโฟลเดอร์ ZIP

  • โฟลเดอร์รูปภาพ (ตั้งชื่อว่า "Images") ที่มีไฟล์รูปภาพสำหรับโฆษณาแบบขยาย
  • ไฟล์ HTML ตั้งชื่อว่า "index.html"

ข้อกำหนดโฟลเดอร์รูปภาพ

  • โฆษณาต้องมีรูปภาพอย่างน้อย 1 รูปและไม่เกิน 100 รูป ถ้าต้องการฝังวิดีโอในโฆษณาแบบขยาย ให้ข้ามไปที่ส่วนวิดีโอด้านล่าง
  • ความกว้างสูงสุดต่อภาพ: 650px
  • ความสูงสูงสุดต่อภาพ: 1000px (หมายเหตุ: เพื่อให้โฆษณามีประสิทธิภาพที่สุด เราขอแนะนำให้ใช้ความสูงไม่เกิน 650px สำหรับผืนผ้าใบโฆษณาทั้งผืนซึ่งประกอบด้วยข้อความและรูปภาพทั้งหมด)

ข้อกำหนดไฟล์ HTML

รายละเอียดทางเทคนิค

  • URL: ต้องมี URL ที่สมบูรณ์อย่างน้อย 1 รายการ (มีได้สูงสุด 15 รายการ) และอักขระพิเศษทั้งหมดต้องเข้ารหัส (เช่น การเว้นวรรคหรือ #)
  • การจัดรูปแบบ: การควบคุมการจัดวางโดยใช้ตาราง HTML มาตรฐานเพื่อให้มีการนำเสนอที่สอดคล้องกันในอุปกรณ์ต่างๆ
  • การติดตาม: URL ติดตามผลแบบคงที่สามารถใช้ในการติดตามการคลิกภายนอกได้ ไม่อนุญาตให้ใช้พิกเซลการติดตามการแสดงผลและ URL ติดตามผลแบบไดนามิก หากคุณใช้เทมเพลต "โฆษณา HTML ที่กำหนดเองของ Gmail" อย่าลืมเพิ่ม URL ติดตามผลที่คุณต้องการใช้ในไฟล์ index.html รวมทั้งในไฟล์ teaser.txt
  • มาร์กอัป: รองรับ HTML (ใช้การเข้ารหัส UTF8), แท็ก HTML5 บางแท็ก ( "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR") และ CSS บางส่วน (แอตทริบิวต์สไตล์ของแท็กเท่านั้น เช่น <div style="color: black" >)

มาร์กอัปที่ไม่อนุญาต

  • JavaScript: แท็ก <script> จะถูกลบออกจากโฆษณาโดยอัตโนมัติ
  • สไตล์ชีต: แท็ก <link> จะถูกลบออกจากโฆษณาโดยอัตโนมัติ
  • Flash
  • HTML5: รองรับเฉพาะแท็ก "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR"
  • เสียง
  • iframe
  • ภาพเคลื่อนไหว: GIF

CSS ที่รองรับ

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin Pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

ใส่วิดีโอลงในไฟล์ HTML ของโฆษณาแบบขยาย

  1. วิธีใส่วิดีโอ

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

    คำแนะนำ: หากต้องการใส่วิดีโอจาก YouTube คุณต้องปรับแต่งโค้ดลิงก์ YouTube แหล่งที่มาของรูปภาพ และข้อความที่แสดงให้เหมาะกับโฆษณาของคุณ ตัวอย่างเช่น

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="วิดีโอ Gmail"></a>

    หมายเหตุ: เมื่อคุณดูตัวอย่างโฆษณาใน Google Ads วิดีโอ YouTube จะไม่แสดงหรือเล่นในไลท์บ็อกซ์

  2. วิธีใส่วิดีโอในแท็บใหม่

    ถ้าคุณต้องการให้วิดีโอเล่นบน YouTube ในแท็บใหม่ แทนที่จะเป็นไลท์บ็อกซ์ ให้ตั้งค่าคลาสเป็น "nonplayable"

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

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="วิดีโอ Gmail"></a>

  3. สำคัญ: เพิ่มปุ่ม "เล่น" ในรูปภาพตัวอย่าง

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

ลิงก์ที่เกี่ยวข้อง

ข้อมูลนี้มีประโยชน์ไหม
เราจะปรับปรุงได้อย่างไร
ก่อนหน้า ใหม่

หากต้องการความช่วยเหลือเพิ่มเติม

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