How to Track Yay! Forms Events with Google Tag Manager on Embedded Forms

This tutorial will help you capture events triggered by a Yay! Forms embedded (“embedded”) form on your website using Google Tag Manager (GTM). You’ll learn how to listen for form events from the Yay! Forms iframe, push those events into the GTM dataLayer, and then use variables and triggers to send the captured data to tools like Google Analytics 4 (GA4) and Meta Pixel.

Tracking Yay! Forms embedded forms with GTM

Use embedded (“embedded”) Yay! Forms forms for audience engagement and lead generation. You can easily track form views, starts, answers, and submissions as conversions and interactions using Google Tag Manager (GTM) and this Yay! Forms event listener code.

Example GTM Data Layer object

Example Data Layer object for GTM

Here is an example of an object sent to the GTM dataLayer when a question is answered:

{
  "event": "YFAnswer",
  "gtm": {
    "uniqueEventId": 1026,
    "start": 1718243777463
  },
  "data": {
    "responseId": "666a4f5ad3d586edd79fee54",
    "fieldId": "661071840811e305370cadb7",
    "fieldTitle": "<p>Name</p>",
    "content": "Rafael",
    "variables": {score: 6},
    "hiddenFields": {src: "lp01"},
    "tracking": {
      utm_source: "facebook",
      utm_medium: "cpc",
      utm_campaign: "summer_sale",
      utm_content: "beachwear",
      utm_term: "ad1"
    },
    "questionList": [
      {
        "fieldId": "661071840811e305370cadb7",
        "fieldTitle": "<p>Name</p>",
        "content": "Rafael"
      },
      {
        "fieldId": "661071860811e305370cadb8",
        "fieldTitle": "<p>Email</p>",
        "content": "[email protected]"
      },
      {
        "fieldId": "661071860811e305370cadb9",
        "fieldTitle": "<p>Phone</p>",
        "content": "+5511988888888"
      }
    ]
  }
}

Step-by-step guide

Step 1: Create a Custom HTML Tag in GTM

Start by creating a custom HTML tag in GTM where you can conveniently paste the listener code. This tag will listen for events from the Yay! Forms iframe and send them to the dataLayer on the main page.

Step 2: Implement the Event Listener Code

Paste the following event listener code into the custom HTML tag you created:

<script>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function(e) {
  var key = e.message ? "message" : "data";
  var data = e[key];
  var validEventTypes = ["YFView", "YFStart", "YFAnswer", "YFSubmit"];

if (validEventTypes.includes(data.type)) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': data.type,
      'data': data.eventData
    });
  }
}, false);
</script>

This code listens for messages from the Yay! Forms iframe and sends relevant events to the dataLayer.

Step 3: Configure Data Layer Variables

To capture form details such as response ID, field ID, field title, content, and question list, you need to configure dataLayer variables in GTM.

1. Go to Variables in GTM: In your GTM workspace, navigate to the "Variables" section.
2. Click New: Click the "New" button to create a new variable.
3. Choose the Data Layer Variable Type: Select "Data Layer Variable" as the variable type.
4. Configure Each Variable: Create the following variables with their respective Data Layer Variable Names:

Variable name	Data Layer Variable Name
responseId	data.responseId
fieldId	data.fieldId
fieldTitle	data.fieldTitle
content	data.content
questionList	data.questionList

Step 4: Configure Custom Variables Using Custom JavaScript

To capture specific user data, such as name, email, and phone, use custom JavaScript variables that iterate over the questionList array to find the correct values.

Example custom JavaScript code:

function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '**field_id**';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

☝️ You can find a question ID on the form edit screen by opening the field settings. Simply select the desired field and locate the ID in the settings section, as shown in the image below.

Detailed configuration in GTM

Detailed Configuration in GTM

1. Create a Data Layer Variable for questionList:

   • Variable Name: questionList
   • Data Layer Variable Name: data.questionList

2. Go to Variables in GTM: In your GTM workspace, navigate to the "Variables" section.

3. Click New: Click the "New" button to create a new variable.

4. Choose the Variable Type: Select "Custom JavaScript".

5. Configure the Custom JavaScript Variable for Each Field. See the examples below:

Variable name:

• Variable Name: name
• Variable Type: Custom JavaScript
• Variable Code:

function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '661071860811e305370cadb7';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

Variable email:

• Variable Name: email
• Variable Type: Custom JavaScript
• Variable Code:

function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '661071860811e305370cadb8';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

Variable phone:

• Variable Name: phone
• Variable Type: Custom JavaScript
• Variable Code:

function() {
  var questionList = {{questionList}};
  var filtered = questionList.filter(function(question) {
    return question.fieldId === '661071860811e305370cadb9';
  });
  return filtered.length > 0 ? filtered[0].content : '';
}

☝️ Make sure to use the corresponding Field ID in the JavaScript code.

Step 5: Create Custom Event Triggers

To enable your marketing tags/pixels to fire, you need to create custom event triggers using the event names:

• YFView: For when the form is viewed.
• YFStart: For when the form is started.
• YFAnswer: For when a question is answered.
• YFSubmit: For successful form submissions.

1. Go to Triggers in GTM: In your GTM workspace, navigate to the "Triggers" section.
2. Click New: Click the "New" button to create a new trigger.
3. Choose the Trigger Type: Select "Custom Event" as the trigger type.
4. Configure Each Trigger: Create the following triggers with their respective event names:

Trigger Name	Event Name
YFStart	YFStart
YFView	YFView
YFAnswer	YFAnswer
YFSubmit	YFSubmit

Step 6: Include Triggers and Parameters in Your Event Tags

You can now include triggers and parameters in your event tags for Google Analytics 4 (GA4) and Meta Pixel.

Example for Google Analytics 4 (GA4)

Create a new tag: Choose "Tag Configuration" > "Google Analytics: GA4 Event".

Configure event parameters:
Event Name: {{event}}
Event Parameters:

• response_id: {{responseId}}
• name: {{name}}
• email: {{email}}
• phone: {{phone}}

Add a trigger: Select the custom event triggers you created for YFView, YFStart, YFAnswer, and YFSubmit.

Example for Meta Pixel

1. Create a new tag: Choose "Tag Configuration" > "Custom HTML".
2. Paste the Meta Pixel event code:

<script>
fbq('trackCustom', '{{event}}', {
  response_id: '{{responseId}}',
  name: '{{name}}',
  email: '{{email}}',
  phone: '{{phone}}'
});
</script>

3. Add a trigger: Select the custom event triggers you created for YFView, YFStart, YFAnswer, and YFSubmit. We recommend using the YFAnswer event since the user may not always complete the form.

☝️ Make sure the questionList variable is configured correctly to access the full array in the dataLayer.

Conclusion

This guide explained how to listen for Yay! Forms embedded-form events, push them into the GTM dataLayer, and then use GTM variables, custom events, and triggers to send consistent event names and form data into your analytics and marketing tags.