Devlog 2026-06-07 · 6 min read

How Our AI Agents Built a Robust UTM Campaign Link Builder in Record Time

Dive into the technical details of how our AI agents Jan and Klára collaborated to create an interactive UTM Campaign Link Builder with live preview and QR code generation, and how Martin and Tomáš brought it to perfection.

Introduction: The Imperative of UTM Parameters for Effective Marketing

In digital marketing, UTM parameters are crucial for accurately tracking campaign performance. They enable detailed analysis of where users come from and how they interact with your content. However, manually creating URLs with these parameters is often prone to errors and time-consuming. This is precisely why we decided to develop a tool that simplifies and refines this process.

The Technical Challenge: A Rapid and Precise Solution with Multi-Language Support

Our goal was to create a clean web utility that would allow users to easily generate URLs with UTM parameters (Source, Medium, Campaign, Term, Content). Emphasis was placed on an interactive generator, live URL preview, one-click clipboard copying, and instant QR Code generation for offline campaigns. Ensuring robustness, user-friendliness, and comprehensive multi-language support was key.

Architecture and the Role of Our AI Agents

The entire project was agilely managed and implemented by our specialized AI agents.

Jan (AI Developer): Core Logic and Multilingualism

Jan focused on implementing the main logic for URL construction, form state management, and interactive updating. He utilized modern JavaScript and focused on modular code for easy maintenance and scalability. Ensuring multi-language support was critical, which is why he implemented a dynamic translation system.

"During development, I focused on reactive URL updates. Any change in an input field instantly reflects in the live preview, which is crucial for user experience. To support multiple languages, I created a centralized `translations` object, which allows for easy addition of new localizations and their dynamic loading based on user browser settings. This ensures the tool is immediately usable worldwide and extensible for future languages."

Here's an example of how Jan structured the translations and part of the logic:

        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 (AI Designer): User Experience and Interface

Klára designed an intuitive and visually clean user interface. Her goal was to minimize cognitive load and maximize efficiency. She included a clearly visible live URL preview and seamless integration of QR code generation, which extends the tool's usability for print materials or presentations. Responsive design for flawless operation on any device was a given.

Martin (AI QA Engineer): Quality Assurance

Martin meticulously put the entire tool through a series of rigorous tests. He verified the functionality of URL generation for various parameter combinations, tested clipboard copying, the correctness of QR code generation, and responsiveness across different devices and browsers. His diligence ensured flawless operation and high reliability.

Tomáš (AI DevOps Engineer): Deployment and Optimization

Tomáš took care of the efficient and secure deployment of the application to the production server. He optimized performance for fast loading, ensured a reliable infrastructure, and set up robust monitoring tools to track stability and availability. Thanks to his precise work, the tool is always available and runs smoothly.

Live Demo: Try it out for yourself!

We are thrilled to present the fully functional UTM Campaign Link Builder. Experience how easy and quick it is to create trackable links for your marketing campaigns: [Try the demo here!](https://pixeloffice.eu/showcase/demo-webtrh-utm-campaign-link-builder/)

Conclusion: Faster, Smarter Marketing

This project is another shining testament to the capabilities of our AI agents in delivering complex and high-quality web tools in record time. We believe the UTM Campaign Link Builder will become an indispensable aid for optimizing your marketing campaigns and improving analytics.

🏢

Pixel Office

Generate UTM links with ease!

💬 WhatsApp

More articles

Devlog

How Our AI Agents Built the GDPR Cookie & Tracker Consent Scanner in Record Time

Dive with us into the technical details of our new web compliance tool. From requirements analysis to deployment, we'll show you how our AI agents Jan and Klára, supported by Martin and Tomáš, created a fully automated scanner.

Read more →
Devlog

How Our AI Agents Jan and Klára Built a Freelance Project Profit & Rate Estimator in Minutes

For freelancers and small agencies, accurate cost estimation and setting profitable rates are critical. Our new tool, crafted by the Pixel Office AI agent team, addresses this challenge with elegant efficiency. Dive into the technical details of how Jan and Klára designed and programmed this tool from scratch.

Read more →
Devlog

How Our AI Agents Built a Modern Email Signature Designer in Record Time

Discover how our AI developer Jan and designer Klára collaborated to create a powerful, client-side email signature tool with advanced features, all verified by Martin and deployed by Tomáš.

Read more →