Dotdigitalではフォームの他に、フォームを内蔵した(あるいは拡張した)ページが作成可能です。
そのページ作成に関してメモ的にまとめたいと思います。
前提
上記1のヘルプが対象としているwebで公開するページが該当し、基本的には上記2のEasyEditorというエディターで構築します。
そのため操作感はWPのブロックエディタのイメージが近いかもしれません。
メモ
調査した際に得た内容をメモ的に記載します。
構築方法
基本的にはエディタの各設定で対応可能な範囲での構築となります。
UIはわかりにくい部分が散見され、目的の設定項目を表示させるのも一苦労という場面はよくありました。
HTMLの直接編集
設定項目では対応できない場合は上記のようにブロック単位でHTMLを変更することが可能です。
自由に入力できますが、元のエディタの状態での入力時に壊れる(追加したエレメントやクラスが消えるなど)可能性があるため、運用に制限や問題が生じる可能性があります。
画像ブロック
テキストブロックなどは編集できますが、画像ブロックではHTMLが編集できません。
調査しても仕様なのか判断がつきませんでしたが、追加した画像は以下のような挙動になるようで注意が必要です。
- 画像配置後にドラッグでリサイズできる
- リサイズした際に設定されるサイズは%指定になるようで、画面サイズの変更に応じて縮小されてしまう
つまりpx固定値ではなく、min-widhtやmax-widthなどを指定する方法もなく、小さめの画像を配置する場合に意図した状態にはならない可能性が高くなります。
CSSの直接編集
The CSS inliner takes an internal stylesheet that has the ee-render=”inline” attribute, converts all those CSS styles to inline styles, then removes that internal stylesheet (to make the final HTML size smaller).
上記のような方法でブロックではなくページのテンプレート自体にstyleタグでcssの追加が可能です。
ee-render属性
前出のヘルプにはstyleタグにee-render="inline"属性の追加が必要とあり、以下の制限が書かれています。
This information also applies to EasyEditor for landing page templates.
Important
CSS styles that cannot be inline and that are in an internal stylesheet with the ee-render=”inline” attribute are removed before the campaign is sent.
However, pseudo-classes and media queries can’t be inlined and will be removed before being sent
上記の”sent”がwebページの時にも関連するのかわからずサポートに確認したところ以下のような回答を得ました。
- 配信時にee-render="inline"属性が追加されたstyleタグ内の記述を、該当タグのstyle属性に変換する
- 変換はEmail配信時にのみ行われる
- webページとして公開する場合、変換は行われない
そのため当記事のようにwebページとして公開するのであれば、前述の制限は以下のように無視できます。
- ee-render="inline"不要
- メディアクエリや擬似要素は使用可能
Email配信時のレスポンシブデザイン
Webページではなくメール配信用テンプレートをカスタマイズしている場合は、レスポンシブデザインではかなり制限がかかります。
メディアクエリを使えない点に関しての代用案として以下が検討できます。
- カラムブロックの「可視性」で「デスクトップデバイスでのみ表示」と「モバイルデバイスでのみ表示」を利用する
上記を実行するには以下前提が必要であり、運用時のハードルが上がる可能性があります。
- 変化させたいブロックはカラムブロックに入れなくてはならない
- デスクトップ用とモバイル用のブロックを出し分けるため、同じ文言や画像のブロックが2つ必要になる
確認ブロック
ページ内にフォームブロックを追加した場合、編集後にページが保存できなくなる場合があります。
可能性としては「確認」ブロックが存在しないことが考えられますが、この確認ブロックは作成されたページの内容によって選べる選択肢がかわるため注意が必要です。
具体的には、フォームブロック内のセクションブロックの有無で以下のように変わります。
- セクションブロック有り:
ページに移動/URLにリダイレクト - セクションブロック無し:
ページに移動/URLにリダイレクト/コンテンツを表示
コンテンツを表示させる場合の挙動
確認したところ、送信完了後の「コンテンツを表示」の動作は以下のよな動作になります。
- セクションブロックに入れたブロックを消す(通常はフォームの入力欄や送信ボタンが消えるはず)
- 確認ブロックの内容を表示させる
- ページ上部に移動する
送信完了後にページ上部に移動する点が問題で、ページ下部にフォームと確認ブロックを追加していた場合にユーザーを混乱させる可能性があり、工夫が必要になると思います。
ページのドメイン
ドメインとしては以下が選べるようです。
- .dotdigital-pages.com
- Dotdigitalに設定済みのドメイン
メルマガ配信のためにドメインを追加していた場合は、そのドメインを選ぶことができるはずです。
結び
便利なようで不便なところがあるものの、Dotdigitalによるメルマガ配信を行なっているのであれば、簡易にフォーム付きLP仕組みが作れる点は魅力的かなと思います。
APIや外部サービスを使わずに、EasyEditor内で作業するだけで作成できます。
ただし思い通りのページが作れるかどうかは別の話なので、自作が難しい場合は用意されているテンプレートを使用することをお勧めします。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
