Klaviyo でカスタム CSS、JavaScript、HTML のトラブルシューティングを行う

このページで学べること

カスタム HTML テンプレートをインポートする場合や、独自のカスタムコード テンプレートを作成する場合に、カスタムコードをトラブルシューティングする方法をご確認ください。

カスタム HTML と CSS の要素

メールをインタラクティブにするために使用される特定の HTML および CSS 要素は、現在サポートされていません。たとえば、特定の CSS 属性セレクターを使用して Gmail でメールをインタラクティブにしようとしている場合、テンプレートによって Klaviyo でエラーが発生することがあります。

Klaviyo は現在、メール テンプレートで特定の演算子（~ など）をサポートしていません。これにより、特定のカスタム HTML と CSS の使用範囲が制限される場合があります。テンプレートに完全にはサポートされていない HTML または CSS が含まれている場合、メールのプレビューを生成できず、代わりにエラーメッセージが表示されます。

よくある HTML の問題

カスタム HTML メールの表示が正しくない場合は、問題がないか確認できる一般的な箇所をいくつかご紹介します。

フォント内のシングルクォーテーション

CSS で font-family 属性を追加している箇所では、シングルクォートまたは不要なクォートがないか確認してください。フォントを追加する際は、すべての引用符を削除してください。

メディアクエリ

メディアクエリが標準形式でない場合、正しくレンダリングされません。すべてのメディアクエリで標準形式に従ってください。

不要な center タグ

メール テンプレート内に複数の HTML <center> タグがある場合、Gmail で正しくレンダリングされない可能性があります。この問題を解決するには、不要な <center> タグをすべて削除します。<center>メール テンプレートの先頭付近の タグ近くには、<body> タグが 1 つだけ必要です。追加の <center> タグはすべて不要です。

Klaviyo は JavaScript メールをサポートしていません

ほとんどのメールクライアント（Gmail、Hotmail、Yahoo など）は、メール内の JavaScript をセキュリティ上の脅威とみなします。これは、スクリプトによって悪意のあるコンテンツが隠される可能性があるためです。その結果、これらの主要なメールクライアントはメール内のスクリプトを完全にブロックします。メール内の JavaScipt に伴う本質的なセキュリティ上の脅威と、多くの主要なメールクライアントでそのようなスクリプトがサポートされていないことから、追加されたスクリプトは自動的に削除されます。

Klaviyo は埋め込みフォームまたは動画をサポートしていません

Klaviyo は、テンプレート内の埋め込みフォーム、ウィジェット、動画をサポートしていません。これは、テストの結果、これらの種類の機能が主要なメールクライアント全体で確実にレンダリングされないことが示されているためです。JavaScript スニペットと同様に、ほとんどのメールクライアントはこれらの要素をセキュリティ上の脅威と見なし、メールから完全に削除します。

この回避策について詳しく知りたい場合は、メールに動画または GIF を追加する方法に関するこの記事をご覧ください。

その他のサポートされていないタグと属性

ここで取り上げた HTML タグと属性は、Klaviyo がサポートする内容の網羅的なリストではありません。一般的に、主要な受信トレイプロバイダーで サポートされている HTML 要素は、Klaviyo でもサポートされています。

テンプレートにサポートされていない HTML が含まれている場合、Klaviyo はサポートされていない要素をサポートされている代替要素（例：span タグ）に置き換えようとします。明確な置き換えがない場合は、HTML の該当部分が削除されます。HTML の一部が追加後に消えたように見える場合、それらはサポートされていない可能性が高いことを意味します。同様の効果を得るために、別の HTML タグまたは属性をお試しください。

その他のリソース