Google Analytics for Power Pages multi-step forms

Google Analytics for Power Pages is essential to gaining insights into users’ experience, engagement, and conversions on the portal. It can tell you whether your portal is performing well and where areas of friction require attention and improvement.

It’s not difficult to add Google Analytics tracking to Power Pages. With the basic implementation, you get essential insight into users’ use of the portal, the technology they use, and the pages they visit.

However, you will quickly see that it’s challenging to get meaningful insights for the following:

• There are no insights in users’ visits to individual steps, which is important to understand where users may be dropping out. All steps of multi-step forms are reported as one page!
• All modal forms are also reported as the view of a single page.

In this article, I’ll explain how to address these issues and use Google Analytics to track multi-step forms.

Basic implementation

With the basic implementation of Google Analytics in Power Pages, you will be able to see:

• Active, unique and returning users
• Pages they visit (but not steps of multi-step form nor the modal forms opened!)
• The regions they visit from
• The technology they use (mobile, web, screen size, etc)
• and some other statistics.

To implement Google Analytics in a basic form, follow these steps:

1. Create a Google Analytics account, “property” and “web” stream as covered here: https://support.google.com/analytics/answer/9304153?hl=en.
   • Ensure that Enhancement measurements are enabled.
2. Once you have the web stream created, copy the JavaScript code snippet (starting with <!– Google tag (gtag.js) –>) into the “Head/Bottom” content snippet of Power Pages.
   • If you don’t have this content snippet, just create it. Learn more about the role of the “Head/Bottom” content snippet and Power Pages rendering here: https://www.itaintboring.com/power-platform/power-pages-page-structure/

You are done! Just visit your multistep form and steps several times to get the data generated. You may not see any events until the next 24…48 hours. To check that everything should work, find a little network request “collect” in your browser when any page of the portal is loaded:

Once the data flows through, go to the Google Analytics dashboard and select the report by Page titles and screen class. You should see the visits to the page hosting the multistep form, but no insights on individual steps:

Advanced implementation

We will tweak the script slightly and introduce additional configuration to allow the tracking of individual steps.

The idea here is to override the default “Page title” metric on the multistep forms with a name reflecting the actual step the user is on. We will use the “stepid” URL parameter to detect where the user is on the form. This can be done on the page’s Google Analytics script “config” event by detecting the page’s path and parameters.

We will need two pieces essentially:

• JSON configuration specifying the targets to override;
• Modified and additional JavaScript in “Head/Bottom” content snippet.

Create a content snippet (you’ll need to use “Portal Management App” for Power Pages) and define a configuration for the form steps. This is my configuration, I called the snippet “GA/PageTitles” and yours will have different “path”, “page_title” and “params.value” parameters:

[ 
    {
        "path": "/Multi-step-form/",
        "params": [],
        "page_title": "Multi-step form - Step 1"
    },
    {
        "path": "/Multi-step-form/",
        "params": [
            { 
                "name": "stepid",
                "value": "097c7725-c807-f011-bae3-00224814f592"
            }],
        "page_title": "Multi-step form - Step 2"
    },
    {
        "path": "/Multi-step-form/",
        "params": [
            { 
                "name": "stepid",
                "value": "b688b437-c807-f011-bae3-00224814f592"
            }],
        "page_title": "Multi-step form - Step 3"
    }
]

Replace the basic Google Analytics script with this one in the “Head/Bottom” content snippet. Don’t forget to replace two occurrences of <your GA property code> with the actual Google property code (starting with “G-“):

<script>
  function getPageTitle(){
    const location = window.location;
    const customPageTitles = {{snippets['GA/PageTitles']}};

    const searchParams = new URLSearchParams(location.search);
    let pageTitle = document.title;
    customPageTitles.forEach((element) => {
      //Check every element for matching. Assume if parameter is defined but no value then any parameter value is acceptable as matching
      if(element.path === location.pathname && 
        element.params.every((param) => (searchParams.has(param.name) && ( param.value === "" || searchParams.get(param.name) === param.value))))
        pageTitle = element.page_title;
    })

    return pageTitle;
  }
</script>

<script async="" src="https://www.googletagmanager.com/gtag/js?id=<your GA property code>"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<your GA property code>', {
    'page_title': getPageTitle(),
    'debug_mode': true 
  });
</script>

In the above script, there are two parts

1. The first script block defines the function “getPageTitle()”, which returns the page title for tracking—either the original or the alternative one as described in the configuration stored in the content snippet “GA/PageTitles”.
2. The last two blocks are a slightly modified GA tracking implementation where the following has been changed:
   • “page_title” parameter is set to the value that the “getPageTitle()” function returns.
   • “debug_mode” is set to “true” for easy debugging. See more here: https://support.google.com/analytics/answer/7201382?hl=en. This should be set to “false” in the production environment.

Now, try going through your multi-step form several times to generate tracking events and wait about 30 minutes or an hour. Once the data flows through the black box of Google servers, you should see quite a different picture in your report! The page titles are now unique for each step, and you can see individual page views for steps:

You can even build a funnel exploration in Google Analytics to see the user conversion and drop out between steps.

Limitations

The approach described in this post uses URL parameters (stepid) to detect the step the user is on in the form. Note that Power Pages don’t add this parameter in the following cases.

When a user starts the multi-step form for the first time, there is no “stepid” parameter. This isn’t an issue if we assume that the path with no parameters is the start of the multi-step form, as in the above example.

This parameter is also not added when the user returns to the form if it was saved in a session at any other step. So, you may open the form and end up on Step 2, for example, but there will be no stupid parameter.

To overcome the latter, it would require querying session state with the web API, which may create performance implications and is beyond the scope of this article. Without this workaround, though, the impact is that the visits to the start of the multistep forms (that can be saved and returned to) will be slightly over-reported. This may not be a big deal after all.

—

I hope this post helped you implement Google Analytics to better understand user behaviour and Power Pages portal performance. Please leave a comment or reach out if you have any ideas on improving this approach. Cheers!

Original Post https://cloudminded.blog/2025/03/27/google-analytics-for-power-pages-multi-step-forms/