Pixelflow
Quickstart

.NET Setup

Use this guide to install PixelFlow on .NET applications including ASP.NET MVC, Razor Pages, Blazor, and other .NET web frameworks.

PixelFlow works on .NET sites through the standard script installation method. Add the tracking script to your site's layout or head section, then use Visual Tagger, URL triggers, or the Programmatic API to track events.

1

Add your site in PixelFlow

  • Log in to PixelFlow.

  • Click Add New Site.

  • Select Other.

  • Enter your domain name.

  • Choose your currency if needed.

2

Connect Your Meta Pixel

  • Login with Facebook (if you have a business portfolio)

OR

  • Add your Pixel Name.

  • Add your Pixel ID.

  • Add your Meta Pixel Access Token.

Need help finding these values? See How to Connect Your Meta Pixel & Conversions API.

3

Install the script in your .NET application

Copy the generated PixelFlow script and add it to your application's head section. The location depends on your .NET framework:

ASP.NET MVC / Razor Pages

Add the script to your shared layout file, typically _Layout.cshtml or Pages/Shared/_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Your App</title>
    
    <!-- PixelFlow tracking script -->
    <script>
        /* Your PixelFlow tracking script */
    </script>
    
    @await RenderSectionAsync("Styles", required: false)
</head>

Blazor Server

Add the script to Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly) inside the <head> section:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    
    <!-- PixelFlow tracking script -->
    <script>
        /* Your PixelFlow tracking script */
    </script>
</head>

ASP.NET Core with Tag Helpers

If you use a shared layout, create a partial view or section for third-party scripts:

<!-- Views/Shared/_Layout.cshtml -->
<head>
    @await RenderSectionAsync("HeadScripts", required: false)
</head>

<!-- Then in each page or shared partial: -->
@section HeadScripts {
    <script>
        /* Your PixelFlow tracking script */
    </script>
}

Place the PixelFlow script as early as possible in the <head> section to ensure events are captured before users navigate away. The script is only 11kb and loads asynchronously.

4

Deploy your changes

  • Save the modified layout or view file.

  • Build and deploy your application to your hosting environment (Azure App Service, IIS, Docker container, etc.).

  • Verify the script appears in the page source by viewing your deployed site and checking the HTML.

5

Verify the setup

  • Visit your website in a new browser tab (preferably in incognito mode).

  • Browse a few pages to trigger page view events.

  • Return to your PixelFlow dashboard—you should see a "Congratulations" confirmation window.

  • Check the Event Logs to see events appearing in real-time.

You can also verify in Meta Events Manager:

  • Open your Meta Events Manager.

  • Go to Test Events tab.

  • Confirm page view events are appearing with correct event match quality.

6

Setup Complete

Your .NET application tracking setup is now complete. You're automatically tracking:

  • PageViews

Use the options below to track additional events like form submissions, button clicks, purchases, and leads.

Track Additional Events

After installing the script, choose how you want to track conversions on your .NET site:

Method

Best For

Visual Tagger

Button clicks, form submissions, on-page interactions. Recommended for most cases.

URL Triggers

Thank-you pages, booking confirmations, success pages after redirects.

Manual Tagging (CSS Classes)

More control over event data, form field capture, stable element references.

Programmatic API

Server-side event tracking, custom business logic, backend-validated conversions.

Using the Programmatic API in .NET

For advanced use cases, you can call PixelFlow's Programmatic Tracking API from your client-side JavaScript. This is useful when you need to track events based on server-side conditions or enrich events with data from your backend.

<script>
    // Track a purchase after server-side validation
    async function trackPurchase(orderData) {
        if (window.pixelFlow?.trackEvent && window.pixelFlow?.utils?.normalizeCustomerData) {
            const userData = await window.pixelFlow.utils.normalizeCustomerData({
                em: orderData.customerEmail,
                fn: orderData.customerFirstName,
                ln: orderData.customerLastName,
                ph: orderData.customerPhone
            });
            
            const customData = {
                value: orderData.total,
                currency: orderData.currency,
                content_ids: orderData.productIds,
                content_type: 'product'
            };
            
            await window.pixelFlow.trackEvent('Purchase', customData, userData);
        }
    }
</script>

The Programmatic API runs client-side in the browser. For fully server-side tracking without browser JavaScript, use PixelFlow's Programmatic Tracking API documentation and call it from your backend via HTTP request to PixelFlow's endpoints.

Common .NET Integration Questions

Should I add the script to every page?

No—add the script to a shared layout file (_Layout.cshtml, _Host.cshtml, or similar) so it loads automatically on all pages. This is the standard pattern in .NET applications and ensures consistent tracking across your entire site.

Will the script work with Blazor's single-page navigation?

Yes. The PixelFlow script loads once when the application initializes. Page view events are tracked automatically as users navigate between Blazor components. For custom events triggered by Blazor interactions, use Visual Tagger or the Programmatic API.

How do I track events from C# code-behind?

PixelFlow's client-side script handles most tracking needs automatically. For events that must be triggered from C# backend code (like post-payment confirmations), you have two options:

  1. Inject client-side script from your Razor view or Blazor component to call window.pixelFlow.trackEvent() after the action completes.

  2. Use PixelFlow's server-side API endpoints to send events directly from your backend (covered in the Programmatic API documentation).

Troubleshooting

Issue

Solution

Script not appearing in page source

Verify the layout file is being used by your pages. Check for conditional layout rendering or @section blocks that might override the default head.

Events not showing in dashboard

Clear browser cache and test in incognito mode. Verify your Pixel ID and Access Token are correctly configured in PixelFlow. Check Event Logs for error details.

Duplicate events in Meta

Ensure you haven't installed the Meta Pixel separately. PixelFlow handles both browser Pixel and CAPI automatically with deduplication.

Blazor SPA not tracking page views

Blazor's client-side navigation doesn't trigger full page loads. Use Visual Tagger to track specific user actions, or add Programmatic API calls to your Blazor components.

How to Track & Trigger Events

Explore all the ways to track conversions on your site—Visual Tagger, URL triggers, manual tagging, integrations, and the Programmatic API.

Learn More

Was this helpful?