migrating to Google Analytics 4<\/a><\/strong>. The eCommerce object structure is a bit different between the two analytics versions, however, as mentioned, the main topic of this article is to understand the data layer. So in our example, we will show what an eCommerce purchase event might look like in the data layer in UA and how to access the different variables.\u00a0<\/p>\n[\/et_pb_text][et_pb_image src=”https:\/\/wearekemb.com\/wp-content\/uploads\/2023\/01\/analyzify_purchase-data-layer-.png” title_text=”analyzify_purchase-data-layer-” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_text _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
In Javascript, the {} designates an object. We can see that we have three \u201cnested\u201d objects,\u00a0<\/span>ecommerce, purchase, and actionField.<\/strong>\u00a0<\/span>Within those objects there are variables (remember that variables are defined in \u201cpairs\u201d meaning a\u00a0<\/span>key<\/strong>\u00a0<\/span>and a\u00a0<\/span>value<\/strong>) that are important to extract.\u00a0<\/p>\nWe also notice the \u201canalyzify_purchase\u201d event was pushed to the data layer. In order to first track the event, we need to set up a\u00a0<\/span>trigger\u00a0<\/span><\/strong>that will fire a tracking tag. We can use it as a\u00a0<\/span>custom event<\/strong>\u00a0<\/span>trigger. Remember, the name of the event should\u00a0<\/span>exactly match<\/strong>\u00a0<\/span>the name of the\u00a0<\/span>pushed<\/strong>\u00a0<\/span>event.\u00a0<\/p>\n[\/et_pb_text][et_pb_image src=”https:\/\/wearekemb.com\/wp-content\/uploads\/2023\/01\/custom-trigger-purchase-1024×372-1.png” title_text=”custom-trigger-purchase-1024×372″ _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_text _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Then, we set a tag that will fire under this condition (aka. When this event occurs).\u00a0 But, before we do that, let\u2019s see how we can extract some of the important variables or \u201cdata\u201d from the data layer and\u00a0<\/span>forward<\/strong>\u00a0<\/span>them to GA4.\u00a0<\/p>\nAs mentioned previously, when migrating to Google Analytics 4 you can still use the eCommerce data layer you set up in the previous version. Let\u2019s say we want to get the transaction ID and save it in a variable. To access it, we need to access all three objects because it lies in the third one. So it will look like this,\u00a0<\/span>ecommerce.purchase.actionField.id\u00a0\u00a0<\/span><\/strong>As you notice, we \u201cdrill down\u201d through objects with the \u201c.\u201d operator up until we reach the key we want. Let\u2019s then go back to Google Tag manager and set this variable up.\u00a0<\/p>\nWe need to set a\u00a0<\/span>data layer variable<\/strong>\u00a0<\/span>configuration because that\u2019s where we are extracting the data from.\u00a0<\/p>\n[\/et_pb_text][et_pb_image src=”https:\/\/wearekemb.com\/wp-content\/uploads\/2023\/01\/data-layer-variable-1024×596-1.png” title_text=”data-layer-variable–1024×596″ _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_text _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
You can probably guess by now how to get the other variables.\u00a0<\/span>ecommerce.purchase.actionField.revenue.xxx (xxx being the variable you want).\u00a0<\/strong><\/p>\nOther than\u00a0<\/span><\/strong>the actionField object, we have the\u00a0<\/span>Products array\u00a0<\/span><\/strong>(defined by [ ]) that contains an\u00a0<\/span>object<\/strong>\u00a0<\/span>itself. [ { } ]\u00a0
To select the product array, select\u00a0<\/span>ecommerce.purchase.products<\/strong><\/p>\n[\/et_pb_text][et_pb_image src=”https:\/\/wearekemb.com\/wp-content\/uploads\/2023\/01\/products-array.png” title_text=”products-array” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_text _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Now that we have set up all our variables, we go back to our initial tag we were setting up to track the purchase event.<\/p>\n
The tag configuration will look something like this:\u00a0<\/p>\n
[\/et_pb_text][et_pb_image src=”https:\/\/wearekemb.com\/wp-content\/uploads\/2023\/01\/purchase-tag-1024×611-1.png” title_text=”purchase-tag-1024×611″ _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_text _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
We\u00a0<\/span>forward<\/strong>\u00a0<\/span>all the event parameters to GA4. To finally make sure that all the variables are properly set up, head to the variables section in GTM preview mode and check whether they show correct results. As you can see below, the variables indeed show the exact same values as the variables in the data layer.\u00a0<\/p>\n[\/et_pb_text][et_pb_image src=”https:\/\/wearekemb.com\/wp-content\/uploads\/2023\/01\/variables-correct-1024×512-1.png” title_text=”variables-correct-1024×512″ _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.20.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n