I have an array containing ecommerce order info that I am pulling from the dataLayer into GTM. I have defined this order info as a variable that I want to pass on to a TikTok pixel for a Payment Complete event.
The problem I face is that the TikTok pixel expects the key name "id" to be called "content_id" and the key name "name" to be called "content_name". I understand that it is possible to perform a search and replace using a Custom Javascript variable in GTM, and then send the edited array on to the pixel. But I cannot figure out how to do the search and replace part using JavaScript. Here is what I am working with, this is what is in my variable:
[
{
id: "JBLANC015",
name: "Blanc Diffuser, Maldivian Breeze",
category: "Diffusers",
price: "29.90",
quantity: "3"
},
{
id: "CH-AH-SHK-GREEN",
name: "Hand Gesture Candle, Shaka Green",
category: "Candles",
price: "39.90",
quantity: "1"
}
]
This is just an example, the array may contain more or less products, all instances of "id" and "name" need to be replaced with the correct ones that the pixel will recognize.
Here is an extra-explanatory screencast video in case that helps.
I have tried this:
function(){
var str = {{my array variable}};
return str.replace("id", "content_id");
}
But no success.
Edit. After understanding the difference between dealing with strings and arrays I got something like this which is working for changing one key at a time:
function(){
var products =
[
{
name: "Hand Gesture Candle, Shaka Green",
id: "21834",
price: "39.900000",
brand: "Candlehand",
category: "Candles"
}
]
;
products.forEach(function(obj) {
obj.content_name = obj.name;
delete obj.name;
});
return products;
}
This does the job, but not when I plug in a variable that is pulling the array straight and live from the website.
function(){
var products = {{my array variable}};
products.forEach(function(obj) {
obj.content_name = obj.name;
delete obj.name;
});
return products;
}
When I use this version seen above with the variable the "name" key gets deleted and I do not get the changed "content_name" key in the returned data. No doubt something simple that escapes me.
There is a similar question here Google Tag Manager > dataLayer variable find and replace with javascript variable but could not get the suggested answer to work for me or to extract a working solution from it.
Any help will with this would be super appreciated.
As discussed I post this new answer to your updated question.
I tried delete as well, but as you experienced it will remove the assigned value as well.
But you can also create a new array, which returns the changed products:
function(){
var products =
[
{
name: "Hand Gesture Candle, Shaka Green",
id: "21834",
price: "39.900000",
brand: "Candlehand",
category: "Candles"
}
];
var changes = [];
products.forEach(function(obj) {
var product = {
content_id: obj.id,
content_name: obj.name,
price: obj.price,
brand: obj.brand,
category: obj.category
};
changes.push(product);
});
return changes;
}
My mistake in the other answer was to use let. We should use var instead, since let is pretty recent.
For the future, please read how much research is expected of you here at SO. The expectation is that you don't try once, fail and immediately go asking. You know you must learn JavaScript, so check tutorials and documentation.
Beginner questions are fine, but you have to show you have done your own work to get to that point.
See below for a quick demonstration of above code (added a console.log() call).
(function(){
var products =
[
{
name: "Hand Gesture Candle, Shaka Green",
id: "21834",
price: "39.900000",
brand: "Candlehand",
category: "Candles"
}
]
;
var changes = [];
products.forEach(function(obj) {
var product = {
content_id: obj.id,
content_name: obj.name,
price: obj.price,
brand: obj.brand,
category: obj.category
};
console.log(product);
changes.push(product);
});
return changes;
})();