動画チュートリアル:FigmaからHTMLメールのリンクにUTMトラッキングコードを追加する
この動画では、Emailify Figmaプラグインを使って、FigmaからHTMLメールのリンクにUTMトラッキングコードを追加する方法を紹介します。
すべてのリンクに共通のグローバルUTMクエリ文字列を設定する
Emailifyプラグインでは、グローバルなUTMタグのクエリ文字列を設定し、すべての<a>タグのhref属性に自動的に付加できます(メールごと)。メインの「Email」コンテナフレームを選択し、Settingsボタンをクリックして、そのメールのすべてのリンクに適用したいクエリ文字列をAppend Global URL Query String入力欄に貼り付けます。
グローバルクエリ文字列(メール内のすべてのリンクに適用されます)の例:?utm_campaign=sale&utm_medium=email&utm_source=newsletter1&utm_content=top
個々のレイヤーに専用のUTMクエリ文字列を設定する
必要に応じて、Settingsパネルのクリック可能なリンクURLの入力欄に、クエリ文字列を含めたURLを手動で入力して、リンクにクエリ文字列を設定することもできます。
独自のクエリ文字列を含むURL(1つのレイヤーに適用できます)の例:https://www.example.com/?utm_campaign=sale&utm_medium=email&utm_source=newsletter1&utm_content=top
メール内のすべてのリンクにグローバルクエリ文字列を適用し、さらにメール内の個々のリンクにもクエリ文字列を適用している場合、Emailifyは最終的なURLに両方のクエリ文字列パラメーターを自動的に含めます。
Settingsを開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、設定を一括で適用できます。変更した設定は、選択したすべてのレイヤーに適用されます。