javascriptのオブジェクト型データへ変数を渡すにはどうしたら良いでしょうか？

Question

YDNサイトリターゲティングタグをコンテンツ（買い物かご内）に設置したいと考えています。

下記のタグを作成して買い物かごheaderへ設置しましたが、
変数 result を yahoo_retargeting_items 属性に指定したのですが発火しませんでした。

オブジェクト型のデータへ変数を渡してあげるにはどのように指定すれば良いでしょうか。
大変お手数ですがご教示のほど宜しくお願い申し上げます。

<script>
var strItems = "{item_id: 'item155', category_id: '', price: '1590', quantity: '1'},";
var result = strItems.slice(0, -1);

window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({
  "type":"yjad_retargeting",
  "config":{
    "yahoo_retargeting_id": "XXXXXXXXX",
    "yahoo_retargeting_label": "cart",
    "yahoo_retargeting_page_type": "cart",
    "yahoo_retargeting_items":[ result ]
  }
});
</script>

変数 strItems はECショップオリジナルのタグで生成されるので2商品カートに入っていればこのような内容になります。

var strItems = "{item_id: 'item155', category_id: '', price: '1590', quantity: '1'},{item_id: 'item156', category_id: '', price: '2200', quantity: '1'},";

末尾のカンマが不要になるので末尾1文字を slice しています。

var result = strItems.slice(0, -1);

またコードの発火確認は、Google Chrome デベロッパーツール（Network）でしています。

---

★2021/1/29 追記です。

以下はYahooガイドに掲載されていた完成例です。
「yahoo_retargeting_items」というプロパティへオブジェクトな配列になるように配列を追加していかなければなりません。

<script>
window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({
  "type":"yjad_retargeting",
  "config":{
    "yahoo_retargeting_id": "XXXXXXXXX",
    "yahoo_retargeting_label": "cart",
    "yahoo_retargeting_page_type": "cart",
    "yahoo_retargeting_items":[
      {item_id: 'item1', category_id: 'cate1', price: '100', quantity: '1'}
      ,{item_id: 'item2', category_id: 'cate2', price: '200', quantity: '2'}
      ,{item_id: 'item10', category_id: 'cate10', price: '1000', quantity: '10'}
    ]
  }
});
</script>

Answer 1

的外れかもしれませんが。

yahoo_retargeting_itemsで要求されるのはオブジェクトの配列ではないでしょうか？
resultに入っているのは文字列であることに注意しましょう。

また、resultに入っているのはJSONとしては不適合です。
そのままJSON.parseに渡してもエラーで弾かれるだけですので、JSONに適合出来るように構成して下さい。

※追記
JSONは配列も構成要素として記述できます。こんな感じで。

var strItems = '[{"item_id": "item1", "category_id": "", "price": "1200", "quantity": "1"},{"item_id": "item2", "category_id": "", "price": "2000", "quantity": "1"}]';
var obj = JSON.parse(strItems);

この場合、objの中身は"オブジェクト二つを要素として持つ配列"となりますので、
yahoo_retargeting_itemsに渡すのは[obj]ではなくobjになります。

...
"yahoo_retargeting_items":obj
...

※更に追記
JSONをどのように記述すればいいかはRFC8259(リンク先は日本語訳)で厳密な書式が定義されています。
手っ取り早く構造化されたデータをJSONに変換したいのであれば、JSON.stringifyを使えばokです。

Comments

[mvc_php]

ご回答いたきまして有難う御座います。

＞yahoo_retargeting_itemsで要求されるのはオブジェクトの配列ではないでしょうか？

はい、その通りです。
オブジェクトの配列を要求されております。

JSONについて初めてでしたので調べてみたところ、フォーマットが同じでした。

JSONに適合できるように下記のように書いてみました。

var obj = '{"item_id": "item1", "category_id": "", "price": "1200", "quantity": "1"}';
var result = JSON.parse(obj);

window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({
"type":"yjad_retargeting",
"config":{
"yahoo_retargeting_id": "XXXXXXXXX",
"yahoo_retargeting_label": "cart",
"yahoo_retargeting_page_type": "cart",
"yahoo_retargeting_items":[ result ]
}
});

無事に発火することを確認できました。

しかしながら、下記のように商品が２個以上の場合はうまくいかず困っております。

var obj = '{"item_id": "item1", "category_id": "", "price": "1200", "quantity": "1"},{"item_id": "item2", "category_id": "", "price": "2000", "quantity": "1"}';
var strItems = JSON.parse(obj);

この内容ではJSONに適合しないでしょうか？
大変お手数ですがご教示のほど宜しくお願い致します。

[mvc_php]

追記させていただきます。
商品を2つ追加した際のエラー内容です。

Uncaught SyntaxError: Unexpected token , in JSON at position 73
at JSON.parse (<anonymous>)

[mvc_php]

ご連絡が大変遅くなり申し訳御座いません。
持病が悪化し暫く休んでいて昨夕から復帰致しました。

「オブジェクト２つを要素として持つ」というところが鍵だったんですね。
構造化されたデータを JSON.stringify を使って最後に JSON.parse すると良いわけですね。（とても画期的ですね！）
リファレンスのご紹介までいただきまして有難う御座います。勉強になります！

当初は何が何やら分からず、挫折しそうでしたがJSONに直に触れることで楽しくなってきました。
このようなキッカケをいただけて大変嬉しく思います。
有難う御座います。

objの各要素はカート内のタグで自動出力されるので末尾の「,」カンマが不要になり、
最終的に末尾2文字までをスライスして end-array を代入して JSON.parse することにしました。

var obj = '[{"item_id": "item1","category_id":"","price":"1200","quantity":"1"},{"item_id": "item2","category_id":"","price":"2000","quantity":"1"},]';
obj = obj.slice(0, -2);
obj += "]";

var json = JSON.parse(obj);

window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({
"type":"yjad_retargeting",
"config":{
"yahoo_retargeting_id": "XXXXXXXX",
"yahoo_retargeting_label": "cart",
"yahoo_retargeting_page_type": "cart",
"yahoo_retargeting_items":json
}
});

配列の長さの分、for や foreach でまわして配列を作成するのが正しい方法なのかと思いますが...
今後は試行錯誤しながら納得のいくように頑張ってみたいと思います。

的確なアドバイスを本当に有難う御座いました。

Answer 2

最善策かわかりませんがytagに引数を参照させるところからでは？
function(arg){hoge.push(arg)}

どうしてもargumentsからひっぱりたいなら

var a=[];
function func(){
  a.push(...arguments);
}
func("hoge");
console.log(a);

Comments

[mvc_php]

ご回答いたきまして有難う御座います。

ytagへ引数を参照させることをすっかり失念していました。
ヒントを与えていただきまして有難う御座います。

下記のように function items() へ配列を渡してみました。

var arry = [];

function items(){
arry.push(...arguments);
}

items('item1','1000','1','item2','2000','1','item3','1500','2');

window.yjDataLayer = window.yjDataLayer || [];
function ytag() {
yjDataLayer.push(arguments);
}
ytag({
"type":"yjad_retargeting",
"config":{
"yahoo_retargeting_id": "XXXXXXXXXX",
"yahoo_retargeting_label": "cart",
"yahoo_retargeting_page_type": "cart",
"yahoo_retargeting_items":[
{item_id: arry[0], category_id: '', price: arry[1], quantity: arry[2]}
,{item_id: arry[3], category_id: '', price: arry[4], quantity: arry[5]}
,{item_id: arry[6], category_id: '', price: arry[7], quantity: arry[8]}
]
}
});

配列数は商品3個の場合ですと 上記で発火を確認できましたが、
商品10個までを取得できるように単純に下記のようにしてみました。

"yahoo_retargeting_items":[
{item_id: arry[0], category_id: '', price: arry[1], quantity: arry[2]}
,{item_id: arry[3], category_id: '', price: arry[4], quantity: arry[5]}
,{item_id: arry[6], category_id: '', price: arry[7], quantity: arry[8]}
,{item_id: arry[9], category_id: '', price: arry[10], quantity: arry[11]}
,{item_id: arry[12], category_id: '', price: arry[13], quantity: arry[14]}
,{item_id: arry[15], category_id: '', price: arry[16], quantity: arry[17]}
,{item_id: arry[18], category_id: '', price: arry[19], quantity: arry[20]}
,{item_id: arry[21], category_id: '', price: arry[22], quantity: arry[23]}
,{item_id: arry[24], category_id: '', price: arry[25], quantity: arry[26]}
,{item_id: arry[27], category_id: '', price: arry[28], quantity: arry[29]}
]

商品10個をカートに入れた場合は正常に発火しましたが
商品が10個未満の場合ですと発火しませんでした。

その場合はどのような考え方をすべきでしょうか。

大変お手数ですがご教示のほど宜しくお願い致します。