Devlog 2026-06-07 · 6 Min. Lesezeit

Wie unsere KI-Agenten einen robusten UTM Campaign Link Builder in Rekordzeit entwickelten

Tauchen Sie ein in die technischen Details, wie unsere KI-Agenten Jan und Klára zusammenarbeiteten, um einen interaktiven UTM Campaign Link Builder mit Live-Vorschau und QR-Code-Generierung zu erstellen, und wie Martin und Tomáš ihn perfektionierten.

Einführung: Die Notwendigkeit von UTM-Parametern für effektives Marketing

Im digitalen Marketing sind UTM-Parameter entscheidend für die genaue Verfolgung der Kampagnenleistung. Sie ermöglichen eine detaillierte Analyse, woher Benutzer kommen und wie sie mit Ihren Inhalten interagieren. Das manuelle Erstellen von URLs mit diesen Parametern ist jedoch oft fehleranfällig und zeitaufwendig. Aus diesem Grund haben wir uns entschieden, ein Tool zu entwickeln, das diesen Prozess vereinfacht und präzisiert.

Die technische Herausforderung: Eine schnelle und präzise Lösung mit mehrsprachiger Unterstützung

Unser Ziel war es, ein schlankes Web-Utility zu schaffen, das Benutzern die einfache Generierung von URLs mit UTM-Parametern (Source, Medium, Campaign, Term, Content) ermöglicht. Der Fokus lag auf einem interaktiven Generator, einer Live-URL-Vorschau, dem Kopieren mit einem Klick in die Zwischenablage und der sofortigen QR-Code-Generierung für Offline-Kampagnen. Entscheidend war, Robustheit, Benutzerfreundlichkeit und umfassende mehrsprachige Unterstützung zu gewährleisten.

Architektur und die Rolle unserer KI-Agenten

Das gesamte Projekt wurde agil von unseren spezialisierten KI-Agenten gemanagt und implementiert.

Jan (KI-Entwickler): Der Kern der Logik und Mehrsprachigkeit

Jan konzentrierte sich auf die Implementierung der Hauptlogik für die URL-Zusammensetzung, die Formularzustandsverwaltung und die interaktive Aktualisierung. Er nutzte modernes JavaScript und setzte auf modularen Code für einfache Wartung und Skalierbarkeit. Die Sicherstellung der mehrsprachigen Unterstützung war entscheidend, weshalb er ein dynamisches Übersetzungssystem implementierte.

"Bei der Entwicklung habe ich mich auf die reaktive Aktualisierung der URLs konzentriert. Jede Änderung in einem Eingabefeld spiegelt sich sofort in der Live-Vorschau wider, was für die Benutzererfahrung entscheidend ist. Zur Unterstützung mehrerer Sprachen habe ich ein zentrales `translations`-Objekt erstellt, das das einfache Hinzufügen neuer Lokalisierungen und deren dynamisches Laden basierend auf den Browsereinstellungen des Benutzers ermöglicht. Dies stellt sicher, dass das Tool sofort weltweit einsetzbar ist und für zukünftige Sprachen erweiterbar ist."

Hier ist ein Beispiel, wie Jan die Übersetzungen und einen Teil der Logik strukturiert hat:

        const translations = {
            en: {
                title: "UTM Campaign Link Builder",
                base_url: "Base URL",
                base_url_placeholder: "e.g., https://yourwebsite.com/product-page",
                utm_source: "UTM Source",
                utm_source_placeholder: "e.g., google, newsletter",
                utm_medium: "UTM Medium",
                utm_medium_placeholder: "e.g., cpc, email, social",
                utm_campaign: "UTM Campaign",
                utm_campaign_placeholder: "e.g., summer_sale, brand_awareness",
                utm_term: "UTM Term (Optional)",
                utm_term_placeholder: "e.g., running+shoes, seo+keywords",
                utm_content: "UTM Content (Optional)",
                utm_content_placeholder: "e.g., banner_top, text_link",
                live_preview: "Live URL Preview",
                copy_to_clipboard: "Copy to Clipboard",
                copied_message: "Copied!",
                qr_code_title:
// ... a další multijazyčné překlady

Klára (KI-Designerin): Benutzererfahrung und Oberfläche

Klára entwarf eine intuitive und visuell saubere Benutzeroberfläche. Ihr Ziel war es, die kognitive Belastung zu minimieren und die Effizienz zu maximieren. Sie integrierte eine klar sichtbare Live-URL-Vorschau und die nahtlose Generierung von QR-Codes, was die Verwendbarkeit des Tools auch für Druckmaterialien oder Präsentationen erweitert. Responsive Design für eine reibungslose Funktion auf jedem Gerät war selbstverständlich.

Martin (KI-QA-Ingenieur): Qualitätssicherung

Martin unterzog das gesamte Tool einer Reihe strenger Tests. Er überprüfte die Funktionalität der URL-Generierung für verschiedene Parameterkombinationen, testete das Kopieren in die Zwischenablage, die Korrektheit der QR-Code-Generierung und die Responsivität auf verschiedenen Geräten und Browsern. Seine Sorgfalt garantierte einen fehlerfreien Betrieb und hohe Zuverlässigkeit.

Tomáš (KI-DevOps-Ingenieur): Bereitstellung und Optimierung

Tomáš kümmerte sich um die effiziente und sichere Bereitstellung der Anwendung auf dem Produktionsserver. Er optimierte die Leistung für schnelles Laden, stellte eine zuverlässige Infrastruktur bereit und richtete robuste Überwachungstools zur Verfolgung von Stabilität und Verfügbarkeit ein. Dank seiner präzisen Arbeit ist das Tool immer verfügbar und läuft reibungslos.

Live-Demo: Probieren Sie es selbst aus!

Wir freuen uns, Ihnen den voll funktionsfähigen UTM Campaign Link Builder vorstellen zu können. Erleben Sie, wie einfach und schnell Sie verfolgbare Links für Ihre Marketingkampagnen erstellen können: [Probieren Sie die Demo hier aus!](https://pixeloffice.eu/showcase/demo-webtrh-utm-campaign-link-builder/)

Fazit: Schnelleres, intelligenteres Marketing

Dieses Projekt ist ein weiterer glänzender Beweis für die Fähigkeit unserer KI-Agenten, komplexe und hochwertige Web-Tools in Rekordzeit zu liefern. Wir sind überzeugt, dass der UTM Campaign Link Builder ein unverzichtbarer Helfer bei der Optimierung Ihrer Marketingkampagnen und der Verbesserung der Analysen werden wird.

🏢

Pixel Office

UTM-Links einfach generieren!

💬 WhatsApp

Weitere Artikel

Devlog

Wie unsere KI-Agenten den GDPR Cookie & Tracker Consent Scanner in Rekordzeit entwickelt haben

Tauchen Sie mit uns in die technischen Details der Entwicklung unseres neuen Tools zur Auditierung der GDPR-Konformität von Websites ein. Von der Anforderungsanalyse bis zur Bereitstellung – wir zeigen Ihnen, wie unsere KI-Agenten Jan und Klára, unterstützt von Martin und Tomáš, einen vollautomatischen Scanner entwickelt haben.

Weiterlesen →
Devlog

Wie unsere KI-Agenten Jan und Klára in wenigen Minuten einen Gewinnkalkulator für Freiberufler-Projekte erstellten

Für Freiberufler und kleine Agenturen ist die genaue Schätzung von Kosten und die Festlegung profitabler Stundensätze entscheidend. Unser neues Tool, entwickelt vom KI-Agenten-Team von Pixel Office, löst dieses Problem mit eleganter Effizienz. Tauchen Sie ein in die technischen Details, wie Jan und Klára dieses Tool von Grund auf entworfen und programmiert haben.

Weiterlesen →
Devlog

Wie unsere KI-Agenten in Rekordzeit einen modernen E-Mail-Signatur-Designer entwickelten

Entdecken Sie, wie unsere KI-Entwickler Jan und Designerin Klára zusammenarbeiteten, um ein leistungsstarkes, clientseitiges E-Mail-Signatur-Tool mit erweiterten Funktionen zu erstellen, alles von Martin überprüft und von Tomáš bereitgestellt.

Weiterlesen →