GTM push is including previous checkout inside the purchase - google-tag-manager

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.

Related

Display an Array Data Referencing a Category Array with Sanity and Next.js

I'm trying to have a Category array display on the frontend with items that reference the Category below it.
I've been able to render the category titles on the page, but not the items with references to that category by doing:
export default function Menu({data}) {
const {category} = data;
return (
<section>
{category?.length > 0 &&
category
.map((category) => (
<article key={category._id}>
{category?.title &&
<h1 className="text-3xl">{category.title}</h1>}
))}
</section>
export async function getStaticProps() {
const category = await client
.fetch(
`*[_type == "category"] {
title,
"menuItems": *[_type == "menuItem" && references(^._id)] {
title,
description,
price,
...
}
}
`);
return {
props: {
data: { category }
},
}
}
I've been trying to use .map to find and return the reference data ...
Here are the Sanity schemas I have for Category and menuItem
for Category:
export default {
name: 'category',
title: 'Category',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
],
};
for menuItem:
export default {
name: 'menuItem',
title: 'Menu Item',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'category',
title: 'Category',
type: 'reference',
to: [{ type: 'category' }],
},
{
name: 'price',
title: 'Price',
type: 'number',
},
{
name: 'description',
title: 'Description',
type: 'string',
},
],
};
I know I'm doing something wrong, but can't sort it out. Can anyone help?
Thank you so much

Google Tag Manager Incomplete Funnel Issue

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'.

How to send concurrent queries with dataLayer for product details and products listing?

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

Javascript serialization params with arrays

I'm creating an App that feeds with Woo commerce. By now I can show the products list and access to a product , but I'm not able to create an order.
This is the function that creates and POST's the order :
this.order = function(products, address, tax, total){
var dfd = $q.defer();
var clientId = 2;
var items =[];
for(var i = 0 ; i<products.length ; i++){
var item = {product_id: products[i].id,
quantity: products[i].qty,
price: products[i].price,
};
items.push(item);
}
$http({
method: 'POST',
url: appConfig.DOMAIN_URL + '/wp-json/wc/v1/orders' ,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
paramSerializer: '$httpParamSerializerJQLike',
params: {
consumer_key: appConfig.KEY,
consumer_secret: appConfig.SECRET_KEY,
line_items: items,
customer_id: 1,
total: total,
status: 'completed',
shipping: {
first_name: address.full_name,
address_1: address.street,
city: address.city,
postcode: address.postal_code,
state: address.state
},
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: tax
}
]
}
})
.then(function(res){
dfd.resolve(res);
}, function(error){
dfd.reject(error);
})
return dfd.promise;
}
Response is :
{
"code": "woocommerce_rest_required_product_reference",
"message": "Product ID or SKU is required",
"data": {
"status": 400
}
}
Params seems to be there when I inspect with browser :
Name Value
consumer_key ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
consumer_secret cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
customer_id 1
line_items[][price] 24490
line_items[][product_id] 27
line_items[][quantity] 1
shipping_lines[][method_id] flat_rate
shipping_lines[][method_title] Flat Rate
shipping_lines[][total] 0
status completed
total 24490
I tried hardcoding and using the same data from Woocommerce documentation but the result is the same.
With some combinations throws "product id required" , "quantity required" or "SKU required".
Tried with POSTMAN and order is created with no products.
Any help is appreciated
UPDATE
I tried commenting this line :
paramSerializer: '$httpParamSerializerJQLike',
And now order is created but with no products data, only "non array" params were assigned, so im almost sure is a formatting problem...
Example object :
var data = {
payment_method: 'bacs',
payment_method_title: 'Direct Bank Transfer',
set_paid: true,
billing: {
first_name: 'John',
last_name: 'Doe',
address_1: '969 Market',
address_2: '',
city: 'San Francisco',
state: 'CA',
postcode: '94103',
country: 'US',
email: 'john.doe#example.com',
phone: '(555) 555-5555'
},
shipping: {
first_name: 'John',
last_name: 'Doe',
address_1: '969 Market',
address_2: '',
city: 'San Francisco',
state: 'CA',
postcode: '94103',
country: 'US'
},
line_items: [
{
product_id: 93,
quantity: 2
},
{
product_id: 22,
variation_id: 23,
quantity: 1
}
],
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: 10
}
]
};
This was my workaround :
$http({
method: 'POST',
url: appConfig.DOMAIN_URL + '/wp-json/wc/v1/orders' ,
//headers: {'Content-Type': 'application/x-www-form-urlencoded'},
headers: {'Content-Type': 'application/json'},
//paramSerializer: '$httpParamSerializerJQLike',
params: {
consumer_key: appConfig.KEY,
consumer_secret: appConfig.SECRET_KEY
},
data: {
line_items: items,
customer_id: 1,
status: 'pending',
shipping: {
first_name: address.full_name,
address_1: address.street,
city: address.city,
postcode: address.postal_code,
state: address.state
},
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: tax
}
]
}
})
.then(function(res){
dfd.resolve(res);
}, function(error){
dfd.reject(error);
})
return dfd.promise;
}
})
;
Not sure if this is the cleanest way to pass the parameters but I could not understand why paramserializer was not working. I took some code from another sources.
Hope it helps

ExtJS4.2 Grid Filter Leaves empty Rows with Paging - NewbieQ

I have tried various ways to refresh the grid but everything I try doesn't work. Do I refresh the Grid or do I load the store??? You can see that the paging tool bar is still showing 50 pages after the filtering. If there are no dates on a given pag and it is empty then it will disable the tool bar and paging doesn't work after that page un less you refresh the browser and skip over the empty page. So, in my case page 15 has no rows so it breaks when u hit next and get that page. If you type in the page number 16 then all is good until you hit another's empty page.
My datepicker is in my viewport below and I have tried refreshing the gird and loading the store as well as other things which mostly result in undefined error. Not sure where to start with this one so I will show my code and screen shots below:
BEFORE DATE SELECTION:
AFTER DATE SELECTION:
STORE:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
//extraParams :{limit:1000},
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset',
remoteFilter : true
},
listeners:
{
// stuff goes here maybe??
}
}
});
GRID PANEL:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
//buffered: true,
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 2})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
// submitFormat: 'd/m/Y',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
VIEWPORT:
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
//store.load();
//store.sync();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
CONTROLLER:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores:['Users', 'dates'],
models:['User', 'date'],
views: ['user.List','user.Edit'],
init: function() {
Ext.getStore('dates').addListener('load',this.ondatesStoreLoad, this);
this.control(
{
'viewport > userlist':
{
itemdblclick: this.editUser,
},
'useredit button[action=save]':
{
click: this.updateUser
}
});
},
// ---------- handler Function declarations -------------
ondatesStoreLoad: function(me,records,success)
{
// ------ Gets the dates from dates store and loads an array
var store = this.getStore('dates');
sendDataArray = [];
store.each(function(record){
var recordArray = [record.get("unix_time_stamp")];
sendDataArray.push(recordArray);
});
// ------ Set DatePicker Bullshit right fucking here --------//
var dtFld = Ext.ComponentQuery.query('#datePickerFld')[0];
dtFld.setDisabledDates(["^(?!"+sendDataArray.join("|")+").*$"]);
dtFld.setMaxDate(new Date());
dtFld.setMinDate(new Date('05/01/2013'));
var wstPnlReg = Ext.ComponentQuery.query('#westPanelRegion')[0];
wstPnlReg.show();
var ctrPnlReg = Ext.ComponentQuery.query('#centerPanelRegion')[0];
ctrPnlReg.show();
// var grid = Ext.widget('userlist');
},
onUsersStoreDataChange: function(me)
{
//console.log('Hey the store data just changed!');
},
editUser: function(grid, record)
{
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button)
{
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
});
UPDATED VIEWPORT: Changes made only in datepicker handler
Ext.Loader.setConfig({enabled:true});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'center',
itemId:'centerPanelRegion',
title:'The Title',
xtype: 'tabpanel',
hidden: true,
activeTab: 0,
items:[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
console.log('select');
},
add: function(selModel)
{
// do something with the selected date
console.log('add - init2.js');
},
afterrender:function(selModel)
{
// do something with the selected date
console.log('afterrender - userlist(init2.js)');
},
beforerender:function(selModel)
{
// do something with the selected date
console.log('beforerender - userlist(init2.js)');
}
}
}]
},
{
region: 'west',
itemId:'westPanelRegion',
hidden: true,
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:[{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
itemId:'datePickerFld',
listeners:{
beforerender: function(){
console.log('datepicker - beforerender(init2.js)');
var store = Ext.getStore('dates');
store.load({callback: function(){
console.log('datepicker - callback(init2.js');
console.log(store.data.items[999].data.recip_email);
console.log(store.data.items[999].data.unix_time_stamp);
}
})
}
},
handler: function(picker, date)
{
// do something with the selected date
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// Load the store
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}]
}]
});
}
});
This line is likely causing the issues.
Ext.encode(store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y')));
I'm not sure why you are calling Ext.encode on whatever store.filter returns, but I don't think you want to do that (and it is likely causing the undefined errors).
As for the paging toolbar not updating the current count, it is likely you just aren't returning the correct information in your server response when updating the store. The server response should include the total number of records. According to the docs for Ext.toolbar.Paging, http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.toolbar.Paging:
The packet sent back from the server would have this form:
{
"success": true,
"results": 2000,
"rows": [ // ***Note:** this must be an Array
{ "id": 1, "name": "Bill", "occupation": "Gardener" },
{ "id": 2, "name": "Ben", "occupation": "Horticulturalist" },
...
{ "id": 25, "name": "Sue", "occupation": "Botanist" }
]
}

Resources