Sending GA Events when Drift is Installed via an iFrame

When Drift is installed on an iframe, you may have noticed that GA events have stopped flowing into your instances. This is due to the nature of iframes. In order to receive events in GA once again with an iframe installation, you will need to add your GA script on your inner iframe.

To do this:

1. Inside of Google Analytics, navigate to Admin > Data Collection and Modification > Data Streams.
2. Select your Data Stream
3. Scroll down to the “Google Tag” section
4. Click on “View tag instructions”
5. Click on “Install Manually.” This is where you find the Google tag for your account.
6. Place the script inside of your inner iframe html. When following the iframe installation doc, this would be inside of the file named “drift-frame.html”

That’s it! Once this is in place, you should start receiving events once again.

🚧

Note: Make sure you have added your measurement ID inside of Drift for your GA integration. For this to work, you have to be using the native GA integration inside of Drift.

There may also be the case that you are not able to use Drift’s native integration for GA. For example, you may want to send events to more than one GA instance or perhaps you have specific names for your event labels and you want to have access to the data right before being sent. In that case, you will have to build and implement your own integration.

To do this:

• Set up event listeners in the inner iframe - According to our docs, the inner iframe is where Drift is installed. Therefore, the event listeners need to be set up in the iframe where Drift is actually loading
• Set up postMessages - The inner iframe has to send data to the parent iframe. You will essentially need to bubble up any events that occur within the inner iframe
• Send data to your GA instance - Once that you have event data ready to be sent, you will need to send it to your GA4 instance. Google has a series of supporting documents to achieve this:
  • https://developers.google.com/analytics/devguides/migration/ecommerce/gtm-ga4-to-ua
  • https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events

This tutorial is going to focus on the first two points, given that the scripts to send the events to GA4 may vary and fall outside of Drift’s scope.

Setting up Event Listeners in the Inner Iframe

The event listeners will allow you to “listen” to events that occur within the Drift Widget. For examples: button clicked, email captured, etc

Here you can find all the events from the Widget that you can listen to. These are all the events that our native GA integration tracks as well.

🚧

: You do not have to set up every event listener. You should set up only the events that you are interested on tracking/sending to GA.

For this tutorial, we’ll be focusing on tracking three events: button clicked, email captured and playbook fired.

These listeners will sit on the drift-frame-snippet.js (Using this doc’s naming conventions). We will also use window.parent.postMessage to send the data to the outer/parent iframe:

 if (message && message.type === "driftSetContext") {
    drift("setContext", message.data);
    drift("config", {
      iframeMode: true,
      iframeSandbox: "allow-scripts",
    });
    drift("page");
    drift("init", "y9vf8wusrym9"); 

  //Event Listeners for GA

drift("on", "ready", function (data) {
  //Playbook Fired Event - Send event to Parent IFrame
  drift("on", "conversation:playbookFired", function(data) {
    window.parent.postMessage({ type: "PlaybookFired", data }, '*')
  console.log("Playbook fired data from inner iframe: " + JSON.stringify(data))
  })

  //Button Clicked - Send event to Parent IFrame
  drift("on", "conversation:buttonClicked", function(data) {
    window.parent.postMessage({ type: "ButtonClicked", data }, '*')
  console.log("Button Clicked data from inner iframe: " + JSON.stringify(data))

  });

  //Email Captured - Send event to Parent IFrame
  drift("on", "emailCapture", function(data) {
    window.parent.postMessage({ type: "EmailCaptured", data }, '*')
  console.log("Email Capture from inner iframe: " + JSON.stringify(data.data))
  });

})//end of drift on ready

Next, we will use the message event to receive the messages form the inner iframe. The message you receive will contain the data for the event:

//Event Listener for a message from the inner Iframe
window.addEventListener("message", function (event) {
  // on startup - pass created context into iframe
  var message = event.data;


   
    //Receiving Playbook Fired from Inner Iframe
    if (message.type === "PlaybookFired") {
       console.log("Playbook Fired received - Message from Parent Iframe");
       console.log("Playbook fired Data from Parent: " + JSON.stringify(message.data))
	//GA Logic to send event goes here
      }

    //Receiving Button Clicked from Inner Iframe
    if (message.type === "ButtonClicked") {
       console.log("Button Clicked - Message from Parent Iframe");
       console.log("Button Clicked Data from Parent: " + JSON.stringify(message.data))
	//GA Logic to send event goes here
      }

    //Receiving Email Captured from Inner Iframe
    if (message.type === "EmailCaptured") {
      console.log("Email Captured - Message from Parent Iframe");
      console.log("Email Captured Data from Parent: " + JSON.stringify(message.data))
	//GA Logic to send event goes here
     }
  });

This should enable your parent iframe to receive the event data that the widget sends out when a specific action takes place. You will have the data on your parent iframe and are able to send this over to GA or any analytics platform that your heart desires!