Tracking form conversion rates

Form conversion rate is a critical metric for measuring the effectiveness of forms in driving user actions on your website or portal. Whether your goal is to collect leads, gather feedback, or process registrations, tracking how well your forms perform in terms of conversions is essential to improving user experience and achieving business goals. In the context of PowerApps Portals (now known as Power Pages), setting up form conversion tracking can help you identify bottlenecks, optimize the user flow, and improve the conversion rate of your forms.

This guide will walk you through the process of tracking form conversion rates in PowerApps Portals using a combination of Power Pages features and external analytics tools like Google Analytics and Application Insights.

---

1. Understanding Form Conversion Rates

Form Conversion Rate refers to the percentage of users who complete a form compared to the number of users who viewed the form. It’s calculated as: Form Conversion Rate=(Number of Form SubmissionsNumber of Form Views)×100\text{Form Conversion Rate} = \left( \frac{\text{Number of Form Submissions}}{\text{Number of Form Views}} \right) \times 100Form Conversion Rate=(Number of Form ViewsNumber of Form Submissions​)×100

For example, if 100 users visit a page with a form, and 25 of them submit the form, the conversion rate would be 25%.

Tracking this metric allows you to assess:

• The effectiveness of form design and layout.
• The clarity of the form’s instructions or labels.
• The ease of submission (i.e., minimal friction in the process).

---

2. Methods to Track Form Conversion Rates in PowerApps Portals

PowerApps Portals (Power Pages) doesn’t have built-in analytics features for form submission tracking, so you will need to integrate third-party analytics tools, like Google Analytics or Application Insights, and use custom code to track form interactions.

---

Step 1: Integrate Google Analytics or Application Insights

You can use Google Analytics or Application Insights to track user interactions, including form submissions. Here’s how to integrate both tools into your PowerApps Portal:

Option 1: Integrating Google Analytics

1. Create a Google Analytics Account (if you don’t already have one).
2. Get the Google Analytics Tracking ID for your portal.
3. Add the Tracking Code to Your Portal:
   • In PowerApps Portals, go to the Portal Management area.
   • Under Site Settings, look for Custom JavaScript or Header/Footer.
   • Paste the Google Analytics tracking code into the header of the page.

Example:

<!-- Google Analytics Tracking Code -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_TRACKING_ID');
</script>

4. Track Form Submissions: Use Event Tracking in Google Analytics to track when a form is submitted. Add a custom event trigger in your form submission script.

Example:

document.getElementById("formSubmitButton").addEventListener("click", function() {
  gtag('event', 'form_submission', {
    'event_category': 'Forms',
    'event_label': 'Contact Us Form',
    'value': 1
  });
});

This code tracks a custom event in Google Analytics when the form submission button is clicked.

Option 2: Integrating Application Insights

1. Create an Application Insights resource in the Azure portal.
2. Add the Application Insights SDK to Your Portal:
   • Navigate to Portal Management and add the Application Insights tracking code to the page’s header.
   • Use the Instrumentation Key for your Application Insights resource.

Example:

<script type="text/javascript">
  var appInsights = window.appInsights || function (a) {
    function b(a) {
      c[a] = function () { var b = arguments; c.push([a, b]) }
    }
    var c = [];
    b("trackEvent");
    b("trackPageView");
    var d = { config: "YOUR_INSTRUMENTATION_KEY" };
    var e = document.createElement("script");
    e.src = "https://az416426.vo.msecnd.net/scripts/a/ai.0.js";
    e.onload = function () {
      appInsights = window.appInsights || function () { (appInsights.queue = appInsights.queue || []).push(arguments) };
      appInsights("trackEvent", "Form Submission", { formName: "Contact Us" });
    };
    document.head.appendChild(e);
  };
</script>

3. Track Form Submissions: Add the following script to track form submission events.

appInsights.trackEvent("Form Submission", { formName: "Contact Us" });

You can modify this script to track different forms and pass additional properties to track which form is being submitted.

---

Step 2: Track Form Views and Interactions

In addition to tracking form submissions, you should track how often the form is viewed. This is important for calculating the conversion rate. Both Google Analytics and Application Insights can track page views automatically, but you may want to track specific interactions on the form page, such as when users click to expand form fields or interact with the form elements.

Tracking Form Views in Google Analytics:

In Google Analytics, the Pageview event is automatically tracked. You can set up Custom Dimensions in Google Analytics to track specific interactions, such as when a user clicks on a form.

Example:

gtag('event', 'form_view', {
  'event_category': 'Forms',
  'event_label': 'Contact Us Form',
  'value': 1
});

Tracking Form Views in Application Insights:

For Application Insights, you can track custom events when the form is loaded or interacted with.

appInsights.trackEvent("Form View", { formName: "Contact Us" });

---

Step 3: Analyze the Data

Once your tracking is set up, the next step is to analyze the collected data. Both Google Analytics and Application Insights will allow you to:

• Monitor event count: This indicates how many times a form submission or form view occurred.
• Measure conversion rate: Compare the number of form views to form submissions to calculate the conversion rate.
• Identify user behavior: Learn about how users interact with the form (e.g., which form fields they skip, how long they take to fill out the form).

---

3. Best Practices for Tracking Form Conversion Rates

• Use Goal Tracking in Google Analytics: Set up Goals in Google Analytics to track form submissions as conversions. This helps automate the process of calculating conversion rates.
• Test Form Modifications: A/B test different form designs or field types to see what increases the conversion rate.
• Reduce Friction: Keep forms simple, with a minimal number of fields, and offer clear instructions to increase conversion rates.
• Monitor Mobile Conversions: Ensure that your forms are mobile-optimized. Track mobile-specific conversion rates as mobile usage continues to grow.