Request For Tutorial Video: FB Pixel Purchase Event & GA Enhanced E-commerce Tracking

Shan · October 21, 2018, 7:48pm

Hey Guys,

Thank you so much for the recent features & functionalities that have been releasing.

Is it possible to get a tutorial on how to send a purchase Event for Google Enhanced E-commerce Tracking or a Facebook Pixel Purchase Event . I’m not talking about something with Wix Stores but just a plain page containing ’ /thank-you ’ in the URL to capture Key metrics like:

price
name
quantity
id
I had a Google Tag Manager Trigger fire on my page containing ’ /thank-you ’ in the URL but the trigger never fires when I reach the Thank You Page via the click of a button… But when I reload the Thank You Page only then does the trigger fire and I can see the event in my Facebook Pixel. Please see video below.

I made a custom Online Store using only Wix Code and I have a Cart Page where after a successful payment via Stripe the items from the cart are deleted and moved to the orders database and there are a lot of data hooks firing for different purposes but on the front end the user is redirected to a final Thank You Page where he/she can see the order summary.This Thank You Page is where I want the Tag Manager Trigger to Fire but never fires, only when I refresh the page then it fires.

On a Wordpress Website (I saw it on WooCommerce) it fires automatically on the Thank You Page, no need to refresh.

Can you help please ?

Also don’t forget about the tutorial please

-Shan

kobi-gamliel · October 22, 2018, 4:05am

Hi,
Thank you for this note, let’s try to assist.
You can either set an event on a button click
Or base on URL (yourdomain.com is available for purchase - Sedo.com)
We have a tutorial that might going to assist you,

Let me know if this working out

Shan · October 22, 2018, 5:33am

Hi Kobi,

Thank you for the reply.

Actually in my situation where I need to track Sales it cannot be on a button click, it has to be based on URL which I am already doing (as shown in my video above) but the problem is it is not working through the URL whereas on other platforms such as Wordpress it does work. Please refer to my video for details.

The tutorial is amazing, I love it but it it does not relate to tracking Sales or Purchase Data via Pixel or Google Analytics Enhanced E-Commerce.

adam-fainaru · October 22, 2018, 9:35am

Hi Shan,

If you want to correctly track page views using GTM, I recommend that you use the ‘Custom Event’ Trigger.

In short, every time a new page is loaded, Wix will fire a ‘Custom Event’ to GTM with the name ‘Pageview’.
To track this event, you need to create a new trigger of Type ‘Custom Event’ as shown in the gif below.

https://static.wixstatic.com/media/a27d24_ec6234b68e3b4f3293d1eb27e11c535a~mv2.gif(image larger than 4 MB)

Then, instead of selecting ‘All Custom Events’, select ‘Some Custom Events’ and add the condition in which you want the event to fire. In your case, you can use the ‘Page Path’ condition with the same URL string as in the video you posted.

Sending Additional parameters with events :
If you want to include additional information when you send data to facebook, you will need to collect that information in GTM Variables and then inject the variable into the FB tag that’s connected to your trigger.

This is doable but not that simple. The easiest way to do this, in my opinion, is to utilize Wix Code and the capabilities that are covered in the video Kobi Shared with you above.

By creating a custom event in Wix Code using the trackEvent API, you can create new ‘Custom Events’ to your GTM data layer. These are easy to use as variables because they are included in your data layer.

I will show you an example.

Lets say you want to track a custom purchase event on your site and you want to include the price, which appears in your page’s content.

The first step is to create a custom event using Wix Code.
In the screenshot below, I created a custom event that is set to load when the page is loaded.
The event includes the price for the purchase, which in this example, is grabbed from a text component on the page.

When the page is loaded, this event will be sent to the GTM data layer and you can use it as a trigger to your purchase event instead of using the ‘Pageview’.

To grab the price from this event, you need to create a new variable of type ‘Data Layer Variable’. This variable will grab the ‘price’ value from the data layer, which in this example is ‘65’.

The variable will look like the screenshot below and we’ll name it ‘Custom Price’

Then, we can use the ‘Custom Price’ variable in your FB tag like this:

Finally, you can see that the event is correctly sent to FB when the page is loaded:

That’s it.
Let me know if you have any further questions.

Thanks,
Adam

Shan · February 23, 2019, 11:25pm

Hi @adam-fainaru

Thank you so much for this example. I have been using this method in my projects for the past couple of months.

I am having some issues sending over Product Data to Google E-commerce Tracking

This is my Custom Event Code:

export function dataset2_ready() {
    create();
}

var array = [];

async function create() {
 await $w("#repeater1").forEachItem( ($item, itemData, index) => { //repeater has products
 let product = {
            id: $w("#reference").text,
            name: $item("#itemName").text,
            sku: 'TESTSKU',
            quantity: $item("#quantity").text,
            price: $item("#price").text
            };
            array.push(product); //all Product Data is here  
        });
        custom();
}
function custom() {
    wixWindow.trackEvent("CustomEvent", {
        event: 'Custom Purchase',
        price: $w("#total").text,
        id: $w("#reference").text, //invoice number
        affiliation: $w("#name").text,
        contents: array //product data
        });
}

I am using the above code to create a Data Layer like you showed me.

Then I am picking up the data using Data Layer Variables like below:

Most important is the ‘cv - array’ contents variable as it contains my Product Data with which I am having issues with.

Then I have a Custom HTML firing which looks like this:

See line 19 in the above screenshot. This is where the problem is, on line 11 addTransaction is going properly and getting recorded in Google Analytics but addItem on line 19 is not getting recorded or being shown as sent in the GA Debugger.

GA Debugger is showing the following in the Browser Console:

I suspect the problem is with the additonal ‘[’ ‘]’ square brackets in the ‘ecommerce:addItem’ line.

I see the ‘ecommerce:addTransaction’ line where there is no square brackets and the data is transferring correctly as per the GA debugger and my Google Analytics Account

Finally this is what my Data Variable is looking like:

I cannot think of any other way to sent the Products Data from the repeater apart from using an array but this results in the code containing square brackets.

Thank you so much for the original example Adam.

-Shan