Klaviyo でカスタム CSS、JavaScript、HTML のトラブルシューティングを行う
このページで学べること
カスタム HTML テンプレートをインポートする場合や、独自のカスタムコード テンプレートを作成する場合に、カスタムコードをトラブルシューティングする方法をご確認ください。
カスタム HTML の使用は、技術に精通したマーケター、または開発者にアクセスできる方にのみおすすめします。弊社製品はカスタム HTML をサポートしていますが、サポートチームは、このドキュメントで扱う一般的なガイダンスの提供を超えて、カスタム テンプレートの構築をお手伝いすることはできません。
データのセキュリティを維持するため、Klaviyo のサポートチームは HTML ファイルを開くことができません。
カスタム HTML と CSS の要素
カスタム HTML テンプレートを作成している場合、メール内で商品フィードは使用できません。
メールをインタラクティブにするために使用される一部のHTMLおよびCSS要素は、すべてのメールクライアントでサポートされているわけではありません。Klaviyoで正しく表示されていても、受信者が使用している受信トレイでカスタムテンプレートをテストしてください。
KlaviyoがCSSを処理できない場合、プレビューの生成に失敗することがあります。CSSの構文を確認し、エラーの原因となっているルールを簡略化してから、再度プレビューしてください。テンプレートタグや変数に関連するエラーについては、メールテンプレートのエラーメッセージのトラブルシューティングを参照してください。
よくある HTML の問題
カスタム HTML メールの表示が正しくない場合は、問題がないか確認できる一般的な箇所をいくつかご紹介します。
font-familyスタイル内の引用符
インラインスタイルにfont-familyプロパティを追加する際は、フォント名を囲む引用符がHTMLのstyle属性を閉じてしまわないように注意してください。たとえば、style属性はダブルクオーテーションで囲み、Helvetica Neueはシングルクオーテーションで囲んでください。フォント名から、正しく対応付けられた引用符を削除する必要はありません。
問題 | 固定 |
<p style='font-family:'Helvetica Neue', Helvetica, Arial;'>テキスト</p> | <p style="font-family:'Helvetica Neue', Helvetica, Arial;">テキスト</p> |
メディアクエリ
適用したいルールを中かっこで囲むことを含め、メディアクエリには有効なCSS構文を使用してください。次の例をテンプレートの<head>に配置してください。幅が最大460pxの画面上で、class mobile-textを持つ要素に適用されます。デザインに合わせてクラス、スタイル、幅を調整し、その後、受信者のメールクライアントでテストしてください。
メディアクエリの例 |
<style> |
不要な center タグ
メール テンプレート内に複数の HTML <center> タグがある場合、Gmail で正しくレンダリングされない可能性があります。この問題を解決するには、不要な <center> タグをすべて削除します。<center>メール テンプレートの先頭付近の タグ近くには、<body> タグが 1 つだけ必要です。追加の <center> タグはすべて不要です。
Klaviyo は JavaScript メールをサポートしていません
ほとんどのメールクライアント（Gmail、Hotmail、Yahooなど）は、メール内のJavaScriptをセキュリティ上の脅威とみなします。これは、スクリプトによって悪意のあるコンテンツを隠すことができるためです。その結果、これらの主要なメールクライアントは、メール内のスクリプトを完全にブロックします。メール内のJavaScriptには本質的にセキュリティ上の脅威が伴い、さらにほとんどの主要なメールクライアントがそのようなスクリプトをサポートしていないため、追加されたスクリプトは自動的に削除されます。
Klaviyo は埋め込みフォームまたは動画をサポートしていません
Klaviyo は、テンプレート内の埋め込みフォーム、ウィジェット、動画をサポートしていません。これは、テストの結果、これらの種類の機能が主要なメールクライアント全体で確実にレンダリングされないことが示されているためです。JavaScript スニペットと同様に、ほとんどのメールクライアントはこれらの要素をセキュリティ上の脅威と見なし、メールから完全に削除します。
この回避策について詳しく知りたい場合は、メールに動画または GIF を追加する方法に関するこの記事をご覧ください。
その他のサポートされていないタグと属性
ここで取り上げるHTMLタグと属性は、Klaviyoがサポートしているものの網羅的なリストではありません。使用する要素が主要な受信トレイプロバイダーでサポートされているかを確認してください。Klaviyoは、テンプレートをインポートまたは保存する際にも、タグと属性を確認します。
カスタムHTMLをインポートまたは保存すると、Klaviyoは<script>や<iframe>などの許可されていない要素を削除し、認識されないタグを<span>に変換し、サポートされていない属性を削除します。HTMLエディターで変更を保存する際は、影響を受けるタグまたは属性に関する警告を確認してください。HTMLの一部が消えたり変更されたりする場合は、サポートされている代替手段を使用してください。
変更を確認する
- HTMLエディターで[保存]をクリックします。エラーや警告があれば確認し、該当するコードを修正して、再度保存します。
- [プレビュー]をクリックします。テンプレートでプロファイルまたはイベントデータを使用している場合は、プレビューに使用するプロファイルまたはイベントを選択します。
- メールとして送信を選択し、送信先：にメールアドレスを入力して、今すぐプレビューをクリックしてください。
- デスクトップとモバイルでプレビュー用メールを開いてください。レイアウト、フォント、リンク、インタラクティブなコンテンツがあれば、それらを確認してください。さらに変更を加える場合は、オーディエンスに送信する前に保存し、別のプレビューを送信してください。
その他のリソース
- カスタム HTML テンプレートをインポートする方法
Klaviyo にカスタム HTML テンプレートをインポートする方法についてはこちらをご覧ください。
- メールテンプレートのエラーメッセージのトラブルシューティング
メールテンプレートでエラーまたは警告が表示された場合は、メッセージを送信する前に解決する必要がある可能性があります。このリソースで発生しているエラー メッセージまたは警告を検索して、問題を解決するためのヒントを確認してください。