i've setuped GTM on my online store (magento2 using a custom extensio). [i've done this on several stores with success]
On one particular store we are getting some issues on the funnels, the Product Views and Transactions arent being recorded.
Below is the GA funnel
GA Funnel Image
Using GTM debug, i've isolated the datalayers for the product page and for the success page.
The datalayers are below
--- Product Page dataLayer ---
{
gtm: {start: 1611324270479, uniqueEventId: 4},
event: 'gtm.load',
ecommerce: {
detail: {
products: [
{
name: 'Bracelet',
id: '501',
price: '3.90',
category: 'Man'
}
]
}
}
}
--- Checkout Success Page dataLayer ---
{
gtm: {start: 1611324363183, uniqueEventId: 5},
event: 'gtm.load',
ecommerce: {
purchase: {
actionField: {
id: '000000054',
affiliation: 'Store Name - Store Name - PT',
revenue: '6.9000',
coupon: '',
tax: '1.2900',
shipping: '2.4400'
},
products: [
{
name: 'Bracelet',
id: '501',
price: '3.17',
category: 'Man',
list: 'Man',
quantity: '1.0000'
},
{
name: 'Watch',
id: '61',
price: '20.24',
category: 'Man',
list: 'Man',
quantity: '1.0000'
}
]
},
currencyCode: 'EUR'
}
}
Can someone help me understand why this 2 steps arent being populated with data.
Thanks
Should your event for the Checkout Success be event: 'purchase' and not event: 'gtm.load'.
Related
google tag manager - i am calling a checkout and then a purchase consecutively... It seems the "checkout" portion is included in the final "purchase".
see the results from this below.......... i get the first checkout event fine. the second event for purchase contains the first checkout json?
try {
dataLayer.push({
'event': 'ecommerce_checkout',
'eventCategory': 'Ecommerce',
'eventAction': 'Checkout',
'ecommerce': {
'checkout': {
'actionField': {
'step': 5,
'option': 'checkoutstep5'
},
'products': [{
'name': 'test',
'id': 10101,
'category': 'Testing',
}]
}
}
}); } catch (egtm) {}
try {
dataLayer.push({
'event': 'ecommerce_purchase',
'eventCategory': 'Ecommerce',
'eventAction': 'Purchase',
'ecommerce': {
'purchase': {
'actionField': {
'id': 111,
'revenue': 10
},
'products': [{
'name': 'test',
'id': 10101,
'price': 10,
'category': 'test',
'variant': 'test',
'quantity': 1
}]
}
}
}); } catch (egtm) {}
Resulting GTM :
{
gtm: {start: 11111111111, uniqueEventId: 429},
event: 'ecommerce_purchase',
eventCategory: 'Ecommerce',
eventAction: 'Purchase',
ecommerce: {
checkout: {
actionField: {step: 5, option: 'checkoutstep5'},
products: [
{
name: 'test',
id: 10101,
category: 'Testing',
price: '10',
variant: '',
quantity: 1
}
]
},
purchase: {
actionField: {id: '145245', revenue: '10.00'},
products: [
{
name: 'test',
id: 10101,
category: 'Testing',
price: '10',
variant: '',
quantity: 1
}
]
}
}
}
You can clean the dataLayer before you get to the Purchase by doing another dataLayer.push with the ecommerce : undefined .
On the other side, you want dataLayer to have the information about the transaction on the Checkout completed, so that you can send it to GA or some other tracking engine, right? In that case, you need only to get the values from ecommerce.purchase variable, and you don't need to worry about ecommerce.checkout still being there as it is not messing up anything for you anyway.
I'm setting up ecommerce tracking with Google analytics and Google Tag Manager.
One every product details page, I also have a listings - "Family products" and "Similar products".
What is the right way to send the products details and also these two listings? I'm using different dataLayer events, but does not seem to work right.
First in the code I have:
$(function () {
dataLayer.push({
'ecommerce': {
'event': 'productDetailView',
'currencyCode': 'BGN',
'detail': {
'products': [
{
'name': 'Product 1',
'id': 'pr-1',
'price': 19.80,
'category': 'category / subcategory'
}
]
...
});
And later in the code I have:
$(function () {
dataLayer.push({
'ecommerce': {
'event': 'showFamilyListing',
'currencyCode': 'BGN',
'impressions': [
{
"name": 'Product 5',
"id": 'pr-5',
"price": '88.10',
'category': 'category / subcategory',
'list': 'Family products',
'position': 1
},
{
"name": 'Product 7',
"id": 'pr-7',
"price": '88.10',
'category': 'category / subcategory',
'list': 'Family products',
'position': 2
},
And after that for the next listing:
$(function () {
dataLayer.push({
'ecommerce': {
'event': 'showSimilarsListing',
'currencyCode': 'BGN',
'impressions': [
{
"name": 'Product 19',
"id": 'pr-19',
"price": '18.10',
'category': 'category / subcategory',
'list': 'Similar products',
'position': 1
},
{
"name": 'Product 17',
"id": 'pr-17',
"price": '18.10',
'category': 'category / subcategory',
'list': 'Similar products',
'position': 2
},
It seems like only the last query is being received by Google Analytics, the products details data and the first listing are being skipped.
I have the Analytics tag set to trigger with these events (productDetailView, showFamilyListing, showSimilarsListing) and also "All pages DOM"..
Thanks
Only the most recent ecommerce object is included in the hit!
In other words, if you do two consecutive dataLayer.push() commands with their own ‘ecommerce’ objects, any Tag which fires after the latter push will only have access to the latter ‘ecommerce’ object.
link
I am trying to directly map API response to my Redux-Orm models. I have two models:
Product hasMany ProductProperties
ProductProperty belongsTo Product
The API response I receive is:
{
products: [
{name: 'P1', id: 1},
{name: 'P2', id: 2}
],
product_properties: [
{name: 'Test1', id: 10, product_id: 1},
{name: 'Test2', id: 11, product_id: 1},
{name: 'Test3', id: 12, product_id: 2}
{name: 'Test4', id: 13, product_id: 2}
]
}
I can tweak the API response to match with the redux-orm.
My Question is:
I want to avoid doing ProductProperty.first().set({product: Product.first}) -- That is I don't want to set the associations (child records) explicitly and have redux-orm infer them automatically.
Is there some way I can specify the foreign key that redux-orm can look for?
What I recommend to you is to use a json api standard for your API.
That way, in your API return, your products would have a relationships key that will help you map it to the included product_properties. Something like:
{
data: [
{
type: 'product',
id: 1,
name: 'P1',
relationships: [
product_property: [
{
data: {type: 'product_property', id: 10}
},
{
data: {type: 'product_property', id: 11}
}
]
]
},
{
type: 'product',
id: 2,
name: 'P2',
relationships: [
product_property: [
{
data: {type: 'product_property', id: 12}
},
{
data: {type: 'product_property', id: 13}
}
]
]
}
],
included: [
{type: 'product_property', name: 'Test1', id: 10},
{type: 'product_property', name: 'Test2', id: 11},
{type: 'product_property', name: 'Test3', id: 12}
{type: 'product_property', name: 'Test4', id: 13}
]
}
That way, it would be much easier for you to make a standard API parser that would map your json api resources to your redux-orm store. You create a redux-orm resource for each product and each product_property. Than you loop over product relationships and link them.
Hope that would help.
Best
All normalizr examples are focused on nested objects they are expecting an API result that looks like this:
{
id: 1,
title: 'Some Article',
author: {
id: 1,
name: 'Dan'
}
}
But I actually found that the following format where you have to do the collections joins yourself is the one I'm dealing with the most, can I use normalizr to handle this case for me?
Posts [{ _id: 1, name: 'post text 1', userId: 5, locationId: 8}]
Locations [{ _id: 8, name: 'New York'}]
Users [{ _id: 5, name: 'John Doe', country: 'US'}]
expected result:
{
results: [1], // posts ids
entities: {
posts: {
1: { name: 'post text 1', userId: 5, locationId: 8 }
},
users: {
5: { name: 'John Doe', country: 'US' }
},
locations: {
8: { name: 'New York' },
}
}
}
Docs/github issues nothing mentions it as far as I could find
I have a meteor app using livestamp. However, I wish to represent a collection within a reactive-table. However, when I try the code below, it doesn't work (I see nothing in the updated column):
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (degC)' },
{ key: 'ts', label: 'updated', fn: (v,o) -> livestamp v }
]
}
but when I use it within a template, it works fine. How can I get the functionality of livestamp within my reactive table?
You can do that with https://atmospherejs.com/aldeed/tabular it's also datatables but it's different package (in my opinion better)
if you choose to use it here is an example, tabular has the option to render fields as a template and livestamp should work just as on the template itself.
TabularTables.Books = new Tabular.Table({
name: "Books",
collection: Books,
columns: [
{data: "_id", title: "id"},
{data: "_id", title: "Rack"},
{ data: 'ts', title: 'updated',
tmpl: Meteor.isClient && Template.liveStamp
}
]
});
// template
<template name="liveStamp">
<p>{{livestamp this.ts}}</p>
</template>
so i guess it helps to actually read the manual....
Template.sensor_table.helpers
settings: () ->
return {
collection: Sensors
rowsPerPage: 100
showFilter: true
fields: [
{ key: '_id', label: 'id' },
{ key: '_id', label: 'rack', fn: (v,o) -> (getSensor v).rack },
{ key: 'temp', label: 'temperature (°C)' },
{ key: 'ts', label: 'updated', tmpl: Template.sensor_updated }
]
}
and then a template somewhere...
<template name="sensor_updated">
{{ livestamp ts }}
</template>