Skip to content

UTM URL Builder Salesforce Lightning Web Component (LWC)

This Lightning Web Component (LWC) provides a seamless UTM builder functionality, enabling users to effortlessly generate UTM parameters for their marketing links. UTM, which stands for Urchin Tracking Module, is a set of query parameters added to URLs for tracking the effectiveness of online marketing campaigns.

Here are the main UTM parameters and their meanings:

  1. utm_source: The source of the traffic, such as a search engine, newsletter, or social media platform.
  2. utm_medium: The medium or type of traffic, such as organic search, email, or social.
  3. utm_campaign: The name of the specific marketing campaign or promotion.
  4. utm_term: Used for tracking keywords in paid search campaigns.
  5. utm_content: Used to differentiate different pieces of content or ads within the same campaign.

LWC Name: utmBuilder

<template>
    <lightning-card title="UTM URL Builder" icon-name="standard:link">
        <div class="slds-var-m-around_medium">
            
            <lightning-input label="Website URL" name="url" value={url} onchange={handleInputChange} placeholder="https://www.example.com"></lightning-input>
            <lightning-input label="UTM Campaign" name="campaignId" value={campaignId} onchange={handleInputChange} placeholder="e.g. promotion, sale, etc."></lightning-input>
            <lightning-input label="UTM Source" name="campaignSource" value={campaignSource} onchange={handleInputChange} placeholder="e.g. newsletter, twitter, google, etc."></lightning-input>
            <lightning-input label="UTM Medium" name="campaignMedium" value={campaignMedium} onchange={handleInputChange} placeholder="e.g. email, social, cpc, etc."></lightning-input>
            <lightning-input label="UTM Term" name="campaignTerm" value={campaignTerm} onchange={handleInputChange} placeholder="Keywords for your paid search campaigns"></lightning-input>
            <lightning-input label="UTM Content" name="campaignContent" value={campaignContent} onchange={handleInputChange} placeholder="Any call-to-action or headline, e.g. buy-now."></lightning-input>
            
            <br/>
            <textarea class="utm-url" readonly>{utmUrl}</textarea>

            <p class="slds-var-m-vertical_small">
                <lightning-button label="Copy to Clipboard" onclick={copyToClipboard} icon-name="utility:copy_to_clipboard" class="slds-m-right_medium"></lightning-button>
                <lightning-button label="Clear" onclick={clearValues} icon-name="utility:refresh"></lightning-button>
            </p>
            <br/>
            <div class="slds-text-longform">
                <h3 class="slds-text-heading_small">Information about UTM parameters.</h3>
                <ul>
                    <li><b>UTM Campaign:</b> The name of the specific marketing campaign or promotion.</li>
                    <li><b>UTM Source:</b> The source of the traffic, such as a search engine, newsletter, or social media platform.</li>
                    <li><b>UTM Medium:</b> The medium or type of traffic, such as organic search, email, or social.</li>
                    <li><b>UTM Term:</b> Used for tracking keywords in paid search campaigns.<br/></li>
                    <li><b>UTM Content:</b> Used to differentiate different pieces of content or ads within the same campaign.<br/></li>
                </ul>
            </div>
            
        </div>
    </lightning-card>
</template>
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class UtmBuilder extends LightningElement {
    url = '';
    campaignId = '';
    campaignSource = '';
    campaignMedium = '';
    campaignTerm = '';
    campaignContent = '';
    utmUrl = '';

    handleInputChange(event) {
        
        console.log(event.target.value);
        if(event.target.name == 'url'){
            this.url = event.target.value;
        }else if(event.target.name == 'campaignId'){
            this.campaignId = event.target.value;
        }else if(event.target.name == 'campaignSource'){
            this.campaignSource = event.target.value;
        }else if(event.target.name == 'campaignMedium'){
            this.campaignMedium = event.target.value;
        }else if(event.target.name == 'campaignTerm'){
            this.campaignTerm = event.target.value;
        }else if(event.target.name == 'campaignContent'){
            this.campaignContent = event.target.value;
        }
        this.generateUTMUrl();
    }

    generateUTMUrl() {
        this.utmUrl = '';

        if(this.url){
            
            this.utmUrl = this.url;
            if(this.campaignId){
                this.utmUrl = `${this.utmUrl}?utm_campaign=${this.campaignId}`;
            }
            if(this.campaignSource){
                if(this.utmUrl.includes('?')){
                    this.utmUrl = `${this.utmUrl}&utm_source=${this.campaignSource}`;
                }else{
                    this.utmUrl = `${this.utmUrl}?utm_source=${this.campaignSource}`;
                }
            }
            if(this.campaignMedium){
                if(this.utmUrl.includes('?')){
                    this.utmUrl = `${this.utmUrl}&utm_medium=${this.campaignMedium}`;
                }else{
                    this.utmUrl = `${this.utmUrl}?utm_medium=${this.campaignMedium}`;
                }
            }
            if(this.campaignTerm){
                if(this.utmUrl.includes('?')){
                    this.utmUrl = `${this.utmUrl}&utm_term=${this.campaignTerm}`;
                }else{
                    this.utmUrl = `${this.utmUrl}?utm_term=${this.campaignTerm}`;
                }
            }
            if(this.campaignContent){
                if(this.utmUrl.includes('?')){
                    this.utmUrl = `${this.utmUrl}&utm_content=${this.campaignContent}`;
                }else{
                    this.utmUrl = `${this.utmUrl}?utm_content=${this.campaignContent}`;
                }
            }
            
        }
    }

    clearValues(){
        this.url = '';
        this.campaignId = '';
        this.campaignSource = '';
        this.campaignMedium = '';
        this.campaignTerm = '';
        this.campaignContent = '';
        this.utmUrl = '';
    }

    copyToClipboard() {
        const textarea = this.template.querySelector('.utm-url');
        textarea.select();
        document.execCommand('copy');

        const event = new ShowToastEvent({
            title: 'Success!',
            message: 'UTM URL copied to clipboard!',
            variant: 'success'
        });
        this.dispatchEvent(event);
    }
}
.utm-url {
    width: 100%;
    height: 100px;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>UTM URL Builder</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Demo