<section class="margin-top-xs-55" style="position: relative;
">
	<div class="header-text mb-0">
		<div>
			<div class="row ">
				<div class="col-lg-12 col-md-12 col-sm-12 text-center">
					<svg style="width:100%;height: 450px;" viewBox="0 0 1280 679" preserveAspectRatio="none" width="100%" height="100%">
						<defs>
							<g id="shape">
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="#D9D9D9"></path>
								<path d="M0 0H1280V544.882C1280 544.882 1115 679 640 679C165 679 0 544.882 0 544.882V0Z" fill="url(#gradient)"></path>
							</g>
							<radialGradient id="gradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(640 -261.197) rotate(90) scale(815.683 664.92)">
								<stop stop-color="#4169E1"></stop>
								<stop offset="1" stop-color="#071A34"></stop>
							</radialGradient>
						</defs>
						<use href="#shape"></use>
					</svg>
					<div class="frame-image">
						<div style="position: absolute; border-radius: inherit; inset: 0px;" data-framer-background-image-wrapper="true"><img decoding="async" sizes="100vw" src="<?php echo base_url(); ?>assets/lSHGuRrPALnsNPFyY1JslN8so.png" alt="" style="display: block; width: 100%; height: 100%; border-radius: inherit; object-position: center center; object-fit: cover;"></div>
					</div>
					<div class="text-body main-header-text">
						<h1 class="text-center text-white"><b>UTM Builder</b></h1>
						<h4 class="text-center text-white">UTM builder is used to generate tracking code to address campaign performance with Google Analytics or other similar analytic platforms such as Kissmetrics and Mixpanel.<br />For generating UTM code, you need to insert one or more URLs in the “Enter your URLs” field, fill in all the required parameters, and then tap on the “Generate UTM URLs” button. You can use all the required parameters to multiple URLs in a single click.</h4>
					</div>
				</div>

				<div class="floating-icons">
					<i class="icon-facebook"></i>
					<i class="icon-adwords"></i>
					<i class="icon-seo"></i>
					<i class="icon-instagram"></i>
					<i class="icon-activecampaign"></i>
					<i class="icon-wordpress"></i>
					<i class="icon-shopify"></i>
					<i class="icon-youtube"></i>
					<i class="icon-analytics"></i>
					<i class="icon-kk"></i>
				</div>
			</div>
		</div>
	</div>
</section>
<section class="sptb">
	<div class="container">
		<div class="row">


			<div class="col-md-12">
				<div class="card border-0 shadow-none bg-transparent">
					<div class="row justify-content-center">

						<div class="col-lg-8 col-xl-8 col-md-12 mx-auto mt-5">
							<div class="card mb-0 single-page customerpage contact">
								<div class="card-body wrapper wrapper2 box-shadow-0" style="border :2px dotted #be1502">
									<div class="name">
										<label>*Enter your URLs</label>
										<textarea id="urls" placeholder="Enter your URLs (One URL per line)"></textarea>
									</div>
									<div class="name mt-5">
										<label>*Campaign Name</label>
										<input type="text" id="utm_campaign" placeholder="eg. christmas_sale" class="parameters">
									</div>
									<div class="name mt-5">
										<label>*Campaign Source</label>
										<input type="text" id="utm_source" placeholder="eg. facebook, google" class="parameters">
									</div>
									<div class="name mt-5">
										<label>*Campaign Medium</label>
										<input type="text" id="utm_medium" placeholder="eg. banner, email" class="parameters">
									</div>
									<div class="name mt-5">
										<label>Campaign Term</label>
										<input type="text" id="utm_term" placeholder="(optional) - eg. paid keywords" class="parameters">
									</div>
									<div class="name mt-5">
										<label>Campaign Content</label>
										<input type="text" id="campaign_content" placeholder="(optional)" class="parameters">
									</div>

									<div class="name mt-5">
										<button class="btn btn-secondary" id="submit_data">Generate UTM Url</button>
										<button style="float:right" class="btn text-white" id="reset_data">Reset</button>
									</div>

									<div class="name mt-5">
										<label>Copy your UTM URLs from here</label>
										<textarea rows="10" cols="8" class="form-control descriptionchar description" name="description" id="utm_urls" placeholder="" readonly="true"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!--Section-->
<script type="text/javascript">
	$('#submit_data').click(function() {
		$("#utm_urls").empty();
		var urls = $("#urls").val().trim().split('\n');
		var utm_source = encodeURI($("#utm_source").val());
		var utm_medium = encodeURI($("#utm_medium").val());
		var utm_campaign = encodeURI($("#utm_campaign").val());
		var utm_term = encodeURI($("#utm_term").val());
		var campaign_content = encodeURI($("#campaign_content").val());
		if (!validURL(urls)) {
			alert("please Enter Valid Url");
			return false;
		}
		if (utm_campaign == '') {
			alert("please Enter Campaign Name");
			return false;
		}
		if (utm_source == '') {
			alert("please Enter Campaign Source");
			return false;
		}
		if (utm_medium == '') {
			alert("please Enter Campaign Medium");
			return false;
		}
		var m_utm_source = "";
		var m_utm_medium = "";
		var m_utm_campaign = "";
		var m_utm_term = "";
		var m_campaign_content = "";

		if (utm_source != "") {
			var m_utm_source = "?utm_source=" + utm_source;
		}

		if (utm_medium != "") {
			var m_utm_medium = "&utm_medium=" + utm_medium;
		}

		if (utm_campaign != "") {
			var m_utm_campaign = "&utm_campaign=" + utm_campaign;
		}

		if (utm_term != "") {
			var m_utm_term = "&utm_term=" + utm_term;
		}

		if (campaign_content != "") {
			var m_campaign_content = "&campaign_content=" + campaign_content;
		}

		if (urls != "" && utm_source != "" && utm_medium != "" && utm_campaign != "") {
			$.each(urls, function(index, value) {
				$("#utm_urls").append(value + m_utm_source + m_utm_medium + m_utm_campaign + m_utm_term + m_campaign_content + "\n");
			});
		}
	});

	$('#reset_data').click(function() {
		$('#urls, #utm_source, #utm_urls, #utm_medium, #utm_term, #utm_campaign, #campaign_content').val('');
	});

	function validURL(str) {
		var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
			'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
			'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
			'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
			'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
		return !!pattern.test(str);
	}
</script>