https://extension.software/_nuxt/BLC_ysGK.js

1import{g as C,b as L}from"./C3KC9frT.js";import{u as R,_ as M}from"./CKdkg7oj.js";import{e as V,k as B,w as k,i as s,o as r,a as e,d as o,c as l,F as g,l as h,t as i,m as _,p as A,v as f,x as F,b as N,r as W,y as D,q as x}from"./I2I7NLUp.js";import{u as P}from"./CYDweJtd.js";import"./Cf7OoEKi.js";const S={class:"grid gap-4"},E={class:"block"},K={class:"grid gap-4 sm:grid-cols-2"},O={class:"mb-1.5 block text-sm font-semibold text-ink"},$={key:0,class:"text-red-hot"},j={class:"ml-1 text-[11px] font-normal text-ink/45"},z=["onUpdate:modelValue","placeholder"],G={key:0,class:"rounded-btn bg-bg-grey p-4"},I={class:"break-all text-[15px] font-medium text-ink"},H={key:1,class:"text-center text-sm text-ink/45"},te=V({__name:"utm-builder",setup(J){const b=C("utm-builder"),y=[{q:"What are UTM parameters?",a:"UTM parameters are tags added to a URL (utm_source, utm_medium, utm_campaign, utm_term, utm_content) that tell analytics tools where your traffic came from and which campaign drove it."},{q:"Which UTM parameters are required?",a:"utm_source, utm_medium and utm_campaign are the three you should always set. utm_term and utm_content are optional and mainly used for paid search keywords and A/B testing."},{q:"Does the order or casing of UTMs matter?",a:"Order does not matter, but values are case-sensitive in most analytics tools — “Facebook” and “facebook” are counted separately. Pick a lowercase convention and stick to it."}];R(b,y);const{copy:v,copiedKey:w}=P(),m=W(""),a=D({source:"",medium:"",campaign:"",term:"",content:""}),U=[{key:"source",label:"Campaign source",param:"utm_source",placeholder:"google, newsletter, facebook",required:!0},{key:"medium",label:"Campaign medium",param:"utm_medium",placeholder:"cpc, email, social",required:!0},{key:"campaign",label:"Campaign name",param:"utm_campaign",placeholder:"spring_sale",required:!0},{key:"term",label:"Campaign term",param:"utm_term",placeholder:"running+shoes",required:!1},{key:"content",label:"Campaign content",param:"utm_content",placeholder:"logolink, textlink",required:!1}],d=x(()=>{const u=m.value.trim();if(!u)return"";let t;try{t=new URL(u)}catch{try{t=new URL("https://"+u)}catch{return""}}const p={utm_source:a.source,utm_medium:a.medium,utm_campaign:a.campaign,utm_term:a.term,utm_content:a.content};for(const[c,n]of Object.entries(p))n.trim()?t.searchParams.set(c,n.trim()):t.searchParams.delete(c);return t.toString()}),T=x(()=>d.value&&a.source.trim()&&a.medium.trim()&&a.campaign.trim());return(u,t)=>{const p=L,c=M;return r(),B(c,{tool:s(b)},{tool:k(()=>[e("div",S,[e("label",E,[t[2]||(t[2]=e("span",{class:"mb-1.5 block text-sm font-semibold text-ink"},[o("Website URL "),e("span",{class:"text-red-hot"},"*")],-1)),_(e("input",{"onUpdate:modelValue":t[0]||(t[0]=n=>A(m)?m.value=n:null),inputmode:"url",placeholder:"https://example.com/landing",class:"w-full rounded-btn border border-ink/15 bg-bg-grey px-4 py-3 text-[15px] outline-none transition focus:border-magenta focus:bg-white"},null,512),[[f,s(m)]])]),e("div",K,[(r(),l(g,null,h(U,n=>e("label",{key:n.key,class:"block"},[e("span",O,[o(i(n.label)+" ",1),n.required?(r(),l("span",$,"*")):F("",!0),e("code",j,i(n.param),1)]),_(e("input",{"onUpdate:modelValue":q=>s(a)[n.key]=q,placeholder:n.placeholder,class:"w-full rounded-btn border border-ink/15 bg-bg-grey px-4 py-2.5 text-[15px] outline-none transition focus:border-magenta focus:bg-white"},null,8,z),[[f,s(a)[n.key]]])])),64))]),s(T)?(r(),l("div",G,[t[3]||(t[3]=e("p",{class:"mb-2 text-[12px] font-semibold uppercase tracking-wide text-ink/50"},"Tracking URL",-1)),e("p",I,i(s(d)),1),e("button",{type:"button",class:"mt-4 inline-flex items-center gap-1.5 rounded-btn-sm bg-ink px-4 py-2 text-sm font-semibold text-white transition hover:bg-ink/85",onClick:t[1]||(t[1]=n=>s(v)(s(d),"url"))},[N(p,{name:"copy",size:15}),o(" "+i(s(w)==="url"?"Copied!":"Copy URL"),1)])])):(r(),l("p",H," Enter a URL plus source, medium and campaign to build your link. "))])]),default:k(()=>[t[4]||(t[4]=e("h2",null,"UTM campaign URL builder",-1)),t[5]||(t[5]=e("p",null,[o(" This free "),e("strong",null,"UTM builder"),o(" adds campaign tracking parameters to any link so you can see exactly which channels and campaigns drive traffic and conversions in Google Analytics (or any analytics tool). Fill in the fields, copy the URL, and use it in your ads, emails and social posts. ")],-1)),t[6]||(t[6]=e("h2",null,"What each UTM parameter means",-1)),t[7]||

1(t[7]=e("ul",null,[e("li",null,[e("strong",null,"utm_source"),o(" — where the traffic comes from (e.g. "),e("code",null,"google"),o(", "),e("code",null,"newsletter"),o(").")]),e("li",null,[e("strong",null,"utm_medium"),o(" — the marketing channel (e.g. "),e("code",null,"cpc"),o(", "),e("code",null,"email"),o(", "),e("code",null,"social"),o(").")]),e("li",null,[e("strong",null,"utm_campaign"),o(" — the specific campaign or promotion (e.g. "),e("code",null,"spring_sale"),o(").")]),e("li",null,[e("strong",null,"utm_term"),o(" — paid keyword, for search campaigns.")]),e("li",null,[e("strong",null,"utm_content"),o(" — distinguishes versions of an ad or link for A/B testing.")])],-1)),t[8]||(t[8]=e("h2",null,"UTM best practices",-1)),t[9]||(t[9]=e("p",null," Keep values lowercase and consistent, use underscores or hyphens instead of spaces, and avoid tagging internal links. A simple naming convention saves you from messy, duplicated rows in your reports later. ",-1)),t[10]||(t[10]=e("h2",null,"Frequently asked questions",-1)),(r(),l(g,null,h(y,n=>(r(),l(g,{key:n.q},[e("h3",null,i(n.q),1),e("p",null,i(n.a),1)],64))),64))]),_:1},8,["tool"])}}});export{te as default};