ドキュメントJourney OptimizerJourney Optimizer ガイド

Web 変更の管理 manage-web-modifications

Last update: Tue Oct 29 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • ユーザー

Web ページに追加したすべてのコンポーネント、調整およびスタイルを簡単に管理できます。また、専用パネルから直接変更を追加することもできます。

変更パネルの操作 use-modifications-pane

  1. 変更 ​アイコンを選択して、対応するパネルを左側に表示します。

  2. ページに加えた各変更を確認できます。

  3. 不要な変更を選択し、その他のアクション ​ボタンから「変更を削除」オプションをクリックして削除します。

    note caution
    CAUTION
    アクションを削除する場合は後続のアクションに影響する可能性があるので、慎重に作業を進めてください。

  4. 単一ページアプリケーションをオーサリングしている場合は、他のビューに変更を適用できます。 詳細情報

  5. 複数の変更を同時に削除するには、変更 ​ウィンドウ上部の「選択」ボタンをクリックして、変更内容を確認し、削除 ​アイコンをクリックします。

  6. 変更 ​パネルの上部にある​ その他のアクション ​ボタンから、すべての変更を一度に削除できます。

  7. その他のアクションメニューで、無効な変更（他の変更によって上書きされた変更）のみを削除できます。例えば、テキストのカラーを変更してそのテキストを削除すると、テキストが存在しなくなったためにカラーの変更が無効になります。

  8. 画面の右上にある​ 取り消し／やり直し ​ボタンを使用して、アクションをキャンセルおよびやり直すこともできます。

    「取り消し」オプションと「やり直し」オプションを切り替えるには、ボタンをクリックしたままにします。次に、ボタン自体をクリックして、目的のアクションを適用します。

専用パネルから変更を追加 add-modifications

Web デザイナーを使用してページを編集する場合、変更 ​パネから直接コンテンツに対する変更を追加できます。web デザイナーインターフェイスからコンポーネントを選択し、編集する必要はありません。次の手順に従います。

  1. 変更 ​ウィンドウから、その他のアクション ​ボタンをクリックします。

  2. 「変更を追加」を選択します。

  3. 次から変更タイプを選択します。

  4. コンテンツを入力し、変更内容を​ 保存 ​します。

  5. 変更の横にある​ その他のアクション ​ボタンをクリックし、「情報」を選択して、詳細を表示します。

CSS セレクター css-selector

CSS セレクター ​タイプの変更を追加するには、次の手順に従います。

  1. 変更タイプとして「CSS セレクター」を選択します。

  2. 「CSS 要素セレクター」フィールドを使用すると、変更を適用する HTML 要素（DOM ツリー内のノード）を見つけて選択できます。

  3. アクションタイプ（「コンテンツを設定」または「属性を設定」）を選択して、必要な情報やコンテンツを入力します。

    • コンテンツを設定：「CSS 要素セレクター」フィールドで特定される要素に入力される内容を指定します。

    • 属性を設定：現在の CSS セレクターに関連付ける属性を指定して、このセレクターをこの属性でも特定できるようにします。これを行うには、名前を「属性名」フィールドに、値を「コンテンツ」フィールドに入力します。属性が既に存在する場合は値が更新されます。存在しない場合は、指定した名前と値で新しい属性が追加されます。

ページ <head> page-head

ページ<head> 変更タイプを使用して、カスタムコードを追加できます。

<head> 要素は、メタデータ（データに関するデータ）のコンテナで、<html> タグと <body> タグの間に配置されます。この場合、コードは本文やページの読み込みイベントを待たずに、ページの読み込みの開始時に実行されます。

<head> 要素は、通常、ページの上部に JavaScript または CSS コードを追加するために使用されます。後続のビジュアルアクションのセレクターは、このタブに追加される HTML 要素に応じて異なります。

ページ<head> タイプの変更を追加するには、次の手順に従います。

  1. 変更タイプとして​ ページ<head> を選択します。

  2. コンテンツ ​ボックスでカスタムコードを追加します。

    note caution
    CAUTION
    <head> セクションに <script> 要素および <style> 要素のみを追加できます。<div> タグなどの要素を追加すると、残りの <head> 要素が <body> に表示される場合があります。

  3. 「詳細編集オプション」ボタンをクリックします。パーソナライゼーションエディターが開きます。

    Journey Optimizer パーソナライゼーションエディターのすべてのパーソナライズ機能およびオーサリング機能を活用できます。詳細情報

カスタムコードの例 custom-code-examples

ページ<head> 変更タイプを次に対して使用できます。

  • JavaScript をインラインで使用するか、外部 JavaScript ファイルにリンクします。

    例えば、要素の色を変更するには、次の手順を実行します。

    code language-none 
    <script type="text/javascript">
document.getElementById("element_id").style.color = "blue";
</script>

  • スタイルをインラインで設定するか、外部スタイルシートにリンクします。

    例えば、オーバーレイ要素のクラスを定義するには、次の手順を実行します。

    code language-none 
    <style>
.overlay
{ position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
</style>

カスタムコードのベストプラクティス custom-code-best-practices

カスタムコードは、必ず 1 つの要素にまとめます。

以下に例を示します。

code language-none 
<script>
// Code goes here
</script>

変更が必要な場合は、このコンテナ内で変更を加えます。

カスタムコードが不要になった場合は、このコンテナを空のままにし、削除しないでください。こうすることで、エクスペリエンスの他の変更に影響を与えません。

カスタムコードスクリプトで document.write アクションを実行しないでください。
スクリプトは、非同期で実行されます。実行すると、document.write アクションがページ上の誤った場所に表示されることがよくあります。カスタムコードで作成されたスクリプトでは、document.write を使用しないことをお勧めします。
要素を作成したあと変更する場合は、元の要素を削除しないでください。
変更を行うたびに、変更 ​パネルに新しい要素が作成されます。2 番目のアクションでは要素 1 を変更しますが、この要素 1 が削除されると、そのアクションで変更する対象がなくなるので、変更が動作しなくなります。
同じ URL に影響を与える 2 つのキャンペーンに対して<><>ページ <head><>変更タイプを使用する場合は、注意してください。
同じ URL に影響を与える 2 つのキャンペーンに対して​ ページ<head> 変更タイプを使用すると、両方のキャンペーンのページに JavaScript が挿入されます。配信されるコンテンツの順序は、Journey Optimizer により自動的に決定されます。コードがプレースメントに依存しないようにしてください。ユーザーはコード内に競合がないことを確認する必要があります。
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76