タグ導入 キュレーション機能

目次

キュレーション機能とは

キュレーション機能についての詳しい内容はこちらの記事をご確認ください。

タグ導入とは

STAFF STARTが提供する「JavaScriptのタグ」をサイトに設置するだけで、ECサイト上にSTAFF STARTのコンテンツを表示することができるサービスです。

スクリーンショット 2024-07-24 12.34.48.pngスクリーンショット 2024-05-31 22.57.17.png

ウィジェットの種類

ウィジェットは「1ページまるごと型」と「既存ページ組込型」の2パターンご用意しております。
スクリーンショット 2024-07-23 17.38.35.png

スクリーンショット 2024-11-14 15.24.29.png

■1ページまるごと型

ヘッダやフッタだけを用意した空白ページを用意いただき、ページのメインコンテンツ部分にキュレーション一覧を1ページにまるごと組み込むタイプのウィジェットです。
ウィジェットの種類は以下ご用意しています。

  1. キュレーション一覧ページ

既存ページ組込型ウィジェットの「すべてを見る」からの遷移先も1ページまるごと型が組み込まれたキュレーション一覧ページになります。

■既存ページ組込型

既存ページの一部にキュレーションのコンテンツを表示させることができるタイプのウィジェットです。
ウィジェットの種類は以下ご用意しています。

  1. キュレーションブロック(一覧)
    • TOPページ等の任意のページ内に、キュレーションの一覧を埋め込むことが可能です。
  2. キュレーションブロック(商品詳細)
    • 商品詳細ページ内に、「この商品を使ったスナップ」を絞り込んで埋め込むことが可能です。

 

設置するタグ・組み込み作業について

各ウィジェット毎の組み込み作業についてご案内いたします。

初期対応
1ページまるごと型 / キュレーション一覧ページ
既存ページ埋め込み型 / キュレーションブロック(一覧)
既存ページ埋め込み型 / キュレーションブロック(商品詳細)

 

初期対応

初めにヘッダ・フッタだけを用意した空白ページを1ページ作成いただき、白紙ページのURLを弊社までお知らせください
(URL例 : https://example.com/usersnap/ )
白紙ページのURLをお知らせいただいた後、弊社側での初期設定が完了するとウィジェット表示が可能になります。

 

1ページまるごと型 / キュレーション一覧ページ

初期対応で作成いただいた空白ページに、以下のタグを埋め込んでください。

<div
id="ss-userSnapList"
data-curation-code="[キュレーションコード]"
data-pv-tracking-user-id="[顧客id]"
></div>
<script src="https://assets.staff-start.com/embedded/js/w.js?projectId=userSnapList&amp;merchantId=[マーチャントid]"></script>
  • 設定する値について
項目   備考
div id 必須
キュレーション一覧ウィジェットでは必ず固定で
ss-userSnapList を設定してください。
merchantId 必須 初期導入時にご案内する貴社専用のIDです。不明な場合は担当者までご連絡ください。
projectId 必須 キュレーション一覧ウィジェットでは userSnapList を設定してください。
data-curation-code 任意 管理画面で作成したキュレーション毎に出し分けをしたい場合に指定してください。指定するキュレーションコードは管理画面 > キュレーション管理をご確認ください。
data-pv-tracking-user-id 任意 PV実績とEC顧客IDを紐付けたい場合にEC顧客ID指定してください。

 

既存ページ埋め込み型 / キュレーションブロック(一覧)

キュレーション一覧ブロックを埋め込みたい箇所に、以下のタグを埋め込んでください。

<div
id="ss-userSnapBlock"
data-curation-code="[キュレーションコード]"
data-more-link-curation-code="[キュレーションコード]"
data-pv-tracking-user-id="[顧客id]"
></div>
<script src="https://assets.staff-start.com/embedded/js/w.js?projectId=userSnapBlockTop&amp;merchantId=[マーチャントid]"></script>
  • 設定する値について
項目   備考
div id 必須
キュレーションブロック(一覧)ウィジェットでは必ず固定で
ss-userSnapBlock を設定してください。
merchantId 必須 初期導入時にご案内する貴社専用のIDです。不明な場合は担当者までご連絡ください。
projectId 必須 キュレーションブロック(一覧)ウィジェットでは userSnapBlockTop を設定してください。
data-curation-code 任意 管理画面で作成したキュレーション毎に出し分けをしたい場合に指定してください。指定するキュレーションコードは管理画面 > キュレーション管理をご確認ください。
data-more-link-curation-code 任意 「すべてを見る」の遷移先ページでも指定したキュレーションコードを引き継ぐために、"data-curation-code"を指定した場合は、必ず同じキュレーションコードを指定してください。
data-pv-tracking-user-id 任意 PV実績とEC顧客IDを紐付けたい場合にEC顧客ID指定してください。

 

既存ページ埋め込み型 / キュレーションブロック(商品詳細)

商品詳細ページ内に、「この商品を使ったスナップ」を表示することが出来ます。
キュレーション一覧ブロックを埋め込みたい箇所に、以下のタグを埋め込んでください。

<div
id="ss-userSnapBlock"
data-curation-code="[キュレーションコード]"
data-product-code="[商品品番]"
data-pv-tracking-user-id="[顧客id]"
></div>
<script src="https://assets.staff-start.com/embedded/js/w.js?projectId=userSnapBlockDetail&amp;merchantId=[マーチャントid]"></script>
  • 設定する値について
項目   備考
div id 必須
キュレーションブロック(商品詳細)ウィジェットでは必ず固定で
ss-userSnapBlock を設定してください。
merchantId 必須 初期導入時にご案内する貴社専用のIDです。不明な場合は担当者までご連絡ください。
projectId 必須 キュレーションブロック(商品詳細)ウィジェットでは userSnapBlockDetail を設定してください。
data-product-code 必須 「この商品を使ったスナップ」を絞り込むため、商品の品番を指定してください。
data-curation-code 任意 管理画面で作成したキュレーション毎に出し分けをしたい場合に指定してください。指定するキュレーションコードは管理画面 > キュレーション管理をご確認ください。
data-pv-tracking-user-id 任意 PV実績とEC顧客IDを紐付けたい場合にEC顧客ID指定してください。
注意:

data-product-code で指定可能な商品はSTAFF STARTに連携されている商品のみです。
商品マスタで連携しているメーカー品番(base_product_code)と一致する値を指定してください。

 

ご留意事項

タグ導入を利用する場合、貴社が当社の許諾した範囲を超えて、当社の提供するSTAFF STARTに係るシステムを改変した場合(html、CSS、Script等のコードを書き換える場合を含みますが、これに限りません。)、当該改変によって貴社に生じた損害について、当社はいかなる責任も負わない点、予めご了承願います。

 

よくある質問

Q. デザインの調整は可能ですか?
A. タグ導入用のデザインテンプレートをご利用いただくため、デザインの調整はできません。

Q. サイト側でデザイン調整をしてもいいですか?
A.可能です。ただし、貴社カスタマイズ起因の損害については当社はいかなる責任も負いません。

Q. タグ導入が対象となる機能を教えてください。
A.  「SNAP PLAY機能」「キュレーション機能」が対象となります。今後、他機能の実装も検討中です。

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています