GTMで配列やオブジェクトをまとめる「Object and Array Builder」変数テンプレート

配列？　オブジェクト？

「配列」や「オブジェクト」というのはJS変数の型の種類で、1つの変数内に複数のデータを保持するためのものとなります。
配列は「値を『,』区切りで持つ」型で、オブジェクトは「『プロパティ名』に対して『値』を持つ」型になります。

配列（Array）

値だけを「,」区切りで複数持っている型。

ソース内での記述：[～～,～～]
例）['aaa', 'bbb', 'ccc']

オブジェクト（Object）

名前と値がセットになって保存される型。

ソース内での記述：{～～: ～～,～～: ～～}
例）{'test1': 'aaa', 'test2': 'bbb', 'test3': 'ccc'}

また、これらはそれぞれ入れ子にすることも可能で、例えば複数のオブジェクトを配列として1つにまとめる、といった形になります。この場合は配列オブジェクトと呼ばれます。
馴染みのあるものでいうと、GAのeコマース用のデータレイヤー変数の商品データ（products）などが配列オブジェクトに当たりますね。

配列オブジェクト（Array + Object）

複数のオブジェクトを「,」区切りでまとめた型。

ソース内での記述：[{～～:～～, ～～:～～},{～～:～～, ～～:～～}]
例）[{
'name': 'product 1 name',
'id': 'product 1 SKU',
'price': 100,
'brand': 'product 1 brand',
'category': 'product 1 category',
'variant': 'product 1 variant'
}, {
'name': 'product 2 name',
'id': 'product 2 SKU',
'price': 100,
'brand': 'product 2 brand',
'category': 'product 2 category',
'variant': 'product 2 variant'
}]

と、言われてもJSに馴染みのない方からすれば「なんだか似ててよくわからない」「名前覚えなきゃダメ？」ってなるかと思います。
私もたまにそうなります。

今回の話で必要になるのは、要は「登録したいタグの該当箇所がどの種類なのか」という点のみです。
つまり[～～]か{～～}か[{～～}]か[[～～]]か、という違いだけで、それについては実際のタグのソースを見ればわかることですので、ひとまずはそういうのがあるんだな、程度で構いません。

Object（オブジェクト）の設定画面

一般的な単階層のObjectを生成します。

Array（配列）の設定画面

単階層の配列を生成します。
例えば購入完了ページで、購入商品の製品IDを抽出した配列を作成できたりします。

Extract from array object type variable

別の配列オブジェクト変数を指定して、そこから任意のプロパティの値だけを抽出します。
例えば[{key_a: ‘var_a1’, key_b: ‘var_b1’}, {key_a: ‘var_a2’, key_b: ‘var_b2’}]な値の変数を指定して「key_a」を抽出する設定にすれば、[‘var_a1’, ‘var_a2’]というkey_aの値だけを抜き出した配列にできます。

基本は指定した配列オブジェクトの数分だけの長さの配列になりますが、「Limit number of array object」オプションを有効化して数値を入力すると、長さの上限を設定できます。

Arrays are expanded in “Value” and concatenate

有効化すると、Valueとして配列型の変数を指定した際に、配列を展開（連結）させることができます。
例えば[“Array1”, “Array2”, “Array3”]と[“Array4”, “Array5”, “Array6”]という2つの配列をValue欄で設定した場合、Arrays are expanded in “Value” and concatenateにチェックを入れないと
[[“Array1”, “Array2”, “Array3”],[“Array4”, “Array5”, “Array6”]]
になり、チェックを入れると連結されて
[“Array1”, “Array2”, “Array3”, “Array4”, “Array5”, “Array6”]
となります。

Array + Object（配列オブジェクト）の設定画面

「Input array」で指定した別の配列オブジェクトの値を利用して、配列オブジェクトを生成します。

Limit number of array object

基本はInput arrayで指定した配列オブジェクトの数分だけの長さの配列オブジェクトになりますが、「Limit number of array object」オプションを有効化して数値を入力すると、長さの上限を設定できます。

Array + Array（二重配列）の設定画面

「Input array」で指定した別の配列オブジェクトの値を利用して、二重配列を生成します。

Limit number of array object

基本はInput arrayで指定した配列オブジェクトの数分だけの長さの配列オブジェクトになりますが、「Limit number of array object」オプションを有効化して数値を入力すると、長さの上限を設定できます。

利用上の注意点

• Object and Array Builderテンプレートでは、基本的に複数階層の入れ子構造は単独では設定できません。
  • 例えばGAの通常eコマース用のデータレイヤー変数（transactionIdやtransactionTotal（値は単独）と、transactionProducts（値が配列オブジェクト）が並ぶ構造）のようなものです。
  • この場合はtransactionProducts用にArray objectとして変数を登録して、その後別途Objectとして変数登録してtransactionProductsというプロパティの値として先に登録したArray objectの変数を指定してください。
• Array + ObjectおよびArray + Arrayでは「複数の異なる変数から」の値の利用はできません。
  • 単独の変数としてデータがまとまっている必要があります。

“Object and Array Builder” is a variable template that creates arrays and objects

By importing the “Object and Array Builder” variable template, you can register variables that return arrays and objects with specified values and array objects as values.

Point

• Variable templates that generate Array, Object, Array object, etc.
• Object creates an object with the specified name (property name) and value.
• Array generates an array with the specified values.
  • If you specify an array variable as a value, you can optionally perform “array expansion and concatenation“.
  • By specifying a variable whose value is an array object, it is possible to generate an array that extracts only the value of any property from the specified variable.
• Array objects and Array in array can use the values of properties of another array object.
• “If the specified value is not found” can be set as an option
  • “Do nothing” “Ignore line” “Replace with another string”
  • For “Array object” and “Array in array”, you can also “leave the string specified as the property name”.

Array? Object?

An “array” or “object” is a type of JS variable that stores multiple data in one variable.
An array is a type that has “values ​​separated by ‘,‘”, and an object is a type that has “value” for “property name”.

Array

A type with multiple values separated by “,”.

Code: [～～,～～]
Example) ['aaa', 'bbb', 'ccc']

Object

A type whose name and value are stored as a set.

Code: {～～: ～～,～～: ～～}
Example) {'test1': 'aaa', 'test2': 'bbb', 'test3': 'ccc'}

Each of these can be nested, for example, by combining multiple objects into an array. In this case, it is called an array object.
Compare that to the familiar ones, GA eCommerce products data is an array object.

Array + Object

Multiple object types separated by “,”.

Code: [{～～:～～, ～～:～～},{～～:～～, ～～:～～}]
Example) [{
'name': 'product 1 name',
'id': 'product 1 SKU',
'price': 100,
'brand': 'product 1 brand',
'category': 'product 1 category',
'variant': 'product 1 variant'
}, {
'name': 'product 2 name',
'id': 'product 2 SKU',
'price': 100,
'brand': 'product 2 brand',
'category': 'product 2 category',
'variant': 'product 2 variant'
}]

However, if you’re new to JS, you might think “it’s a bit similar and I’m not sure” or “Do I need to remember this name?”
Sometimes I do too.

The only thing you need to understand in this article is, “What kind of code do you want to turn into variables in tags?”.
In other words, the only difference is [～～], {～～}, [{～～}] or [[～～]]. You can learn about it by looking at the “actual tag source”.

Import method

Importing is very easy because it is listed in the community template gallery.
You can import the latest template at any time from within the GTM management screen.

1. Open a GTM container that uses “Object and Array Builder”

   

2. Open the template list screen from “Template” on the left menu

   

3. Click the Search Gallery button at the top right of the Variable Templates block

   

4. Find “Objects and Array Builder” and click

   

5. When the details of the template are displayed, click the “Add to workspace” button on the upper right

   

6. A confirmation alert will be displayed. Click the “Add” button at the bottom right

   

7. Done (If you create a version, you can use it in other workspaces)

Variable setting screen and each setting column

Modify the “Type of this variable” field at the top and select the value of the variable to be registered.

The part surrounding the setting field under “Output” is changed to the corresponding part according to the selected type.
Therefore, if you look at the source of the tag you use, you can easily select the source that has the same enclosing symbol.

“Object” setting screen

Create a general single-level object.

“Array” setting screen

Create a single-level array.
For example, on a purchase completion page, you can create an array that extracts the product IDs of the purchased products.

Extract from array object type variable

Specify another array object variable and extract only the value of any property from it.
For example, when using variables of [{key_a: ‘var_a1’, key_b: ‘var_b1’}, {key_a: ‘var_a2’, key_b: ‘var_b2’}]. If it is set to extract “key_a “, only [‘var_a1’, ‘var_a2’] of key_a value is extracted And an array is created.

Basically, the array will be the same length as the specified number of array objects, but you can set a limit on the length by entering a number with the “Limit the number of array objects” option enabled.

Arrays are expanded in “Value” and concatenate

When enabled, arrays can be expanded and concatenated if the array type variable is specified as a Value.
For example, when using variables of [“Array1”, “Array2”, “Array3”] and [“Array4”, “Array5”, “Array6”] set in Value columns. Checking Arrays are expanded in “Value” and concatenate option case:
[[“Array1”, “Array2”, “Array3”],[“Array4”, “Array5”, “Array6”]]
Other not checking option case:
[“Array1”, “Array2”, “Array3”, “Array4”, “Array5”, “Array6”]

“Array + Object” setting screen

Creates an array object using the values of another array object specified by “Input array“.

Limit number of array object

Basically, the array will be the same length as the specified number of array objects, but you can set a limit on the length by entering a number with the “Limit the number of array objects” option enabled.

“Array + Array” setting screen

Creates a array in array using the values of another array object specified by Input array.

Limit number of array object

Basically, the array will be the same length as the specified number of array objects, but you can set a limit on the length by entering a number with the “Limit the number of array objects” option enabled.

There is a column titled “Setting for ‘Value’ (or property) with without value“. This is almost common for each type.
This is to set the type of action to take if the specified value is not found.

No touch

If the value is undefined, leave it as ‘undefined’.

Ignore rows

Lines with values such as undefined are ignored and deleted.

Convert to…

If the value is undefined, the specified string will be used as a substitute value.

Treat input string as value

If the value is undefined, the entered string is used as is.

Also, as a result of selecting “Ignore rows” above, all lines may be ignored and empty.
In that case, the initial value of the variable can be set in the “This variable default value” field.

Example of use: When using GA extended e-commerce data output on the purchase completion page

This “Object and Array Builder” template is a variable template for “Easy to use other output data”.
For example, suppose GA enhanced e-commerce is already output as a data layer variable on the purchase completion page.

Data layer variables output for GA enhanced e-commerce

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
	'ecommerce': {
		'purchase': {
			'actionField': {
				'id': '1234',
				'affiliation': 'Acme Clothing',
				'revenue': '9800',
				'tax':'300',
				'shipping': '400',
				'coupon': 'SUMMER_SALE'
			},
			'products': [
			{
				'id': 'DD44',
				'name': 'T-Shirt',
				'brand': 'Google',
				'category': 'Apparel',
				'price': '980',
				'quantity': '1',
				'coupon': 'SUMMER_SALE'
			},
			{
				'id': 'AA1243544',
				'name': 'Socks',
				'brand': 'Google',
				'category': 'Apparel',
				'price': '1980',
				'quantity': '2'
			}
			]
		}
	}
});
</script>

In the above, data such as the purchase price and the purchased product are output.
At this point, if you register the purchase amount, transaction ID, etc. as data layer variables, you can easily use them as they are. However, most of the data for purchased products cannot be used with tags from other tools because the properties are defined for GA.

In some cases, you can use a bit of processing, such as “extract only some” or “rename properties”.
In that case, first register “ecommerce.purchase.products” as a data layer variable so that it can be referenced from other variables. It can then be used in variables in the “Object and Array Builder”.

For example, you need an array that extracts only “id” from “products”.
Select “Array”, check “Extract from array object type variable”, specify a data layer variable for “Input array”, and enter “id” in the Output column.

For example, extract “id” with another name.
Select “Array + Object”, specify a data layer variable for “Input array”, “Key” in the [Output] column: “sku”, “Object property from the ‘input array'”: “id”.