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:
- utm_source: The source of the traffic, such as a search engine, newsletter, or social media platform.
- utm_medium: The medium or type of traffic, such as organic search, email, or social.
- utm_campaign: The name of the specific marketing campaign or promotion.
- utm_term: Used for tracking keywords in paid search campaigns.
- 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