I'm (trying) to implement Enhanced Analytics on an aspx/mvc website.
First, I set up a UA Tag triggering off the custom event "checkout":
Tag Type: Universal Analytics
Track Type: Event
Event Action: Checkout
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Then, I created a Custom HTML tag to push the checkout event to the Data Layer; firing off of Window Load of the checkout URL. the custom HTML is:
<script type='text/javascript'>
(function() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': { 'step': '1' },
'products': [{
'name': 'product1',
'id': '123456',
'price': '500',
'dimension2': 'Acccepted',
'dimension5': '12345'
}]
}
}
});
})
</script>
GTM preview shows the custom html tag firing but the associated UA Event tag does not fire.
Help?
You have a small mistake in your JS. You forgot to call defined function (pay attention at () at the end):
(function() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': { 'step': '1' },
'products': [{
'name': 'product1',
'id': '123456',
'price': '500',
'dimension2': 'Acccepted',
'dimension5': '12345'
}]
}
}
});
}())
Related
I am testing setting up purchase tracking to send a data layer of purchase info to GTM. The data layer is correctly grabbing the info but for some reason I am not seeing anything when I preview GTM. As you can see in this image here I do not get the purchase event in GTM which is what my GA4 tag is set to fire on or any info from the data layer. empty GTM data-layer
Does anyone know why this is not working correctly?
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ 'ecommerce': null });
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'purchase': {
'actionField': {
'id': xxxxxxx,
'affiliation': ,
'revenue': 40,
'tax': ,
'shipping': ,
},
'products': [
{
'id': xx-xx,
'name': xxxxxxx,
'category': xxxxxxx,
'price': 40,
'quantity': 1 },
]
}
},
'user_data': {
'email': test#gmail.com,
'phone_number': 7777777777,
'address': {
'first_name': Test,
'last_name': Test,
'street': 123 test st,
'city': test23,
'region': WV,
'postal_code': 12345,,
'country': US,,
}
}
});
</script>
I'm attempting to do two pushes to the analytics datalayer when my ecommerce receipt page loads.
My issue is that I can only ever pick up one of the two events.
I'm outputting this on the receipt page:
<script>
function trackEcommerce() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': { 'step': 2 }
}
}
});
}
dataLayer.push({
'event' : 'purchaseEvent',
'ecommerce': {
'purchase': {
'actionField': {
'id': '#orderId',
'affiliation': 'Eldorado',
'revenue': '#OrderTotal.ToString("F", System.Globalization.CultureInfo.GetCultureInfo("en-GB"))',
'tax':'#VatTotal.ToString("F", System.Globalization.CultureInfo.GetCultureInfo("en-GB"))',
'shipping': '#ShippingFee.ToString("F", System.Globalization.CultureInfo.GetCultureInfo("en-GB"))'
},
'products': [
#foreach (var item in GetLoop("OrderLines"))
{
string productName = item.GetString("Ecom:Product.Name").Replace("\"", "").Trim();
string productNumber = item.GetString("Ecom:Product.Number");
double orderLineUnitPrice = item.GetDouble("Ecom:Order:OrderLine.UnitPrice.PriceWithoutVAT.Value");
int orderLineQuantity = item.GetInteger("Ecom:Order:OrderLine.Quantity");
string brand = item.GetString("Ecom:Product:Field.Brands.Value");
var DwProduct = ProductService.GetProductById(item.GetString("Ecom:Order:OrderLine.ProductID"), item.GetString("Ecom:Order:OrderLine.ProductVariantID"), item.GetString("Ecom:Product.LanguageID"));
string category = DwProduct.DefaultGroup == null ? "" : DwProduct.DefaultGroup.Name;
<text>{
'name': '#productName',
'id': '#productNumber',
'price': '#orderLineUnitPrice.ToString("F", System.Globalization.CultureInfo.GetCultureInfo("en-GB"))',
'brand': '#brand',
'category': '#category',
'quantity': #orderLineQuantity
},</text>
}
]
}
},
'eventCallback': trackEcommerce()
});
</script>
I've tried formatting this code in a variety of different ways. I've had the callback function call the second dataLayer push directly like:
'eventCallback': function () {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
}
});
}
I've also attempted just outputting the two dataLayer pushes in succession with no eventCallback or other relation between the two pushes.
Most obvious thing is that you're using a function call trackEcommerce() instead of referencing a function like 'eventCallback': trackEcommerce
However, just using two plain consequent pushes should work fine and would be easier to debug.
dataLayer.push({ 'event': 'checkout', ... });
// ...
dataLayer.push({ 'event': 'purchaseEvent', ... })
I have the following function to pass items from a shopping cart into the data layer and then on to Google Analytics through GTM.
No problem with the variables, those are all populating fine. It's how I've tried to create the products array, it's not done correctly. If I have more than one product in the cart, only the first product gets passed into the data layer.
You'll notice two events: sendTransaction and sendUpsell. That's because there's an option in the shopping cart to also make a personal donation on top of the products you're purchasing which gets added to the total transaction amount.
function eCommerceTracker(){
var storeId = "store_id";
var personalGift = $('p#additional_donation').text().replace("$","").replace(/[,]/g, "").trim();
var trackingCode = $('span#tracking_code').text().trim();
var numItems = $("div.ShoppingCart [class*='ShoppingCartRow']").length;
eQuantity = [];
transTotal = [];
itemName = [];
$("div.ShoppingCart [class*='ShoppingCartRow']").each(function(){
eQuantity.push($(this).find("div.quantity-column").text().trim());
itemName.push($(this).find("span.CartItemName").text().replace("'",""));
transTotal.push($(this).find("div.price-column").text().replace("$","").replace(/[,]/g, "").trim());
});
eTotal = $("div.ShoppingCart div.total-price-column:last").text().replace("$","").replace(/[,]/g, "").trim();
for (var i = 0; i < numItems; i++) {
if(eQuantity[i] > 0){
dataLayer.push({
'event': 'sendTransaction',
'ecommerce': {
'purchase': {
'actionField': {
'id': trackingCode,
'affiliation': storeId,
'revenue': eTotal
},
'products': [{
'id': trackingCode,
'name': itemName,
'category': 'eCommerce',
'price': transTotal,
'brand': 'myBrand',
'quantity': eQuantity
}]
}
}
});
}
}
//Adding personal gift
if(personalGift){
dataLayer.push({
'event': 'sendUpsell',
'ecommerce': {
'purchase': {
'actionField': {
'id': trackingCode,
'affiliation': storeId,
'revenue': personalGift
},
'products': [{
'id': trackingCode,
'name': 'Personal Gift',
'category': 'Upsell',
'price': personalGift,
'brand': 'myBrand',
'quantity': '1'
}]
}
}
});
}
}
Does anything look immediately wrong with what I've created here?
I have connected my big-commerce site with google analytics E-commerce , but i am unable to view any data in "Shopping Behavior Analysis" section
Here is my site e-commerce tracking code
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-25352625-2', 'duringdays.com.au');
ga('send', 'pageview');
ga('require', 'ecommerce', 'ecommerce.js');
function trackEcommerce() {
this._addTrans = addTrans;
this._addItem = addItems;
this._trackTrans = trackTrans;
}
function addTrans(orderID,store,total,tax,shipping,city,state,country) {
ga('ecommerce:addTransaction', {
'id': orderID,
'affiliation': store,
'revenue': total,
'tax': tax,
'shipping': shipping,
'city': city,
'state': state,
'country': country
});
}
function addItems(orderID,sku,product,variation,price,qty) {
ga('ecommerce:addItem', {
'id': orderID,
'sku': sku,
'name': product,
'category': variation,
'price': price,
'quantity': qty
});
}
function trackTrans() {
ga('ecommerce:send');
}
var pageTracker = new trackEcommerce();
</script>
please any body let me know where i am wrong , i need to add any other code to track those information ?
thanks
I'd like to be able to filter events based on adding and removing eventSources. I can't find a good example of this being done.
.fullCalendar( 'addEventSource', source )
.fullCalendar( 'removeEventSource', source )
I'd like to have check boxes that toggle the execution of those functions. I can't seem to get the functionality working though.
$( "#target" ).click(function() {
$('#calendar').fullCalendar( 'removeEventSource', 'Event1' );
});
Here is my full code:
$('#calendar').fullCalendar({
header: {
left: 'title',
center: 'prev,next',
right: 'month,agendaWeek,agendaDay,today'
},
eventLimit: {
'agenda': 4, // adjust to 6 only for agendaWeek/agendaDay
'default': true // give the default value to other views
},
eventSources: [
{
title: 'Event1',
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"
},
{
url: 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic'
},
{
url: "https://www.google.com/calendar/feeds/ht3jlfaac5lfd6263ulfh4tql8%40group.calendar.google.com/public/basic"
}
],
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
if (bool) {
$('#loading').show();
}else{
$('#loading').hide();
}
}
});
Here is the full code I used to get this functionality:
HTML:
<form id="#calendar_list">
<input class="checkbox" type="checkbox" checked>Event Group 1<br>
<input class="checkbox1" type="checkbox" checked>Event Group 2<br>
<input class="checkbox2" type="checkbox" checked>Event Group 3<br>
</form>
Javascript:
$(".checkbox").change(function() {
if(this.checked) {
$('#calendar').fullCalendar( 'addEventSource', 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
}
else{
$('#calendar').fullCalendar( 'removeEventSource', 'https://www.google.com/calendar/feeds/vineyardcincinnati.com_o6jncckm5ka55fpragnbp4mk9c%40group.calendar.google.com/public/basic' );
}
});
Load FullCalendar : Use following given code to load FullCalendar. create a jquery function like LoadCalendar and put below code in this function and call this function on document.ready function in jquery.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
locale: '#companyCulture',
defaultDate: Date.now(),
defaultView: 'month',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
dayClick: function (date, allDay, jsEvent, view) {
//$("#lblDate").html('' + moment(date).format("MMMM DD,YYYY hh:mm") + '');
$("#lblDate").html('' + moment(date).format("MMMM DD,YYYY hh:mm A") + '');
$("#hdRDate").val(moment(date).format());
emptyEventDetails(date);
// $("#AddEventModel").modal();
},
eventClick: function (calEvent, jsEvent, view) {
$.ajax({
type: "GET",
async: false,
cache: false,
url: "#Url.Action("GetEventById", "Events")",
data: {
Eventid: calEvent.id
},
success: function (data) {
emptyEventDetails();
//$.each(data.data, function () {
// alert(this["Title"]);
// var color = 'orange';
// var Title = this["Title"];
// //addCalanderEvent(this["EventID"], this["EventDate"], Title, color);
//});
}
});
//$("#lblDate").html('' + calEvent.EventDate + '');
//$("#hdRDate").val(calEvent.EventDate);
//$("#AddEventModel").modal();
}
});
Add a Event: Use the below code to add a event in FullCalendar
var eventObject = {
title: title,
start: moment(start).format("MMMM DD,YYYY hh:mm A"),
end: moment(end).format("MMMM DD,YYYY hh:mm A"),
id: id,
color: colour
};
$('#calendar').fullCalendar('renderEvent', eventObject, true);
OR
$('#calendar').fullCalendar( 'addEventSource', newSource); //Add a new source
Remove all Events: I'm trying to remove all the event sources in the fullcalendar plugin. I'm currently using a combination of
$('#calendar').fullCalendar('removeEvents') //Hide all events
$('#calendar').fullCalendar('removeEventSource', $('.Source').val()) //remove eventSource from stored hidden input
OR
$('#Calendar').fullCalendar( 'removeEvents').fullCalendar('removeEventSources'); //Removes all event sources