見出し画像

【安全更新！】Account Engagementのコンテンツリージョン

鈴木隆弥

今回は「pardot-region」という文字をHTMLタグに含むことでユーザが安全にランディングページを更新ができる仕組みをご紹介したいと思います。

Account Engagementのランディングページの作り方は過去記事で書きましたようにWYSIWYGエディターの編集画面でテキストや写真などのコンテンツをレイアウトをしていました。

ランディングページ作成画面

最新情報などランディングページをリリースした後からコンテンツを追加したり、修正するにはこのWYSIWYGエディターの編集画面上で行うのですが、このエディターに慣れていないスタッフが操作すると最悪レイアウトを壊してしまう可能性があります。

そこで、コンテンツリージョンを使うという手があります。コンテンツリージョンを使うと修正したいところだけを安全にブロックして、その外に影響を与えずに編集が出来るので、どなたでも安全に更新や編集ができます。

編集方法は言葉で書くより下図を見ていただけたら一目瞭然ですね。
「pardot-image」とか「box1_test」などと表示されている黒いタブがついている箇所をクリックすると入力専用の小さなウィンドウが開きます。このウィンドウ内でテキストを書き換えるイメージです。

コンテンツリージョンを使ったテキスト修正

画像も同様に黒いタブをクリックすると小ウィンドウが開いて属性からサイズや代替テキストを入力できます。画像のアップ方法はライブラリから読み込む、URLを指定する、手元のファイルをアップロードするの３通りあります。

コンテンツリージョンを使った画像の入力画面

更新時に他のコンテンツ要素に影響なく、編集時のカーソルの位置や選択範囲を意識せずに更新できるので、最新情報の見出しなど用途が決まった決め打ちのコンテンツの更新には最適かと思います。

さて、では早速そんな便利なコンテンツリージョンの作り方をご紹介します。上図の画面は【コンテンツ】→【ランディングページ】の中で❹ランディングページコンテンツというプロセスタブで安全な更新の仕方を見ていただいたのですが、その元となる器をレイアウトテンプレートで作っておきます。

【コンテンツ】→【レイアウトテンプレート】で新しいテンプレートを作り、その中に下のようにHTMLのタグで記述します。

コンテンツリージョンを含むレイアウトテンプレート編集画面

コンテンツリージョン部分のコードを抜き出してみます。
↓

<!-- 画像が入るところ -->
<div id="mvWrap">
<img pardot-region="pardot_image" src="https://go.shiro-k.jp/l/942883/2023-08-28/2gbjw2/942883/16932009831g4SWQwU/region_test0828.jpg" alt="" width="615" height="346">
</div>

<!-- 小見出しが入るところ -->
<div id="textWrap">
<p class="txtWrap-midashi" pardot-region="box1_title" pardot-region-type="simple">年末年始のお知らせ</p>

<!-- 本文が入るところ -->
<p class="txtWrap-text" pardot-region="box_text" pardot-region-type="simple">弊社では年末年始にあたり、2022年12月30日（水）～2023年1月3日（日）を休業とさせていただきます。</p>
</div>

こんな感じで通常の<img>タグや<p>タグの中に
pardot-region="任意のタブ名"を書いておきます。

本文の<p>タグ内にpardot-region-type="simple"とあるのはシンプルなテキスト編集用のエディターを使いますって事です。小見出しの<p>タグ内ではpardot-region-type="WYSIWYG"と書いてます。リージョンのタイプを"WYSIWYG"にすると下図のようにリッチテキストエディターが使用できます。

"WYSIWYG"タイプのコンテンツリージョン編集画面

これでコンテンツリージョン用のレイアウトテンプレートが出来たのでランディングページに移り新規でコンテンツリージョン用のランディングページを作成して❸プロセスタブで作ったレイアウトテンプレートを読み込んだら作業完了です。

【コンテンツ】→【ランディングページ】コンテンツレイアウト選択画面

以上をまとめると下記の３ステップになります。
１，コンテンツリージョン用のレイアウトテンプレートを作る
２，HTML編集画面でコンテンツリージョン用の記述を加える
３，新規ランディングページからレイアウトテンプレートを読み込む

これで作成されたコンテンツリージョン用ランディングページはクイック編集ボタンを押すと前述しました変更部分をブロックされた安全な編集モードで作業をできるようになります。

【コンテンツ】→【ランディングページ】
コンテンツリージョンを使ったテキスト修正

少し地味な存在のコンテンツリージョンですが、意外と需要のある機能ではないかな？と思っています。shiro Inc.では皆コードが書けるので使う場面がないのですが、こんな使い方があるよって方は是非おしえてください〜。


この記事が気に入ったらサポートをしてみませんか？