The Sprocket Developer Hub

The Sprocket Developer Hub

Sprocket の developer hub にようこそ。このサイトでは API 仕様や JavaScript タグ仕様など、Sprocket を活用していただくうえでの技術情報が掲載されています。適宜参照しながら Sprocket をご活用ください。

    

データ連携(リアルタイム取り込み)導入手順

スタートアップガイド

  • 本記事ではデータ連携タグ(リアルタイム取り込み)の導入手順を説明します。
  • 本記事の手順を実施頂くことで、データ連携タグがサイト内で動作するようになります。
  • Sprocket タグを既に導入していることを前提とします。

目次

  1. データ連携タグの動作
  2. サイトへのタグ埋め込み
  3. エラーチェック

1. データ連携タグの動作

このセクションではデータ連携タグの挙動を説明します。
本資料では[ユーザー連携タグ]を例にとって説明を行いますが、他のタグの場合も基本的な動作は同じです。

データ送信

1.Sprocket タグが埋め込まれているページを開いた上で、ブラウザの開発者ツールのコンソールでSprocket Developer Hub ユーザー属性タグに記載されている[ユーザー属性タグ]のサンプルコードを実行します。

(function() {
  var props = {
    userId: '123456',
    point: 200,
    group: 'VIP',
    purchase: {
      initialDate: '2019-01-01T12:00:00+09:00',
      totalCount: 10
    }
  };
  console.log('Sprocket: User props:\n' + JSON.stringify(props, null, '  '));
  SPSDK.user(props);
})();

2.コードを実行するとユーザーに関する上記のデータ属性が Sprocket プラットフォームに送信されます。このとき、引数に与えたデータが下記のようにコンソールに表示されます。

Sprocket: User props:
{
  "userId": "123456",
  "point": 200,
  "group": "VIP",
  "purchase": {
    "initialDate": "2019-01-01T12:00:00+09:00",
    "totalCount": 10
  }
}

以上がデータ送信時が正常に完了した場合の挙動です。
スクリプトの実行後にエラーメッセージが表示されなければ送信は成功しています。

送信エラー

バリデーション仕様で禁止されている引数を渡した場合はエラーが発生します。
実際にエラーが発生するような引数を与えて挙動を確認します。

1.Sprocket Developer Hub ユーザー属性タグのサンプルコードに不正な引数を与えた下記のスクリプトをブラウザの開発者ツールのコンソールから実行します。

// 送信に失敗するスクリプト
(function() {
  var props = {
    userId: '123456',
    point: '200', // 数値型であるべきプロパティが文字列型になっている。
    group: 'VIP',
    purchase: {
      initialDate: '2019-01-01T12:00:00+09:00',
      totalCount: 10
    }
  };
  console.log('Sprocket: User props:\n' + JSON.stringify(props, null, '  '));
  SPSDK.user(props);
})();

2.この場合はコンソールに次のようにエラーメッセージが表示されます。

Sprocket: User props:
{
  "userId": "123456",
  "point": "200",
  "group": "VIP",
  "purchase": {
    "initialDate": "2019-01-01T12:00:00+09:00",
    "totalCount": 10
  }
}

sprocket-jssdk.js:55 ValidationError: point type or format is invalid.

このようにバリデーションエラーが発生します。
エラーが発生した場合データは送信されません。

📘

エラーの原因

エラーが発生するケースとしては、引数のValueの型が期待したものと異なっている、必須プロパティが足りないなどがあります。詳しい仕様はSprocket Developer Hub ユーザー属性タグをご覧ください。

以上がデータ連携タグの基本的な動作です。

2. サイトへのタグ埋め込み

サイトへデータ連携タグを埋め込むことで、データ連携が有効化されます。
タグの埋め込みの際には、各データ連携タグの解説ページを参考に下記の作業を行ってください。

📘

ツールを使ってデータ連携タグを埋め込むには

  • Google タグマネージャでのデータ連携タグ導入手順はこちらをご覧ください。
  • ecbeing, futureshopなどのECプラットフォームではデータ連携タグの導入をサポートしています。詳しくはデータ連携(ECサイト)をご確認ください。
  1. Sprocket Developer Hub ユーザー属性タグなどに例示されているデータ連携タグを、タグマネージャなどを使ってデータを取得したい Web ページに出力してください。
  2. 各データ連携タグの解説ページに掲載されているサンプルコードを参考に、送信したいデータ項目が JavaScript 変数に吐き出されるようにカスタマイズを行ってください。
  3. カスタマイズが終わったらコンソールを確認します。「1.データ連携タグの動作」で確認したログが表示されていればタグが埋め込めています。

3. エラーチェック

データ連携タグの導入が完了したら、最後にエラーチェックを行います。

データ連携タグの実行時に「コンソールにログが出力され、エラーメッセージが出ない」状態になっていればデータ連携が正常に動作しています。この動作になりましたらデータ連携タグの導入は完了です。

上記の動作にならない時は実装に不備がありますので、下記を確認してください。

コンソールにエラーが出る場合

コンソールにエラーが出るようであれば何らかの不正な形式のデータが引数に含まれています。(「1.ユーザー属性タグの動作確認」を参照ください。)
Sprocket Developer Hub [ユーザー属性タグ]のバリデーション仕様とコンソールのエラーメッセージを比較し、引数の形式を修正してください。

ログが出力されない場合

データ連携タグが実行されていません。(データ連携タグが実行されていれば、エラーの場合でも引数の情報はコンソールに出力されます)
タグが出力されていない、Sprocket タグが入っていないなどが原因として考えられます。

Updated 5 months ago

データ連携(リアルタイム取り込み)導入手順


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.