How to Measure Purchases With gtag.js From iFrame

How to Measure Purchases With gtag.js From iFrame

Send data from beds24 iframe to Google Analytics

Photo by [Markus Winkler](https://cdn.hashnode.com/res/hashnode/image/upload/v1621430524843/hdtys7ZV7.html) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)Photo by Markus Winkler on Unsplash

You might be using Google Analytics on your website to track some information about your visitors — the demographics, their behavior, what technology they use etc.

If you use a 3rd party software on your website that enables your customers to purchase/to book something, you might want to track more information — what’s their shopping behavior, what do they purchase?

To show a specific example, I’ll be using beds24, which is a property management and booking system. You can apply the stuff described here with other systems too. But you must have access to the iframe. Otherwise you won’t be able to send the necessary data from it.

I’ll briefly explain how you can do it in the following 4 simple steps:

  • Setting up Google Analytics

  • Sending data from the iframe (e.g. beds24 booking system)

  • Receiving data and sending it via gtag (Universal Analytics)

  • Setting up Google Tag Manager

1. Setting up Google Analytics

I won’t go into much details here but I assume you already have your Google Analytics account. In order to collect certain Ecommerce information, we have to enable that feature first.

Navigate to your account, property, and view to enable Ecommerce.

enable Ecommerce in Google Analyticsenable Ecommerce in Google Analytics

Also make sure that you have the gtag included in the head of your website:

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-XXX');
  </script>
</head>

We will also have to create a container in Google Tag Manager, but we will get to it later.

2. Sending data from the iframe

Ok, what is iframe? Just to make sure we know what we are talking about here’s a definition by MDN:

The HTML Inline Frame element (&lt;iframe&gt;) represents a nested browsing context, embedding another HTML page into the current one.

So in our example, we have a webpage and we want to insert another webpage there (beds24.com) using iframe element.

<iframe src=”[https://www.beds24.com/booking2.php?propid=13437](https://www.beds24.com/booking2.php?propid=13437)” width=”100%” scrolling=”no”></iframe>

The user can browse and book the properties within the iframe then.

Let’s say we want to capture the booking of the property. That means to fire an event after the user gets to the confirmation page. In beds24 we can access the HTML settings for individual properties and insert a script to <HEAD> element. We can see there’s also a Confirmation Page <HEAD>:

beds24 HTML settingsbeds24 HTML settings

Note: If you are not directly in control of the iframe code and you use different services, look for similar options that would allow you to insert Javascript code to the pages.

In the field we have to insert the Javascript code that can look like this.

<script>
  try{ 
      var postObject = {
        event: 'purchase',
        data: {
          "transaction_id": [BOOKID],
          "value": [PRICE],
          "currency": "EUR",
          "coupon": "[GUESTVOUCHER]",
          "items": [
            {
              "id": [PROPERTYID],
              "name": "[PROPERTYNAME]",
              "brand": "",
              "quantity": 1,
              "price": [PRICE]
            },
          ]
        }
      };    
      **parent.postMessage(postObject, '[https://example.com'](https://lisbonprimeaparts.com/booking'));**
  } catch(e) {
    window.console && window.console.log(e);
  }
</script>

What’s important here is the postMessage() method. It enables communication between the iframe and the page in which the iframe is embedded.

The **window.postMessage()* method safely enables cross-origin communication between [Window](developer.mozilla.org/en-US/docs/Web/API/Wi..) objects; e.g.,* between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

The first argument we pass to the method is the message. In the example above we send a Javascript object with properties that follow the structure as described in the Ecommerce documentation for measuring purchases (It may differ based on your use case). Good news is we don’t have to serialize the data as the method takes care of that. The values are beds24 template variables like price, property ID etc.

The second argument is targetOrigin, so basically parent URI.

3. Receiving the data and sending it via gtag

When the user completes the booking, the message is sent and now we have to listen to it. Outside of iframe, in your parent page we have to insert another script.

<script>
  window.addEventListener("message", (event) *=>* {
    *if* (event.data && event.data.event === "purchase") {
      *var* data = event.data;
      dataLayer.push({ ecommerce: null });

      gtag('event', 'purchase', {
        "transaction_id": data.data.transaction_id,
        "value": data.data.value,
        "currency": "EUR",
        "coupon": data.data.coupon,
        "items":data.data.items
      });
    }
  });
</script>

Again, as described in the GA docs, we use gtag with the ‘purchase’ event to send the data that we have received. Make sure the gtag is defined (see step number 1).

4. Setting up Google Tag Manager (GTM)

At this point, we still can’t see any events triggered in GA. We have to define them in Google Tag Manager. Create a container for your website first.

Then we have to define Variables, Triggers and Tags.

GTM menuGTM menu

Variables

Go to User-Defined Variables, click New and choose Google Analytics Settings

Enter your Tracking ID and in More Settings enable Ecommerce.

Triggers

Create a new trigger called ‘Purchase’ for example and select Custom Event

Event name is purchase (as we defined in the code examples above) so it looks like this:

Tags

Lastly we have to define a tag. Create a new ‘Purchase tag’ and in Tag configuration select Google Analytics: Universal Analytics.

We also have to choose a trigger, which we defined previously:

Publish the changes, refresh the page and make some bookings. You should be able to see new events triggered in Google analytics.

Conclusion

I described how to measure purchases with gtag.js from the iframe. As an example, I used beds24 booking and property management system. As long as you have access to the iframe, you can apply the same principles described to other systems, because we learned how the communication between the parent window and the iframe work.

We also learned how to enable Ecommerce in GA and then we followed gtag documentation for measuring purchases, although Google Analytics and GTM settings can also vary depending on your needs.

I hope you find the article useful even if it doesn’t meet exactly your project criteria but it gives you some guidance. Thanks for reading!