> For the complete documentation index, see [llms.txt](https://docs.vwo.gaprise.jp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vwo.gaprise.jp/setup/smartcode/145a58m5mt.md).

# シングルページアプリケーション（SPA）にVWOを使用する

### **SPAについて** <a href="#si21rr5m8mn1" id="si21rr5m8mn1"></a>

SPAはブラウザで実行され、使用時にページの読み込みを必要としないアプリケーションのことです。以下の高レベルな手順は、SPAの仕組みの概要を説明するものです。

1. ブラウザは、アプリケーション全体をWebドキュメントとしてダウンロードします。
2. ブラウザはJavaScriptを実行し、アプリケーションの異なるセクションを（セクションを識別するためのハッシュマークまたはURLに基づいて）識別します。
3. ユーザーがアプリケーション内を移動すると、ブラウザーはサーバーからページ全体を再読み込みせずに、特定のセクションのコンテンツをレンダリングします。

シングルページアプリケーションにVWOを使用するには、WebサイトのヘッドセクションにSmartCodeを追加する必要があります。詳細については、「[WebサイトにSmartCodeを追加する](/setup/smartcode/t51sdi62b2.md)」を参照してください。

**注：**

**1.**&#x53;martCodeスニペットのaccount\_idの値は、実際のVWOアカウントIDに置き換えます。

**2.**&#x57;ebページにSmartCodeが正しくインストールされているかどうかを確認するには、VWOアカウントの \[**設定]** > \[**SmartCode]** セクションにあるSmartCodeチェッカーにURLを入力します。異なる結果の意味については、「[VWOのSmartCodeチェッカー](/setup/smartcode/krsdu1c433.md)」をご参照ください。

### **SPAの種類** <a href="#wl7k9jbsiri2" id="wl7k9jbsiri2"></a>

SPAとのやりとりはすべて1つのページで行われます。SPAの例としては、GmailやGoogle Mapsなどがあります。SPAには2種類あります。

* URLが変更されるSPA
* URLが変更されないSPA

#### **URLが変更されるSPA** <a href="#ujix8ex12q7s" id="ujix8ex12q7s"></a>

デフォルトでは、VWOはURLが変更されるSPAとの統合に対応しています。HashmarkまたはHTML5HistoryAPIを使用するSPAを追跡するためにコードを追加する必要はありません。

* **ハッシュマーク（＃）が使用されるSPA**\
  これは、URLにハッシュマーク（＃）を使用して、ユーザーをアプリケーションのさまざまなセクションにルーティングするアプリケーションを指します。ハッシュマーク（＃）は、ブラウザがアプリケーションの特定のページまたはセクションを指すようにするために使用される識別子です。これらのハッシュマーク（＃）はHTTPリクエストとしてサーバーに送信されず、サーバーにアプリケーションのどのセクションを表示するかを知らせるためのクローラーとしてのみ使用されます。

  **例：**「\*\*<http://example.com/sports.html#football**」を考慮しましょう。ここでのハッシュマーク（＃）は、サッカーを参照するアプリケーションのセクションを識別するのに役立ちます。＃の後のURLの部分は、アプリケーションのすべてのセクションで変更されます。>
* **HTML5HISTORYAPIが使用されるSPA**\
  これは、ハッシュマーク（＃）が使用されないが、ユーザーがHTML5 History API を使用してアプリケーションのセクションにアクセスするたびにURLが変更されるシングルページアプリケーションを指します。このようなSPAでは、ページを再読み込みすることなく、JavaScriptによってブラウザに表示されるURLを変更することができます。

  **例：**「<http://example.com/sports.html/football」を考慮しましょう。URLの「/football」部分は、ユーザーが現在アクセスしているコンテンツセクションを特定するのに役立ちます。他のスポーツセクションに移動すると、サーバーからページ全体を再読み込みすることなく、「/football」を「/hockey」に変更されるだけです（履歴APIを使用）。>

#### **URLが変更されないSPA** <a href="#ehrj4ttzq1b3" id="ehrj4ttzq1b3"></a>

これは、訪問者がアプリケーションのセクションにアクセスしたときに、ハッシュマーク（＃）をつけたり、URLを変更したりしないアプリケーションを指します。このようなSPAでVWOを実行するには、カスタムURLを使用して仮想ページを作成する必要があります。

virtualURL APIにより、VWOが現在のセッションで新しいURLをロードすることが可能になります。

* すべてのセッション記録、ヒートマップ、目標、ファネルは、新しいページで追跡されます。
* URLの適格性、セグメント条件、その他のキャンペーン設定を確認した後、再度コードが実行されます。
* すべての変更は、選択したバリエーションに再び適用されます。

VWOで新しいページを読み込むには、以下のAPIを使用して仮想ページを起動します。通常のURLの変更と同様に、すべてのテストはAPIで提供される新しいURLで再実行されます。

```
window.VWO = window.VWO || [];
window.VWO.push(['activate', {
virtualPageUrl: 'NEW_VIRTUAL_PAGE_URL'
}]);
```

view raw [customUrlSetup](https://gist.github.com/vwo-kb/55f16f1fe817297c5a94338ca2d40e6b#file-customurlsetup) hosted with ❤ by [GitHub](https://github.com/)

### **SPAでカスタムURLを使用する** <a href="#i814tft2w8ux" id="i814tft2w8ux"></a>

ほとんどのSPAは、最初のページの読み込み時にWebサイトのリソースを読み込みます。その後、WebサイトのURLは変更されません。**例えば**、フライト予約Webサイトでは、ページのさまざまなセクションに移動してもURLは同じままです。

カスタムURLを使用すると、架空のURLを設定して、Webサイトの特定のセクションまたはページを検索して記憶することができます。カスタムURLを使用すると、Webサイトのページに一貫したパターンがない場合でも、Webサイトの複数のページを追跡できます。SPAでカスタムURLを使用するための2つの異なるユースケースがあります。

実際のURLが変更されず、カスタムURLでテストを実行する場合は、次のコードスニペットを使用します。

```
window.VWO = window.VWO || [];
window.VWO.push(['activate', {
customUrl: 'http://mycustomurl.com/custom-url'
}]);
```

view raw [customURLForSPA](https://gist.github.com/vwo-kb/884587ded823e25b054067dc85ca6afb#file-customurlforspa) hosted with ❤ by [GitHub](https://github.com/)

**注：**&#x30B3;ードはページ上の既存のキャンペーンでのみ機能し、新しいURLを使用して新しいキャンペーンを取得することはできません。カスタムURLを提供し、新しいURLでキャンペーンの詳細を取得するには、前のセクションで述べた仮想URLのAPIを使用します。

実際のURLが変更され、カスタムURLを変更したい場合は、以下のコードスニペットを使用してカスタムURLを更新してください。

```
(function() {
window.VWO.push(['onEventReceive', 'uC', function() {
// Add your custom url here
window._vis_opt_url = 'http://myVisOptURL.com/vis-opt';
}]);
})();
```

view raw [updateCustomURL](https://gist.github.com/vwo-kb/f9b4c2f80868eaac8f234a417e9aa859#file-updatecustomurl) hosted with ❤ by [GitHub](https://github.com/)

**タイムアウト時間を変更する**

VWOはデフォルトで、URLの更新後2秒以内にページが読み込まれた要素に変更を適用します。タイムアウトを変更する場合は、以下のAPIを使用します。

```
window.VWO = window.VWO || [];
window.VWO.push(['updateSPAWaitTime', < time_in_ms > ]);
```

view raw [changeTimeDuration](https://gist.github.com/vwo-kb/66a188574598511f6356652c34fda6fb#file-changetimeduration) hosted with ❤ by [GitHub](https://github.com/)

ここで、time\_in\_ms はミリ秒単位の時間です。

**変更を手動で適用する**

以下のAPIコールを使用して、手動で変更を適用することができます。これは、無限スクロールの場合、モーダルボックス、およびその他の同様の動的コンテンツの場合など、動的コンテンツに役立ちます。

```
window.VWO = window.VWO || [];
window.VWO.push(['applyChanges', < Array_of_exp_ids > ]);
```

view raw [applyChangesManually](https://gist.github.com/vwo-kb/0fe7067acfae4aac8a6cc45b892a0e20#file-applychangesmanually) hosted with ❤ by [GitHub](https://github.com/)

ここで、Array\_of\_exp\_idsは、変更を適用するためのすべてのテストIDを含む配列です。

#### **CSSの変更を手動で元に戻す**

APIを使用してテストのCSSを元に戻すには、次の呼び出し関数を使用します。

```
window.VWO = window.VWO || [];
window.VWO.push(['revertChanges', < exp_id > ]);
```

view raw [revertCSSChangesManually](https://gist.github.com/vwo-kb/b934bed3959dce0677ed849dad45a75e#file-revertcsschangesmanually) hosted with ❤ by [GitHub](https://github.com/)

**注：**&#x4A;Sの変更またはエディターの変更を元に戻すことはできません。このAPIは、CSSの変更のみを元に戻します。

**動的要素に変更を適用する**

Webサイトにajax呼び出しまたはその他の方法で変更された動的コンテンツがある場合は、\[refreshElement API]呼び出しを使用して、動的コンテンツを更新するようにVWOに指示できます。

```
VWO.push(['refreshElements', < Array_of_selector_paths > , < exp_ids > ]);
```

view raw [dynamicEventChanges](https://gist.github.com/vwo-kb/0d397148d27365bfd4d57e971fbc72ba#file-dynamiceventchanges) hosted with ❤ by [GitHub](https://github.com/)

**例えば、**&#x6B21;のコードを使用して、Webサイトの動的要素に変更を適用します。

```
VWO.push(['refreshElements', ['#phone-name']]);
```

view raw [dynamicEventChangeExample](https://gist.github.com/vwo-kb/0a23429f81c6dc317b82a12b960f73c0#file-dynamiceventchangeexample) hosted with ❤ by [GitHub](https://github.com/)

```
/* CUSTOM CODE */
vwoRequestAnimationFrame = window.requestAnimationFrame || function(fun) {
setTimeout(function() {
fun();
}, 17)
}
vwoRequestAnimationFrame(function apply() {
// [setInterval]内で実行するアクションで以下の行を変更します
VWO.push(['refreshElements', ['.hs-button']]);
vwoRequestAnimationFrame(apply);
});
```

view raw [applyDynamicChangesToWebsite](https://gist.github.com/vwo-kb/25aa653b9849ecfd0fd51f19c62b2f07#file-applydynamicchangestowebsite) hosted with ❤ by [GitHub](https://github.com/)

それでも変更が適用されない場合は、setintervalのactivate関数を手動で呼び出すことで強制的に変更することができます（Webサイトが遅延する可能性があるので注意して使用してください）。

```
VWO.push(['activate', < should_keep_interval_running > ]);
```

view raw [callingActivateManually](https://gist.github.com/vwo-kb/3daffd958dafac6eb51c2016b9a1d2b2#file-callingactivatemanually) hosted with ❤ by [GitHub](https://github.com/)

### **既知の問題点/制限事項** <a href="#nprlj6d6sjku" id="nprlj6d6sjku"></a>

SPA統合モジュールは継続的に進化しており、機能の改善に努めています。VWOユーザーが統合時に遭遇する可能性のある既知の問題をリストアップしました。SPAとの連携に関するお問い合わせは、<support@vwo.com> までお願いします。

* AngularjsやReactjsなどのSPAフレームワークの多くでは、バインディングを使用してDOMコンテンツが更新されます。 VWOエディターを使用してページに競合する変更を適用した場合、更新がページに反映されない場合があります。
* JS/CSSに適用された変更は、ページが更新されるまで削除/元に戻されることはありません。手動で変更を戻す場合は、上記の「[CSSの変更を手動で元に戻す](#cssnowodenisu)」のセクションをご参照ください。