Custom snippets(カスタムスニペット)の設定方法 | Optimizely 正規代理店イー・エージェンシー

Optimizely X ヘルプ

  • 最終更新日:2017年08月28日

Custom snippets(カスタムスニペット)の設定方法

Custom snippets(カスタムスニペット)の設定方法について、ご案内します。

▼こんな方に役立ちます。
・Optimizelyのスニペットを軽量化したい
・同じサイトを対象に、チームごとに別プロジェクトで実験を運用したい
・複数チームで同じページを対象にした実験を運用したい

スニペットをカスタマイズする理由

Optimizelyのスニペットをカスタマイズすることで、以下のことが可能になります。

  • スニペットサイズの軽量化
  • 異なるチームが同一プロジェクトで実験を運用するリスクを低減

Optimizelyのデフォルトのスニペットは、一つのプロジェクトに1つのスニペットが紐づいています。
そのため、プロジェクト内に実験や設定を増やしていくほど、スニペットのコード量が増えてしまい、スニペットのファイルサイズが肥大化する課題があります。

また、一つのプロジェクトに1つのスニペットが紐づいていると、複数チームで同じページやコンテンツを対象とした実験が運用しにくい課題がありました。

スニペットをカスタマイズすることで、これらの課題を解決することができます。

※カスタムスニペット機能は、Optimizely Xでのみ使用できます。

デフォルトのスニペットとカスタマイズしたスニペットの違い

デフォルトのスニペット

Optimizelyのデフォルトのスニペットは、一つのプロジェクトに1つのスニペットが紐づいています。

カスタムスニペット

カスタムスニペットでは、一つのプロジェクトに2つ以上のスニペットが紐づいたり、複数のプロジェクトに跨る共通のスニペットが紐づいたりと、柔軟な設定が可能になります。

具体的には、以下のような利用事例があります。

利用事例

1.肥大化したスニペットの軽量化

ECサイトのように、ホームページ/複数の商品カテゴリページ/複数の商品説明ページがあるサイトで多くの実験を行っている場合、1つのスニペットに多くの実験の情報が含められる為、スニペットが肥大化しやすい傾向にあり、サイトのパフォーマンスに影響を与える可能性が考えられます。

カスタムスニペット機能を使用すると、ホームページ、商品カテゴリページ、商品説明ページの3つの個別のテストごとに固有のスニペットを設定/実行することができます。

スニペットが分割されることによりそれぞれのファイルサイズが小さくなる為、読み込むファイルサイズによって与えられるサイトのパフォーマンスへの影響を抑えることができます。

2.異なるチームで同一プロジェクトでの実験の運用を円滑にする

異なるチームで同じサイトの実験を行う場合、2つのチームメンバーを含んだ2つのプロジェクトを共有する必要があり、他のチームの実験を誤って妨害してしまう可能性がありました。

カスタムスニペット機能を使用すると、スニペットを2つのプロジェクトで共有することができるので、チームごとに、別々のプロジェクト内で実験を作成することができます。

設定手順 : 単一プロジェクト内で、コンテンツ単位でスニペットを複数設定する

1.カスタムスニペットを新規作成

[Setting] > [Implementation]に移動し、[Create custom snippet]ボタンを押下

次の項目を入力します。

Name カスタムスニペットのわかりやすい名前
Key スニペットURLに含まれる一意のスニペットID。アカウント固有のものでなければなりません
https://cdn.optimizely.com/public/[account_id]/s/[developer_key].js
Description スニペットの生成方法とその場所
Type スニペットを1つのプロジェクトにするのか、リンクされたプロジェクトにするのか
「Create a new snippet for a single project」を選択

Sources

Project スニペットが引き出すべき特定のプロジェクト(リンクされたプロジェクトの場合)。デフォルトは現在の単一プロジェクト。
Pages スニペットに含めるURL、または除外するURL(デフォルトはプロジェクト内のすべてのページを含む)を指定。URLパターンの指定も可能。

2.カスタムスニペットのオプション設定

以下のオプションを設定します。

Settings

jQuery Inclusion スニペットに含めるJQueryのバージョン。
プロジェクト設定で指定されているものと同じバージョンである必要があります。
Privacy プライバシー設定 ( 任意 )

3.対象ページへスニペットコードを設置します。

設定手順 : 複数のプロジェクトを跨いで共有する一つのスニペットを設定する

1.プロジェクトをリンクする

まず、スニペットを共有したいプロジェクトをリンクします。

2.カスタムスニペットを新規作成

[Setting] > [Implementation]に移動し、[Create custom snippet]ボタンを押下。

※スニペット設定と編集の権限は、カスタムスニペットに含まれるすべてのプロジェクトのオーナー、または管理者に限られます。

3.対象ページへスニペットコードを設置します。

さらに詳しい説明は、Optimizely 社の以下ページをご覧ください。
Custom snippets in Optimizely X Web
Create, view, and manage custom snippets in Optimizely X Web

Optimizelyのサポートに関するお問い合わせはこちらまで

コメントは受け付けていません。

ヘルプの関連記事

Optimizely X のユーザー権限
投稿日: 2017年11月27日
特定の条件で実験を発動する- Activation Mode(アクティブ化モード)-
投稿日: 2017年11月01日
Optimizely Classic の Cookie と localStorage
投稿日: 2017年10月04日
Optimizely X の Cookie と localStorage
投稿日: 2017年10月04日
どこまでスクロール(閲覧)されているか計測する方法
投稿日: 2017年09月21日

ヘルプのよく読まれている記事