実際に完全に機能するカスタムMailchimpテンプレートを作成する方法

公開: 2021-06-22

すべての電子メールを最初からコーディングするには時間がかかりすぎるため、再利用可能で実証済みの電子メールテンプレートを使用すると、ワークフローの効率が大幅に向上します。ただし、State of Email Service Providersのレポートによると、2番目に人気のあるEメールサービスプロバイダー（ESP）であるMailchimpの場合でも、独自のテンプレートを作成すること自体が冒険になる可能性があります。

メールを作成するための好ましい方法があるかもしれませんが、Mailchimpのカスタムテンプレートに関しては、テンプレートを機能させるために時間を無駄にしないように、いくつかの非常に具体的なガイドラインに従うことが重要です。そして、私はこれが私自身何時間も失ったと言います！

カスタムMailchimpテンプレートの作成について説明するときは、コードの構造、ボタンの作成方法、さらには画像のサイズまで、すべてMailchimpの技術的な観点から取り組む必要があることに注意してください。

そのため、このブログ投稿でMailchimpや他の専門家と協力して、Mailchimpテンプレートが実際に完全に機能するようにしました。

Mailchimpのビルド済みテンプレートとカスタムテンプレートの違い

Mailchimpには、メールの作成に使用できるテンプレートの充実したライブラリがあります。それらのそれぞれは、ドラッグアンドドロップエディタと複数の電子メールモジュール内で編集可能であり、コンテンツをレイアウトするために選択できます。

では、なぜカスタムテンプレートを作成するのでしょうか。

Mailchimpのテンプレートは高度に編集可能であるため、どのブランドでも独自のブランドカラーとスタイルでテンプレートを使用できます。これにより、それらの使用状況を監視し、ブランドのアイデンティティを電子メール間で一貫性を保つことが困難になる可能性があります。カスタムテンプレートを作成すると、テンプレートに組み込むスタイルの多くが変更されないようになります。

また、カスタムテンプレートの編集環境も異なります。ドラッグアンドドロップエディタはありません。代わりに、実装するテンプレート言語に応じて、複製、切り替え、または削除できるモジュールと要素を作成します。これは、不要なレイアウトや編集を防ぐもう1つの方法です。

カスタムMailchimpテンプレートをコーディングする方法

独自のMailchimpメールテンプレートを作成する準備はできましたか？あなたがそれを正しく行うために必要なヒントとコツを読み続けてください。

あなたの目標とエンドユーザーについて考えてください

始める前に、まずテンプレートの目的とそれを使用する人々について考えることが重要です。たとえば、多くの詳細と柔軟性を備えたテンプレートが必要になる場合があります。または、チームのあまり技術的でないメンバーが採用するのは、シンプルで簡単である必要があるかもしれません。

メールマーケティングコンサルタント兼マーケティングモチベーターのJoolzJosephは、次のように述べています。

ジュールズ・ジョセフ

「これで何を達成しようとしているのか、自問してみてください。」

複数のメールタイプに使用できる包括的なテンプレートなので、さまざまなブロックで多くの柔軟性が必要ですか？または、プロモーションテンプレート、オンボーディングシリーズ、ニュースレターなど、より厳格なものですか？

適応できるブロックがたくさんあるテンプレートには大きな利点がありますが、多くのオプションに圧倒される可能性がある人にとっては、2つまたは3つの短いテンプレートの方が管理しやすい場合があります。

開始時のこの短い考慮事項により、目標とエンドユーザーを念頭に置いてテンプレートを作成できます。

たとえば、プロモーションテンプレートでは、主な目的と召喚状（CTA）に焦点を当てる必要がありますが、ニュースレターには、すべて異なる複数のCTAが含まれている場合があります。

これはすべて、テンプレートデザインに反映する必要があります。また、オプションが限られている場合、プロモーションを実行している人が関連するコンテンツを簡単にドロップできるようになります。

すべての可能性を捉えた単一のテンプレートを実行すると、ブランドに合ったメールが作成される可能性がありますが、効果はそれほど高くありません。そのため、最初に一歩下がって、達成したいこととテンプレートの種類（またはテンプレート）は、これを行うのに最も役立ちます。」

ヒントをありがとう、Joolz！テンプレートの目標がわかれば、構築に取り掛かることができます。

CSSスタイリングを埋め込む

最初に言及する価値のあることの1つは、プラットフォーム内にテンプレートを保存するときに、Mailchimpが埋め込みCSSスタイルを自動的にインライン化することです。したがって、開発作業を開始すると、すべてのスタイルを埋め込み、コードの膨張を制限する方が簡単な場合があります。

モジュールの行を作成する

コードを構造化するときは、編集可能にしたいブロック、特に並べ替え可能なブロックについて考えてください。これらのブロックは、次のように行内に配置する必要があります。

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

親テーブルを閉じると、このポイントを超えて行を並べ替えることはできなくなります。

ボタンの制限を考慮する

ボタンをコーディングする方法はたくさんあります。ただし、カスタムMailchimpテンプレートで機能するのはパッド付きボタンのみです。これは、編集可能なボタンのアンカータグに適用されていた多くのスタイルが自動的に削除されるためです。 VMLコードの形式と、アンカータグ内に配置するスパンも調整される場合があります。

パディングボタンメソッドは、親テーブルセルにパディングやその他のボタンスタイルを適用する必要があるため、ボタンのテキストのみがクリック可能になることを意味します。 Mailchimpの広範なドキュメントには、ボタンコード（および興味がある場合はその他のHTMLメールの制限）に関する詳細が記載されています。

編集可能なプレースホルダーには正確なサイズの画像を使用する

ボタンのように、画像を編集可能にすると、小さなコードが表示されます。今回、削除されるのは幅と高さを定義するHTML属性です。 Outlookはこれらに依存しており、Mailchimp編集環境では、エディターを使用してこれらの属性を元に戻すまで、画像の実際のサイズもレンダリングされます。

これにより、網膜画像、別名2倍のサイズの画像を使用して、電子メールで縮小するのが少し難しくなります。

テンプレートにコーディングするプレースホルダーには、1倍の画像を使用することをお勧めします。次に、テンプレートをキャンペーンに使用する場合は、プレースホルダーを2x画像（網膜画像）に切り替えて、画像エディターの[設定]タブで幅と高さを定義します。

Mailchimpのテンプレート言語を適用する

テンプレート内で編集可能な領域を定義するには、Mailchimpのテンプレート言語を実装する必要があります。作成するテンプレートの種類に応じて、含める必要のあるものの概要を説明する十分なドキュメントが利用可能です。

複数のブランドで使用される可能性のある高度にカスタマイズ可能なテンプレートの場合、CSSスタイルを編集可能にすることができます。これを行うには、編集可能なスタイルに関するMailchimpのガイドに従ってください。

このウォークスルーの目的のために、編集可能性をコンテンツのみに制限するテンプレートを作成する方法を見ていきます。これを行うには、テンプレート内のHTML要素に次の言語を追加する必要があります。

mc：editは、テンプレート内の特定の要素にコンテンツ編集アクションを提供するために使用されます。 テンプレート内のこのインスタンスごとに一意の名前を使用するようにしてください。

mc：hideableは、テンプレート内の特定の要素に非表示/表示アクションを提供するために使用されます。

mc：labelは、アプリケーション内の編集可能なセクションに名前を付けるために使用されるオプションのタグです。

mc：repeatableは、テンプレート内の特定の要素に複製アクションを提供するために使用されます。

mc：variantは、HTMLの個別のブロックを切り替える方法を提供するために使用されます。

Mailchimpテンプレート言語の詳細については、これが私の頼りになるドキュメントです。

Mailchimpマージタグを含める

テンプレートやキャンペーン内で活用できるマージタグはたくさんあります。適用することをお勧めするタグは次のとおりです。

* | MC_PREVIEW_TEXT | *
このプレビューテキストマージタグをビルドに追加して、キャンペーンのセットアップ中に、プレビューテキストフィールドに追加されたコンテンツが電子メールに挿入されるようにします。プレビューテキストがMailchimp内で機能しなくなった後、空白を作成するために通常Litmusメールに追加するプレビューテキストハック。恐れるな。 Mailchimpは、カスタムテンプレートに対してこれを行う理想的な方法を文書化しています。

* | UNSUB | *
テンプレートのヘッダーやフッターで、このマージタグを登録解除リンクに追加して、ユーザーが選択した場合にリストから自分自身を削除できるようにします。さらに、これは法的要件であるため、これを忘れたくないことは間違いありません。

* | UPDATE_PROFILE | *
加入者に情報を更新したり、好みを管理したりする機会を与えます。

* |アーカイブ| *
このマージタグを「オンラインで表示」リンクに追加して、Webブラウザ内で電子メールを表示する機会を人々に提供します。

テンプレートをMailchimpに追加する方法

テンプレートをコーディングしたので、テンプレートを機能させる準備が整いました。

[キャンペーン]> [メールテンプレート]に移動し、[テンプレートの作成]ボタンをクリックしてテンプレートをインポートします。

テンプレートをMailchimpに取り込む最も簡単な方法は、HTMLと画像を含むzipをアップロードすることです。これは、Mailchimpが画像パスを管理するためです。

Mailchimp：テンプレートの開始点を選択します

テンプレートに名前を付けてzipファイルに移動すると、テンプレートがテンプレートエディターで開きます。ここでは、調整を行ったり、画像やその他のアセットが保存されているコンテンツスタジオにアクセスしたり、テンプレートのレンダリングをテストしたりできます。

このエディターでの作業が終了したら、保存して閉じることができ、テンプレートを使用できるようになります。

テンプレートがMailchimpで機能することを確認してください

HTMLのよくある間違いはたくさんあるので、チーム、クライアント、または他の人に送信して使用する前に、Mailchimpでの編集エクスペリエンスがどのようなものかを確認することをお勧めします。これを行うには、メインメニューの[作成]に移動し、[メール]を選択して、[通常のキャンペーン]を続けます。

件名やプレビューテキストなど、キャンペーンの詳細を追加できます。これにより、マージタグとプレビューテキストコードが正しく実装されていることを確認する機会が得られます。

[メールのデザイン]をクリックすると、使用するテンプレートを選択できます。 [保存されたテンプレート]タブでカスタムテンプレートを見つけます。

Mailchimpでテンプレートを選択します

テンプレートを選択すると、Mailchimp編集環境に移動し、編集可能なすべてのセクションをテストできます。

編集可能な要素を編集するには、その要素をクリックするだけで、右側に編集ペインが表示されます。

Mailchimpテンプレートの要素を編集する

注意事項：コンテンツブロックの再配置が機能しない場合があるため、ブロックをクリックしたときに上下の矢印が付いたアイコンが表示されない場合は、並べ替えるブロックを複製してみてください。移動したいブロックを新しい場所にドラッグしたら、不要な余分なブロックを削除できます。

Mailchimpテンプレートのブロックを再配置する

メールのレンダリングをテストすることを忘れないでください

いつものように、特に電子メールキャンペーンの作成に使用された後は、さまざまな電子メールクライアントがテンプレートをどのようにレンダリングしているかを確認することが非常に重要です。

このようなテストを通じて、テンプレートの問題を特定し、Mailchimpのコード削除の癖に出くわしました。キャンペーンエディタとテンプレートエディタの両方で、[プレビュー]と[テストメールの送信]に移動して、受信トレイまたはLitmusテストアドレスに移動し、完全な自動送信前テストを簡単に行うことができます。

LitmusとMailchimpはいくつかの方法で統合されており、メールを可能な限り徹底的かつ効率的にテストするのに役立ちます。「プレビューモードに入る」に移動し、「受信ボックス」タブを選択して、Mailchimpの受信ボックスプレビュー内でLitmusを利用した電子メールテストを実行します。 Litmus PlusまたはEnterpriseプランを使用すると、ChromeのLitmus拡張機能を使用して構築する際に重要な送信前要素をテストし、LitmusとMailchimpの間でメールを同期する機能など、追加のテストと時間節約の統合にアクセスできます。

すぐに使えるカスタムテンプレートを入手する

すぐに使用できる編集可能なMailchimpテンプレートをお探しの場合は、ご安心ください。

Litmusで作成された無料のMailchimpテンプレート

使い始めるのに役立つように、ダークモードに最適化されたカスタムMailchimpテンプレートを作成しました。繰り返し可能な行、可変コンテンツブロック、Mailchimp対応のボタンがあります。

Mailchimpテンプレートをダウンロード→

Litmusによる無料のMailchimpメールテンプレート

Litmusで作成した無料のMailchimpテンプレート（.zipファイル）を入手してください。次に、コードを掘り下げて、Mailchimpのテンプレートコードを適用して、無料のSubscriberLoveメールテンプレートのミニバージョンをMailchimpで編集できるようにした方法を確認します。

Mailchimpパートナーが作成したメールテンプレート

さらに多くのオプションについては、Mailchimpサービスパートナーによって設計された美しいメールテンプレートを備えたMailchimpマーケットプレイスをチェックしてください。

MailchimpマーケットプレイスのMailchimpテンプレート

新規加入者のオンボーディングであろうと新製品の宣伝であろうと、マーケティング目標に基づいて電子メールテンプレートを検索できます。自分にぴったりのテンプレートを選択して購入し、ブランドに合わせてカスタマイズを開始します。インストールやコーディングは必要ありません。

あなたの完璧なカスタムMailchimpテンプレートが手の届くところにあります

独自の編集可能なテンプレートをコーディングする場合でも、他の人のテンプレートをカスタマイズする場合でも、より効率的なメール作成プロセスに進んでいます。信頼できる、ブランド上のエラーのないメールを作成できます。

Mailchimpテンプレートの見栄えが良いことを確認してください

Litmusを使用して90以上の電子メールクライアント、アプリ、およびデバイスで電子メールをプレビューし、ブランド上でエラーのないサブスクライバーエクスペリエンスを確保します。毎回。

リトマスの無料トライアルを入手→