如何使用 Gmail 傳送自訂 HTML

HTML 電子郵件已成為現代電子郵件行銷的關鍵組成部分。 它們可讓您建立具有視覺吸引力和互動式的電子郵件訊息，使您的電子郵件更具吸引力和效果。 它們對企業至關重要，因為它們可以以純文字無法做到的方式突出顯示產品、促銷和品牌。 它們還可以更好地追蹤和分析，幫助您了解收件人如何與您的電子郵件互動。

過去，Gmail允許使用者在電子郵件編輯器中直接輸入和編輯HTML程式碼。 此功能受到想要廣泛個人化和設計電子郵件的人的青睞。 然而，為了增強安全性並簡化使用者體驗，Gmail 決定刪除在電子郵件編輯器中直接輸入 HTML 程式碼的功能。

這項變更促使用戶探索透過 Gmail 發送自訂 HTML 電子郵件的替代方法，我們將在本文中深入探討。

跳至此處的某個部分，或閱讀完整指南：

• 透過 Gmail 發送自訂 HTML 電子郵件
• 將渲染的 HTML 直接複製到 Gmail 中
• 使用自訂 HTML 模板的限制
• 純文字電子郵件與 HTML 電子郵件
• 使用 Mailmeteor 發送個人化 HTML 電子郵件！

透過 Gmail 發送自訂 HTML 電子郵件

Gmail 使用所見即所得 (WYSIWYG) 編輯器，這意味著直接傳送原始 HTML 程式碼不是一個可行的選擇。 因為收件者實際上會看到原始 HTML 程式碼而不是呈現的文件。

例如，看看這個模擬電子郵件範本。

曾經有一段時間，您可以直接在 Gmail 中製作類似的內容，但如果您嘗試在 Gmail 編輯器中複製並貼上 HTML 程式碼，則會發生以下情況：

由於 Gmail 使用所見即所得編輯器，這會導致收件人收到與您在此處看到的完全相同的內容，即一封以純文字編寫的 HTML 程式碼的電子郵件：

然而，有一個實用的解決方法。 使用者可以將呈現的 HTML 電子郵件複製並貼上到 Gmail 編輯器中以發送自訂 HTML 電子郵件。 透過此方法，您可以在 Gmail 的限制範圍內建立具有視覺吸引力的自訂電子郵件。

將渲染的 HTML 直接複製到 Gmail 中

這種方法實際上比看起來簡單得多，您只需在瀏覽器中打開電子郵件模板，然後將其所有內容複製並貼上到 Gmail 編輯器中即可。 這是您需要做的：

1. 準備您的 HTML 程式碼
   • 開啟文字編輯器，例如記事本 (Windows) 或 TextEdit (Mac)。
   • 將 HTML 程式碼寫入或貼上到文字編輯器中。 程式碼可以包含文字、圖像、連結和格式，就像標準網頁一樣，但有一些限制，我們將在稍後討論。
   • 使用“.html”副檔名儲存文件，例如“template.html”。
2. 在網頁瀏覽器中預覽
   • 雙擊剛剛建立的 HTML 文件，在預設 Web 瀏覽器中將其開啟。 這將使您的電子郵件與收件人看到的完全一樣。
   • 如果您願意，您可以返回文字編輯器並更改內容，只需記住在完成更改後保存文件，並刷新瀏覽器頁面以更新您的更改。
3. 選擇全部並複製
   • 在瀏覽器中，按 Ctrl+A (Windows) 或 Cmd+A (Mac) 選擇 HTML 電子郵件中的所有內容。
   • 接下來，按 Ctrl+C (Windows) 或 Cmd+C (Mac) 複製所選內容。 您也可以右鍵單擊並從選單中選擇“複製”。
4. 貼到 Gmail
   • 開啟 Gmail 並開始撰寫新電子郵件。
   • 按一下要插入 HTML 電子郵件內容的電子郵件正文。 您無法在主題行中插入 HTML，因此您唯一的選擇是電子郵件正文。
   • 現在，按 Ctrl+V (Windows) 或 Cmd+V (Mac) 貼上從瀏覽器複製的內容。 或者您可以右鍵單擊並從選單中選擇“貼上”。
   • HTML 電子郵件應直接貼上到 Gmail 編輯器中，您應該會看到它的呈現方式如下圖所示。
5. 傳送電子郵件
   • 使用主題、收件者以及任何其他文字或元素來完成您的電子郵件。
   • 按一下「傳送」按鈕，您的自訂 HTML 電子郵件將傳送給收件者。

如果一切順利，您的收件者將收到完美呈現的電子郵件，就像您建立的 .html 檔案一樣。 我們建議您先將電子郵件傳送給自己，然後再將其傳送給目標收件人，以確保 HTML 程式碼中沒有錯誤。

使用 HTML 編輯器瀏覽器擴充

對於希望更好地控制電子郵件的原始 HTML 並熟悉手動編輯的精通技術的用戶來說，使用 HTML 編輯器擴充功能是一個可行的解決方案。

這些擴充功能廣泛適用於 Google Chrome 等流行瀏覽器，為經驗豐富的用戶提供了在透過 Gmail 發送電子郵件之前手動編寫和編輯 HTML 程式碼的方法。 cloudHQ 提供的免費 mail HTML 編輯器是 Chrome 用戶最喜歡的選項之一。

只需安裝該擴充程序，然後前往 Gmail 即可存取分割畫面 HTML 編輯器，您可以在其中進行變更並即時查看其效果，這一切都可以在 Gmail 帳戶中輕鬆完成。

使用自訂 HTML 模板的限制

不幸的是，即使您有能力編寫自己的 HTML 程式碼，在開始此旅程之前您也需要了解一些限制。 以下是您需要了解的內容：

和字體說再見！

遺憾的是，Gmail 不提供將自訂網頁字型匯入 HTML 電子郵件的方法。 您只能使用標準字體，這可能會限制您的設計選擇和品牌機會。

如果您確實需要在某個地方使用自己的品牌，您別無選擇，只能使用帶有文字的圖像。 但您也不能將這些圖像作為電子郵件本身的一部分發送，這將引出我們的下一點。

圖片必須公開託管

您無法在電子郵件中連結到電腦上的圖像並將其發送給其他人，它可能會顯示在您的本機瀏覽器中，但當您將其新增至 Gmail 編輯器時，它將拒絕加載。

在我們的範例模板中，我們使用了佔位符中的圖像並放置了一隻小貓，因為兩者都是公開可用的。 您的圖像也必須公開可用並託管在互聯網上的某個位置。 這可以是您自己的網站、公用 Google 雲端硬碟資料夾或線上圖像分享網站。

不支援外部樣式表

外部樣式表在您的電子郵件中不起作用。 如果您精通 CSS，請考慮使用嵌入式 CSS 和內聯樣式來實現電子郵件所需的格式和樣式。

此限制可能會增加設計過程的複雜性，因為您需要將所有樣式直接包含在 HTML 程式碼中。 同時，讓您的樣式盡可能簡單，您永遠不知道收件人正在使用什麼瀏覽器或電子郵件應用程序，因此最好堅持使用標準 CSS 樣式以獲得最大相容性。

堅持基於表格的佈局

雖然許多現代 HTML 使用<div>元素進行佈局和樣式設計，但電子郵件仍然使用良好的舊式基於表格的佈局。 因此，如果您需要建立任何網格元素或框，則需要使用各種表格標籤，例如<table> 、 <tr>和 `<td> 。

這是因為並非每個人都使用相同的電子郵件服務提供商，因此即使 Gmail 開始支援新功能，仍然會有無數其他人落後。 渲染不當的電子郵件會給人留下不好的第一印象，因此最好堅持對每個人都有效的方式，並專注於相關電子郵件的實際內容。

純文字電子郵件與 HTML 電子郵件

發送純文字電子郵件和 HTML 電子郵件之間的選擇對於確定訊息的有效性和影響力起著關鍵作用。 兩種格式都有各自的優勢，可以滿足獨特的需求和偏好。

讓我們強調一下這兩種電子郵件格式之間的主要區別：

雖然純文字電子郵件以其簡單性和通用相容性而聞名，但 HTML 電子郵件為創造力和參與度提供了更廣泛的畫布。

使用 Mailmeteor 發送個人化 HTML 電子郵件！

Mailmeteor 是一款功能強大的電子郵件行銷工具，可簡化透過 Gmail 向多個收件者傳送個人化 HTML 電子郵件的過程。 這個方便的外掛程式與您的 Gmail 和 Google 表格無縫集成，讓您輕鬆建立和發送個人化電子郵件。

• 電子郵件個人化：透過使用 Google 試算表中資料的自訂合併標籤，或使用包含名稱、公司詳細資料或任何其他自訂變數等欄位的網路平台，建立高度個人化的電子郵件。
• HTML 範本編輯器：利用進階 HTML 編輯器並將個人化資料直接插入您的電子郵件範本中。
• 電子郵件追蹤：在電子郵件離開郵箱後對其進行跟踪，查看收件人是否打開它們並執行 A/B 測試並提供可靠的回饋。
• 範本庫：造訪預先設計的電子郵件範本庫或建立您自己的 HTML 電子郵件範本以在您的行銷活動中使用。