How To Track Yay! Forms Events With Google Tag Manager in Embedded Forms

How to Track Yay! Forms Submissions with Google Tag Manager

Enhance your marketing insights with conversion data from Yay! Forms. Use embedded Yay! Forms to engage your audience and generate leads. You can easily track form views, starts, responses, and submissions as conversions and interactions using Google Tag Manager (GTM) and this event listener code from Yay! Forms.

Example of a 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": "test@yayforms.com"
      },
      {
        "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 the 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.

Go to Variables in GTM:In your GTM workspace, navigate to the "Variables" section.
Click New:Click the "New" button to create a new variable.
Choose Data Layer Variable Type:Select "Data Layer Variable" as the variable type.
Configure Each Variable:Create the following variables with their respective Data Layer Variable Names:
- Variable Name: responseId
  - Data Layer Variable Name: data.responseId
- Variable Name: fieldId
  - Data Layer Variable Name: data.fieldId
- Variable Name: fieldTitle
  - Data Layer Variable Name: data.fieldTitle
- Variable Name: content
  - Data Layer Variable Name: data.content
- Variable Name: questionList
  - Data Layer Variable Name: data.questionList

Step 4: Configure Custom Variables Using Custom JavaScript

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

Example of a 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 : '';
}

NOTE: You can get the ID of a question in the form editor. When selecting a question, the URL will end in something like ?fieldid=629gf8238a124a052r02b98 . The part after the equal sign is the question ID.

Detailed Configuration in GTM

Create a Data Layer Variable for questionList :
- Variable Name: questionList
- Data Layer Variable Name: data.questionList
Go to Variables in GTM:In your GTM workspace, navigate to the "Variables" section.
Click New:Click the "New" button to create a new variable.
Choose Variable Type:Select "Custom JavaScript".
Configure the Custom JavaScript Variable for Each Field. Look at 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 : '';
}

Step 5: Create Custom Event Triggers

To allow 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

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

Step 6: Include Triggers and Parameters in Your Event Tags

Now you can 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 the 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

Create a New Tag:
- Choose "Tag Configuration" > "Custom HTML".
Paste the Meta Pixel Event Code:

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

Add a Trigger:
- Select the custom event triggers you created for "YFView", "YFStart", "YFAnswer", and "YFSubmit". We recommend using the "YFAnswer" event since users may not always complete the form.

Note

Ensure that the questionList variable is configured correctly to access the full array in the dataLayer.

Conclusion

By following these steps, you can effectively track views, starts, responses, and submissions of Yay! Forms using Google Tag Manager. This setup will help you gain deeper insights into user engagement and improve your marketing strategies. Be sure to test each event trigger to confirm that events are being captured correctly and that data is being sent to the dataLayer as expected.

If you encounter any issues, check the configuration of your custom HTML tag, dataLayer variables, and triggers in GTM. Happy analyzing!