Hey there, MeasureGeeks.
In this tutorial, we will do something interesting together.
We will implement GA4 purchase tracking for Bookeo.
I know that there is native integration available, but we have had several clients
who were complaining about discrepancies and inaccurate tracking.
And this is why we decided to show you our own solution, which can also give you some
ideas about iframe tracking in GA4 in general.
So let's dive into it together.
So in order to implement our purchase event tracking in Bookeo,
you would need your Bookeo system, of course, as well as your website.
And we also have the Google Tag Manager implemented on the website.
And please make sure that you have your
GA4 tag already installed by Google Tag Manager.
And of course, our Analytics property.
So let's dive into implementation.
So let's have a look what we want to track here.
And this is exactly my booking system.
And you can see
that if I do the right-click, I will find something called View Frame Source.
This means that this is
an iframe and you can view it as an external web page within your website.
And it's a bit tricky to track those.
So our main goal today is to make those
two guys communicate with each other, this iframe and your website.
So how can we do that?
Well, step one is to go to your booking
system and you should go to Marketing right here.
And this is where we have conversion tracking and analytics.
So again, we will not use the native
integration because unfortunately there is some discrepancies and our clients
have been complaining that they do not have the accurate numbers.
And this is why we decided to introduce our custom solution.
If you scroll down,
you can find this field and this is where you should copy and paste the code.
So I did it already and we have prepared the code snippets for you.
I have to say that we also use the code snippets provided by Simo Ahava,
the all mighty expert, and we are super grateful for such
an outstanding contribution to the community.
And Praba, our head of analytics, also created some codes that he used with our clients.
So we prepared the document for you and I will attach a link under this video.
The first step is to go to this document and you should copy and paste this code.
So what does it do?
It will initialize the data layer
in the Bookeo back end and send the data layer pushes to the parent.
So we want those guys to talk to each other.
And this is exactly what we are doing.
Just one change here.
If you scroll down, you should look for this parent origin.
So again, parent is your website, whereas the iframe is a child.
So these are the terms we are going to use.
And instead of this URL, you should provide your own.
And please remember, no trailing slash,
so no slash in the end, and pay attention to the protocol.
If I go to my Bookeo system,
here you can find the code, and I already provided sofiia.measure.school
and please click okay to save the changes.
Well done. This was step number one.
We are already
sending the data layer pushes, but we should also listen to them somehow.
This is why you should go to the Tag Manager.
And we will create a new tag here, tag configuration.
And this should be custom HTML because communication is two way process.
We are communicating with the parent, but we also need to listen.
This is an important part here.
And right now, what we want to do,
we want to listen for those data layer pushes that are sent from the iframe.
Again, we have to go to the documentation, and this is the second snippet right here.
And you should copy this one.
And let's go to the Tag Manager and let's paste it right here.
And just one change that we have to make, we have to find here you see Child Origin.
And this is some example of Bookeo.
So this is exactly the iframe we want to communicate with.
How can you find the correct URL.
I will show you this trick.
So let's go back to our website and if we here do the right-click
and click View Frame Source, this is exactly where you can find it.
And let's copy it.
Let's go back to the Tag Manager and we should paste it right here.
Great. This is the only change that we should do.
And trigger should be all pages and let's provide the proper name.
So this is a custom HTML tab and this is our post listener.
So it is listening for those data layer pushes from the iframe.
And let's save this guy right here.
Awesome.
So now we want to understand what is happening on the website.
This is why let's click preview
and let's have a look what we have implemented so far.
So what do we have to do now?
Yeah, we have to book our course.
So let's click book
and my data is already provided here and let's confirm our booking.
And this is the confirmation page
and let's see what happens in the tag assistant.
So you see now number 9.
This is exactly the custom event
and it tells us, okay, purchase was made within the iframe.
And here you can see data layer push.
So let's expand this one and this is where
you can find some information about this purchase.
You can see the item description,
the product code, total growth net, booking number, and so on.
And it is placed within this iframe, but we want to capture this data somehow
because it's not enough to communicate this message, but we have
to pass it somehow so that we could also send it to GA4.
Here we have this data layer and we need to get this information somehow.
How can we do that?
We could configure a data layer variable to grab this iframe data.
Let's go to the Tag Manager, let's go variables.
And this is where you can create a new one, variable configuration.
And this is a data layer variable, right?
And it should be exactly this iframe.
So we can simply copy it right here.
And to make it simple, I will also call it iframe.
So not to confuse you.
And let's save this one.
So we have created our data layer variable, but this is not enough.
We also have to create a second one, actually an object we would use in our
GA4 purchase step, because we have to use some special format.
It should be the correct format so that GA4 could read and interpret this data.
It's again all about communication, all about the common language that we have.
So this is why let's click New and now we will create one more variable
and this should be a custom JavaScript variable.
And you can find the last snippet,
I promise this is the last snippet of code that we will implement today.
So let's go to our documentation, and this is exactly this code.
So let's copy this one.
It was created by Praba.
He's the head of Analytics at MeasureSchool, and he's our magician.
Creating YouTube videos is just one part of everything that we do.
We also provide client services.
I don't know any tracking case that Praba could not solve, and we have helped
thousand plus clients to implement tracking.
So if you want to fix something,
or maybe you want to set up your tracking from scratch, we are here to help you,
and I will provide a link under this video as well.
Anyways, so now let's go back to our tech manager and let's paste it right here.
So what we are doing,
we are taking the data you remember that we send from the iframe
and we want to transform it into the correct format.
So this is one that will be understood by GA4.
And let's provide proper name here.
So this is exactly our custom object that we will use for our purchase.
Let's save this one.
And now we're ready to go.
Let's go to tag and we can finally implement our GA4 event tracking.
Here you should choose Google Analytics GA4 event.
And this is exactly my GA4 that was
configured before the recording event name.
You know that it should be purchase.
And now we go to more settings and we want to send e-commerce data.
And instead of data layer, we select custom object here.
And this is exactly the one that we configured before.
Great. And the trigger.
So what is our trigger?
That's a question to you.
Let's go back to the tag assistant.
And here you can see this custom event.
And it's also here because this is exactly the step where our purchase takes place.
Let's copy this event.
Let's go back to the Tag Manager
and click plus, and we can select custom event and let's paste it right here.
We can also provide proper name custom event purchase.
Let's save our trigger.
And of course, we should finally provide a proper name to our tag.
Let's save our tag. Great.
And now the most exciting part, let's test it.
So let's click preview.
So what do we have to do again?
Yeah, we have to make our test purchase.
So let's confirm our booking. Awesome.
Let's go back to tag assistant and here we have GA for event purchase.
Well done.
Now let's also go to Analytics and let's see what is happening in the debug view.
Let's scroll down and here debug view and here we have our purchase.
Brilliant. And here we have the parameters,
for example, transaction ID or value as well as items.
If you see this price, by the way, do not be confused, it's fine.
It's just the way GA4 displays it in the debug view.
It takes some time for your report to be
populated with data, but later you can use this information for your analysis.
Well done.
I hope you will have no issues with Bookeo tracking in the future.
If you like this video, please give a thumbs up.
Do not forget to subscribe.
And if you want to check out our
GA4 IFrame tracking tutorial, you can find it right here.
Happy measuring, guys. See you next time.