HTML を書き出して CMS に組み込む
リソースと必要なスクリプトを保ち、CMS のスタイルとの干渉、フォーム、計測を確認します。
CMS が受け入れる形式を確認する
CMS が HTML 全体、専用テンプレート、自由 HTML ブロックのどれを受け入れるか確認します。head と body を含むページをそのまま本文欄へ貼り付けないでください。スタイル、スクリプト、フォントの許可も確認します。簡単なコードの動作だけではフォームや計測の確認にはなりません。
エディターから HTML の ZIP を取得する
- 対象ページをエディターで開き、書き出したい編集内容を確認します。
- 右上の ⋮ から HTML の書き出しを選びます。
- 書き出しのダイアログで、データ収集とフォントなどの内容を確認して実行します。
- パッケージ作成が終わり、ブラウザーに ZIP がダウンロードされたことを確認します。
書き出すのは現在の編集内容です。書き出し前には自動保存が行われますが、これは公開操作ではありません。公開中の版と草稿が異なる場合、ZIP と現在の公開 URL も異なる内容になります。入口が表示されない場合は、利用中のエディターと権限を管理者に確認してください。
書き出したファイルを一式保管する
ZIP を解凍して index.html と README.txt を確認します。ページのスタイルは HTML 内に含まれ、この入口で CSS だけを別ファイルとして書き出すことはできません。README にはページ名、生成時刻、リソースの情報があり、パッケージに含まれず元 URL から読み込むリソースも記載されます。
ZIP があっても、すべてがオフラインで完結するとは限りません。README の外部 URL を確認し、公開先から取得できるか、継続利用できる素材かを調べます。元の ZIP を保管し、コピーで CMS 向けに調整してください。素材を移した場合は src、srcset、CSS の url、背景画像、フォントの参照を更新します。フォルダーの構成は実際の書き出し結果で確認します。
サイト共通部分への影響を防ぐ
自由 HTML では本文を一意な lp-root に収め、リセット、背景、拡大縮小の対象をその中に限定します。html や body 全体に対する処理をそのまま移すと共通ヘッダーやフッターが変わることがあります。Figma 取り込みとレスポンシブ生成では処理が異なります。
スクリプトと SEO 設定を分ける
同じプロファイルの Ptengine タグが設置済みか確認し、二重に入れないようにします。PT SDK の必要なスクリプトと順序、アニメーションのちらつき防止、カスタムフォントなども保ちます。title、description、OGP は CMS の対応欄へ設定します。分割は CMS を理解する担当者が行います。
版と変更内容をそろえて引き渡す
引き渡す ZIP、ページ名、書き出した時刻、確認用 URL、README に残る外部参照、必要な計測・フォームの確認事項を一緒に渡します。公開 URL を確認用に使う場合は、ZIP と同じ内容かを先に照合してください。公開前のコード検査と、現在の草稿の書き出しで対象が異なる場合もあります。
開発者が書き出した HTML を変更しても、元のページへ自動では戻りません。次回の更新を編集元で行うか、CMS 側で管理するかを決めます。編集元を正とする場合は変更をエディターへ反映してから再度書き出し、公開先も手動で更新・確認します。
最終ページで確認を完了する
PC とスマートフォンで、はみ出し、改行、画像、フォント、初回アニメーション、ボタン、共通部分を確認します。テスト送信が届くこと、PV・ヒートマップ・イベントが重複なく届くことも確認します。問題があれば一式のファイル、テスト URL、再現手順を共有します。