2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【GTM】JSON-LD形式の構造化データから必要な情報を取得する

Last updated at Posted at 2021-06-16

近頃はSEOのためにJSON-LD形式で構造化データを用意しているサイトが増えてきました。
本記事ではその構造化データから情報を抽出してGTMで変数として利用するためのコードをご紹介いたします。

サンプルコード

以下サンプルコードのTARGET_KEYの値とjsonldの値の数字を取得したいJSON-LDのデータに合わせて変更の上、カスタムJS変数に登録して使用して下さい。

function(){
  var TARGET_KEY = '##ここで欲しいデータを指定##';
  var jsonld = JSON.parse(document.querySelectorAll('script[type="application/ld+json"]')[0].innerText);
  var val = jsonld;
  var keys = TARGET_KEY.split('.');
  for(var i=0; i<keys.length&&keys[i]!==''; i++){
    val = val[keys[i]];
  }
  return val;
}

GTMへの実装例
image.png

使用例

実際のサイトの構造化データを元に、目的のデータを取得するためのコードの調整例を示します。

AppleのAirPods Proの商品詳細ページで商品名を取得したい場合

対象ページ https://www.apple.com/jp/airpods-pro/
商品詳細に関わる構造化データはHTML内に存在しているJSON-LDの中で上から1番目にあるJSON-LD内に存在しており、
JSON内オブジェクト内のプロパティnameの値に商品名が出力されているので、

  • jsonldの値の角括弧内の数字 : 0 (配列は上から0番目、1番目、…と数えるため、1番目→0)
  • TARGET_KEYの値 : name
function(){
  var TARGET_KEY = 'name';
  var jsonld = JSON.parse(document.querySelectorAll('script[type="application/ld+json"]')[0].innerText);
  var val = jsonld;
  var keys = TARGET_KEY.split('.');
  for(var i=0; i<keys.length&&keys[i]!==''; i++){
    val = val[keys[i]];
  }
  return val;
}

image.png
※ Console内で動かすため、コードを (function(){…})();で囲って実行しています。

楽天市場の商品詳細ページで商品価格を取得したい場合

対象ページ https://biccamera.rakuten.co.jp/item/4548736121133/
商品詳細に関わる構造化データはHTML内に存在しているJSON-LDの中で上から1番目にあるJSON-LD内に存在しており、
JSON-LDの中が配列となっており、配列の2つ目の要素の中のオブジェクトのoffersの中のpriceプロパティに目的のデータがあるのでこれをドット区切りで表現して、

  • jsonldの値の角括弧内の数字 : 0 (配列は上から0番目、1番目、…と数えるため、1番目→0)
  • TARGET_KEYの値 : 1.offers.price (配列は上から0番目、1番目、…と数えるため、2つ目→1)
function(){
  var TARGET_KEY = '1.offers.price';
  var jsonld = JSON.parse(document.querySelectorAll('script[type="application/ld+json"]')[0].innerText);
  var val = jsonld;
  var keys = TARGET_KEY.split('.');
  for(var i=0; i<keys.length&&keys[i]!==''; i++){
    val = val[keys[i]];
  }
  return val;
}

image.png
※ Console内で動かすため、コードを (function(){…})();で囲って実行しています。

以上

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?