Pixelflow
Schnellstart

.NET Setup

Verwenden Sie diese Anleitung, um PixelFlow in .NET-Anwendungen zu installieren, einschließlich ASP.NET MVC, Razor Pages, Blazor und anderen .NET-Web-Frameworks.

PixelFlow funktioniert auf .NET-Seiten über die Standard-Skript-Installationsmethode. Fügen Sie das Tracking-Skript zum Layout oder Head-Bereich Ihrer Seite hinzu und verwenden Sie dann den Visual Tagger, URL-Trigger oder die programmatische API, um Ereignisse zu verfolgen.

1

Add your site in PixelFlow

  • Melden Sie sich bei PixelFlow an.

  • Klicken Sie auf Neue Website hinzufügen.

  • Wählen Sie Andere aus.

  • Geben Sie Ihren Domainnamen ein.

  • Wählen Sie bei Bedarf Ihre Währung aus.

2

Connect Your Meta Pixel

  • Mit Facebook anmelden (wenn Sie ein Business-Portfolio haben)

ODER

  • Fügen Sie Ihren Pixel-Namen hinzu.

  • Fügen Sie Ihre Pixel-ID hinzu.

  • Fügen Sie Ihr Meta-Pixel-Zugriffstoken hinzu.

Benötigen Sie Hilfe beim Finden dieser Werte? Siehe So verbinden Sie Ihr Meta-Pixel und die Conversions-API.

3

Install the script in your .NET application

Kopieren Sie das generierte PixelFlow-Skript und fügen Sie es in den Head-Bereich Ihrer Anwendung ein. Der Speicherort hängt von Ihrem .NET-Framework ab:

ASP.NET MVC / Razor Pages

Fügen Sie das Skript zu Ihrer gemeinsamen Layout-Datei hinzu, normalerweise _Layout.cshtml oder 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

Fügen Sie das Skript zu Pages/_Host.cshtml (Blazor Server) oder wwwroot/index.html (Blazor WebAssembly) innerhalb des <head>-Bereichs hinzu:

<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 mit Tag-Helpern

Wenn Sie ein gemeinsames Layout verwenden, erstellen Sie eine Teilansicht (Partial View) oder einen Abschnitt für Skripte von Drittanbietern:

<!-- 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>
}

Platzieren Sie das PixelFlow-Skript so früh wie möglich im <head>-Bereich, um sicherzustellen, dass Ereignisse erfasst werden, bevor Benutzer die Seite verlassen. Das Skript ist nur 11 KB groß und lädt asynchron.

4

Deploy your changes

  • Speichern Sie die geänderte Layout- oder Ansichtsdatei.

  • Erstellen und stellen Sie Ihre Anwendung in Ihrer Hosting-Umgebung bereit (Azure App Service, IIS, Docker-Container usw.).

  • Überprüfen Sie, ob das Skript im Seitenquelltext erscheint, indem Sie Ihre bereitgestellte Website aufrufen und das HTML kontrollieren.

5

Verify the setup

  • Besuchen Sie Ihre Website in einem neuen Browser-Tab (vorzugsweise im Inkognito-Modus).

  • Blättern Sie durch einige Seiten, um Seitenaufruf-Ereignisse auszulösen.

  • Kehren Sie zu Ihrem PixelFlow-Dashboard zurück – Sie sollten ein „Herzlichen Glückwunsch“-Bestätigungsfenster sehen.

  • Überprüfen Sie die Ereignisprotokolle, um zu sehen, wie Ereignisse in Echtzeit erscheinen.

Sie können dies auch im Meta Events Manager überprüfen:

  • Öffnen Sie Ihren Meta Events Manager.

  • Gehen Sie zum Tab Testevents.

  • Bestätigen Sie, dass Seitenaufruf-Ereignisse mit der korrekten Ereignis-Matching-Qualität erscheinen.

6

Setup Complete

Die Tracking-Einrichtung für Ihre .NET-Anwendung ist nun abgeschlossen. Sie verfolgen automatisch:

  • Seitenaufrufe (PageViews)

Verwenden Sie die untenstehenden Optionen, um zusätzliche Ereignisse wie Formularübermittlungen, Schaltflächenklicks, Käufe und Leads zu verfolgen.

Zusätzliche Ereignisse verfolgen

Wählen Sie nach der Installation des Skripts aus, wie Sie Conversions auf Ihrer .NET-Website verfolgen möchten:

Methode

Am besten geeignet für

Visual Tagger

Schaltflächenklicks, Formularübermittlungen, Interaktionen auf der Seite. Für die meisten Fälle empfohlen.

URL-Trigger

Dankesseiten, Buchungsbestätigungen, Erfolgsseiten nach Weiterleitungen.

Manuelles Tagging (CSS-Klassen)

Mehr Kontrolle über Ereignisdaten, Erfassung von Formularfeldern, stabile Elementreferenzen.

Programmatische API

Serverseitiges Ereignis-Tracking, benutzerdefinierte Geschäftslogik, im Backend validierte Conversions.

Verwendung der programmatischen API in .NET

Für fortgeschrittene Anwendungsfälle können Sie die Programmatische Tracking-API von PixelFlow über Ihr clientseitiges JavaScript aufrufen. Dies ist nützlich, wenn Sie Ereignisse basierend auf serverseitigen Bedingungen verfolgen oder Ereignisse mit Daten aus Ihrem Backend anreichern möchten.

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

Die programmatische API wird clientseitig im Browser ausgeführt. Für ein vollständig serverseitiges Tracking ohne Browser-JavaScript verwenden Sie die Dokumentation zur programmatischen Tracking-API von PixelFlow und rufen Sie diese von Ihrem Backend über eine HTTP-Anfrage an die Endpunkte von PixelFlow auf.

Häufige Fragen zur .NET-Integration

Sollte ich das Skript auf jeder Seite hinzufügen?

Nein – fügen Sie das Skript einer gemeinsamen Layout-Datei hinzu (_Layout.cshtml, _Host.cshtml oder ähnlich), damit es automatisch auf allen Seiten geladen wird. Dies ist das Standardmuster in .NET-Anwendungen und gewährleistet ein konsistentes Tracking auf Ihrer gesamten Website.

Funktioniert das Skript mit der Single-Page-Navigation von Blazor?

Ja. Das PixelFlow-Skript wird einmal beim Initialisieren der Anwendung geladen. Seitenaufruf-Ereignisse werden automatisch verfolgt, wenn Benutzer zwischen Blazor-Komponenten navigieren. Für benutzerdefinierte Ereignisse, die durch Blazor-Interaktionen ausgelöst werden, verwenden Sie den Visual Tagger oder die programmatische API.

Wie verfolge ich Ereignisse aus dem C#-Code-Behind?

Das clientseitige Skript von PixelFlow erledigt die meisten Tracking-Anforderungen automatisch. Für Ereignisse, die über C#-Backend-Code ausgelöst werden müssen (wie Bestätigungen nach der Zahlung), haben Sie zwei Möglichkeiten:

  1. Injizieren Sie ein clientseitiges Skript aus Ihrer Razor-Ansicht oder Blazor-Komponente, um window.pixelFlow.trackEvent() aufzurufen, nachdem die Aktion abgeschlossen ist.

  2. Verwenden Sie die serverseitigen API-Endpunkte von PixelFlow, um Ereignisse direkt von Ihrem Backend zu senden (wird in der Dokumentation zur programmatischen API behandelt).

Was ist mit DSGVO und Einwilligung?

PixelFlow ist DSGVO-konform. Fügen Sie eine Einwilligungsprüfung hinzu, bevor das PixelFlow-Skript geladen wird. Kapseln Sie die Skript-Initialisierung in einer Funktion, die erst ausgeführt wird, nachdem der Benutzer seine Einwilligung gegeben hat. Informationen zu Integrationsmustern finden Sie in der Dokumentation Ihrer Consent-Management-Plattform.

Fehlerbehebung

Problem

Lösung

Skript erscheint nicht im Seitenquelltext

Überprüfen Sie, ob die Layout-Datei von Ihren Seiten verwendet wird. Suchen Sie nach bedingtem Layout-Rendering oder @section-Blöcken, die den Standard-Head überschreiben könnten.

Ereignisse werden nicht im Dashboard angezeigt

Löschen Sie den Browser-Cache und testen Sie im Inkognito-Modus. Vergewissern Sie sich, dass Ihre Pixel-ID und Ihr Zugriffstoken in PixelFlow korrekt konfiguriert sind. Überprüfen Sie die Ereignisprotokolle auf Fehlerdetails.

Doppelte Ereignisse in Meta

Stellen Sie sicher, dass Sie das Meta-Pixel nicht separat installiert haben. PixelFlow verwaltet sowohl das Browser-Pixel als auch CAPI automatisch mit Deduplizierung.

Blazor SPA verfolgt keine Seitenaufrufe

Die clientseitige Navigation von Blazor löst keine vollständigen Seitenladevorgänge aus. Verwenden Sie den Visual Tagger, um bestimmte Benutzeraktionen zu verfolgen, oder fügen Sie Aufrufe der programmatischen API zu Ihren Blazor-Komponenten hinzu.

How to Track & Trigger Events

Entdecken Sie alle Möglichkeiten, Conversions auf Ihrer Website zu verfolgen – Visual Tagger, URL-Trigger, manuelles Tagging, Integrationen und die programmatische API.

Learn More

War das hilfreich?