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

Web 変更の管理 manage-web-modifications

最終更新日： 2026年9月9日

作成対象：

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

このページで：​修正ペインからweb ページに適用された変更内容を確認、削除、取り消す方法と、Adobe Journey OptimizerでCSS セレクターとページヘッドの修正を直接追加する方法について説明します。

style
shade-box

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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 により自動的に決定されます。 コードがプレースメントに依存しないようにしてください。 ユーザーはコード内に競合がないことを確認する必要があります。
AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to review, delete, and undo changes applied to a web page from the Modifications pane, and how to add CSS selector and page head modifications directly in Journey Optimizer.

Intents:

  • Review the changes made to a page from the Modifications pane
  • Delete a single modification, multiple modifications, all modifications, or only invalid modifications
  • Undo and redo actions using the Undo/Redo button
  • Add a modification directly from the pane as a CSS Selector or Page <head> type
  • Configure a CSS Selector modification with a Set Content or Set Attribute action
  • Add custom JavaScript or CSS code through a Page <head> modification

Glossary:

  • Modifications pane: The pane used to navigate through and manage all components, adjustments, and styles added to a web page, and to add new modifications (product-specific)
  • Invalid modifications: Changes that were overridden by other changes, for example a color modification whose target text was later deleted (product-specific)
  • CSS Selector modification: A modification type that uses the CSS Element Selector field to identify HTML elements (DOM nodes) and apply a Set Content or Set Attribute action (product-specific)
  • Page <head> modification: A modification type for adding custom code to the <head> container, executed at the beginning of page load (product-specific)
  • Set Content: A CSS Selector action that specifies the content placed into the element identified by the CSS Element Selector (product-specific)
  • Set Attribute: A CSS Selector action that associates an attribute (name and value) with the current CSS selector; an existing attribute’s value is updated, otherwise a new attribute is added (product-specific)

Guardrails:

  • Proceed with care when deleting an action, as it may impact subsequent actions.
  • You can only add <script> and <style> elements to the <head> section; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Do not perform document.write actions in custom code scripts, as scripts are executed asynchronously and this often causes document.write to appear in the wrong place.
  • If you create an element and then modify it, do not delete the original element, because the modifying action would no longer have anything to modify and would stop working.
  • If you use the Page <head> modification type for two campaigns impacting the same URL, JavaScript is injected from both campaigns and Journey Optimizer automatically determines the order; make sure the code does not depend on placement and has no conflicts.
  • Always wrap custom code in one element; if the code is no longer needed, leave the container empty but do not remove it.

Terminology:

  • Canonical name: Modifications pane — Acronym: n/a — variants: Modifications panel
  • Synonyms: “CSS Element Selector” = “CSS selector field used to find and select HTML elements”
  • Do not confuse: “Set Content” (specifies content placed into the selected element) ≠ “Set Attribute” (associates an attribute name and value with the CSS selector)
  • Do not confuse: “Delete modification” (removes one modification) ≠ “Undo” (cancels an action, reversible with Redo)
  • Do not confuse: “invalid modifications” (changes overridden by other changes) ≠ modifications you intentionally delete

FAQ:

  • Q: How do I delete all modifications at once? — Use the More actions button on top of the Modifications pane to delete all modifications at once.
  • Q: What are invalid modifications? — Changes that were overridden by other changes, such as a color modification whose target text was later deleted; you can delete only the invalid modifications.
  • Q: What can I add in a Page <head> modification? — Only <script> and <style> elements; adding <div> tags and other elements might cause remaining <head> elements to pop into the <body>.
  • Q: What is the difference between Set Content and Set Attribute? — Set Content specifies the content placed into the element identified by the CSS Element Selector; Set Attribute associates an attribute name and value with the CSS selector, updating it if it already exists.
  • Q: Can I undo changes? — Yes, use the Undo/Redo button on the top right; click and hold to switch between Undo and Redo, then click to apply.
recommendation-more-help
journey-optimizer-help