Ptengine の Experience のページ編集機能では、ユーザーに直感的で柔軟かつリアルタイムなページ編集を行うことができます。

これにより、ユーザーはサイトのコンテンツやレイアウトを思い通りに調整し、サイト上におけるユーザー体験やコンバージョン率を向上させることが期待できます。

しかし、クライアントの元のページ構造が変更されるなどの場合、本機能で編集した体験そのものが無効になる可能性があります。

そこで、本記事では、ページ編集体験の実装原理、ページの変化が体験に与える影響およびページ編集体験が無効になった場合の対処法について詳しくご説明します。

ページ編集体験の実装原理 #

ページ編集は、ユーザーの皆さまがウェブページ上でのコンテンツ編集を可能にする機能です。

その実装原理は、要素のセレクターによって編集対象を特定し、編集後の内容を保存することです。

ページがレンダリングされる際、システムは記録されたセレクターに基づいて、該当する要素を見つけ、編集内容をその位置に更新することで、ページ編集を実現します。

セレクターとは？

セレクターは、HTML要素を特定するための識別子であり、地図の道案内のように、その情報に基づいてページ上の特定の位置にある要素を見つけることができるものです。通常、要素のタグ名、クラス名、IDなどで構成されます。

以下の図の例のように：

テキスト：こんなに簡単に実現 に対応するセレクターは：body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1) となります。

ページ編集体験の例：

例えば、ページのファーストビューにあるテキスト「こんなに簡単に実現」を「迅速かつインテリジェントに実現」 に置き換えるとします。

テキストを更新し、「保存」をクリックすると、体験はセレクターと変更内容を保存します。データ構造はおおよそ以下のようになります：

[{
    selector: 'body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)',
    text: '迅速かつインテリジェントに実現'
}]

最後にクライアントページがレンダリングされる際、体験で保存されたセレクターに従って要素を見つけ、その要素の内容を置き換えます。

元のページ変更が体験に与える影響 #

一方で、クライアントの元のページが変更された場合、セレクターの正確性が影響を受ける可能性があります。

ページの変更が、テキストや画像の置き換えのみの場合、通常セレクターには影響がなく、ページ編集体験は引き続き有効です。

しかし、ページの構造に対して変更が加えられた場合（要素の削除、クラス名の変更、全体的な構造の調整などが行われた場合）、セレクターが以前に指定した要素を正確に特定できなくなることで、結果的にページ編集実験が無効になることがあります。

上述の体験の例に基づいて、さらに詳しくご説明します：

例1：元のページがテキストを調整した場合 ✅

元のページが単にテキストのみを調整したと仮定します。その場合は、以下のようになります：

セレクター：body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)

セレクター：body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)

この場合、セレクターには変更がないため、体験にも影響がなく、正常に実行されます。

例2：元のページがページ構造を調整した場合 ❌

元のページが、バナーのページ構造を調整し、サブタイトルを削除し、スタイルとテキストを更新する必要があると仮定します。

セレクター：body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)

セレクター：body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud **> div.pt-head > h1**

この場合、上図のように、要素の削除や置き換えによるページ構造の変更により、セレクターが正しく機能せず、最終的に体験の変更が無効になります。

例3：元のページ上の要素IDが動的に変化する場合 ❌

元のページ上の要素のid属性が動的に生成され、ページの更新やリフレッシュ時に要素idが変化すると仮定します。

セレクター：body > #__nuxt > #__layout > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)

セレクター：body > **#__nuxt-xxad-da** > **#__layout-x-xx** > div > div.template-header > div > div > div.cloud > div.pt-head > p:nth-child(1)

上図のように、ページIDの変更によってセレクターが正しく機能せず、最終的に体験の変更が無効になります。

体験失効への対処方法 #

ページ構造を変更する前に、すでにページ編集している部分に留意し、すでにセレクターが設定されている要素の変更を避けていただく必要があります。変更後は、以下の方法でインライン編集への影響を確認することができます。：

手順1：体験のプレビュー

ページ編集体験が失効または異常と判明した場合、まず体験のプレビューを行い、失効の原因がページ構造の変更によるものかどうかを確認します。

• プレビューが正常： ページ構造に問題がないことを示します。ユーザーはページ体験の適用範囲や体験のトリガー条件に注目する必要があります。
• プレビューが異常： 次のステップに進んで確認します。

手順2：体験の再編集

体験編集画面に入り、変更項目に【要素が見つかりません】の表示があるかどうかを確認します。この表示がある場合、その変更項目は失効していることを意味します。

• 失効の表示がある場合：その変更項目を削除し、正しい要素を再度特定してページ編集を行なってください。

手順3：技術サポートに連絡

上記の手順でも失効の問題が解決しない場合、またはさらなるご支援が必要な場合は、技術サポートチームまでご連絡ください。

最後に #

みなさまにページ編集の原理とセレクターについてご理解いただくことは、ページ構造の変更に対処する上で非常に重要です。

ページ変更後にセレクターが正確であるかどうかを確認することで、ページ編集の失効を防ぎ、体験データの正確性と信頼性を向上させることができます。