mirror of
https://github.com/CorentinTh/it-tools.git
synced 2024-09-11 13:37:53 +03:00
Merge 9d3337ff60
into e876d03608
This commit is contained in:
commit
111a66d820
@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
|
|||||||
|
|
||||||
import { tool as textToUnicode } from './text-to-unicode';
|
import { tool as textToUnicode } from './text-to-unicode';
|
||||||
import { tool as safelinkDecoder } from './safelink-decoder';
|
import { tool as safelinkDecoder } from './safelink-decoder';
|
||||||
|
import { tool as utmUrlGenerator } from './utm-url-generator';
|
||||||
import { tool as pdfSignatureChecker } from './pdf-signature-checker';
|
import { tool as pdfSignatureChecker } from './pdf-signature-checker';
|
||||||
import { tool as numeronymGenerator } from './numeronym-generator';
|
import { tool as numeronymGenerator } from './numeronym-generator';
|
||||||
import { tool as macAddressGenerator } from './mac-address-generator';
|
import { tool as macAddressGenerator } from './mac-address-generator';
|
||||||
@ -115,6 +116,7 @@ export const toolsByCategory: ToolCategory[] = [
|
|||||||
urlEncoder,
|
urlEncoder,
|
||||||
htmlEntities,
|
htmlEntities,
|
||||||
urlParser,
|
urlParser,
|
||||||
|
utmUrlGenerator,
|
||||||
deviceInformation,
|
deviceInformation,
|
||||||
basicAuthGenerator,
|
basicAuthGenerator,
|
||||||
metaTagGenerator,
|
metaTagGenerator,
|
||||||
|
12
src/tools/utm-url-generator/index.ts
Normal file
12
src/tools/utm-url-generator/index.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { Ad } from '@vicons/tabler';
|
||||||
|
import { defineTool } from '../tool';
|
||||||
|
|
||||||
|
export const tool = defineTool({
|
||||||
|
name: 'UTM Url Generator',
|
||||||
|
path: '/utm-url-generator',
|
||||||
|
description: 'Generate an URL with utm_ parameters',
|
||||||
|
keywords: ['utm', 'url', 'generator'],
|
||||||
|
component: () => import('./utm-url-generator.vue'),
|
||||||
|
icon: Ad,
|
||||||
|
createdAt: new Date('2024-03-15'),
|
||||||
|
});
|
147
src/tools/utm-url-generator/utm-url-generator.vue
Normal file
147
src/tools/utm-url-generator/utm-url-generator.vue
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useCopy } from '@/composable/copy';
|
||||||
|
import { useValidation } from '@/composable/validation';
|
||||||
|
|
||||||
|
const url = useStorage('utm-generator:url', '');
|
||||||
|
const utmSource = useStorage('utm-generator:source', '');
|
||||||
|
const utmMedium = useStorage('utm-generator:medium', '');
|
||||||
|
const utmCampaign = useStorage('utm-generator:campaign', '');
|
||||||
|
const utmContent = useStorage('utm-generator:content', '');
|
||||||
|
const utmTerm = useStorage('utm-generator:term', '');
|
||||||
|
const utmifiedUrl = computed(() => {
|
||||||
|
try {
|
||||||
|
const utmUrl = new URL(url.value);
|
||||||
|
utmUrl.searchParams.set('utm_source', utmSource.value);
|
||||||
|
utmUrl.searchParams.set('utm_medium', utmMedium.value);
|
||||||
|
utmUrl.searchParams.set('utm_campaign', utmCampaign.value);
|
||||||
|
if (utmContent.value) {
|
||||||
|
utmUrl.searchParams.set('utm_content', utmContent.value);
|
||||||
|
}
|
||||||
|
if (utmContent.value) {
|
||||||
|
utmUrl.searchParams.set('utm_term', utmTerm.value);
|
||||||
|
}
|
||||||
|
return utmUrl.href;
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
return '# invalid inputs';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const urlValidation = useValidation({
|
||||||
|
source: url,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
message: 'Invalid url string',
|
||||||
|
validator: (value) => {
|
||||||
|
try {
|
||||||
|
const _ = (new URL(value));
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const utmMediumValidation = useValidation({
|
||||||
|
source: utmMedium,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
message: 'UTM Medium is required',
|
||||||
|
validator: value => value !== '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const utmSourceValidation = useValidation({
|
||||||
|
source: utmSource,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
message: 'UTM Source is required',
|
||||||
|
validator: value => value !== '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const utmCampaignValidation = useValidation({
|
||||||
|
source: utmCampaign,
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
message: 'UTM Campaign is required',
|
||||||
|
validator: value => value !== '',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
const { copy } = useCopy({ source: utmifiedUrl, text: 'UTMified url copied.' });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-p>
|
||||||
|
For more info about UTM, see <n-a href="https://en.wikipedia.org/wiki/UTM_parameters" target="_blank" rel="noopener noreferrer">
|
||||||
|
UTM Parameters
|
||||||
|
</n-a>
|
||||||
|
</n-p>
|
||||||
|
|
||||||
|
<c-input-text
|
||||||
|
v-model:value="url"
|
||||||
|
label="Website url"
|
||||||
|
placeholder="Put your website url here..."
|
||||||
|
clearable
|
||||||
|
mb-2
|
||||||
|
:validation="urlValidation"
|
||||||
|
/>
|
||||||
|
<c-input-text
|
||||||
|
v-model:value="utmSource"
|
||||||
|
label="UTM Source (Identifies which site sent the traffic)"
|
||||||
|
placeholder="Put your UTM Source here..."
|
||||||
|
clearable
|
||||||
|
mb-2
|
||||||
|
:validation="utmSourceValidation"
|
||||||
|
/>
|
||||||
|
<c-input-text
|
||||||
|
v-model:value="utmMedium"
|
||||||
|
label="UTM Medium (Identifies what type of link was used)"
|
||||||
|
placeholder="Put your UTM Medium here..."
|
||||||
|
clearable
|
||||||
|
mb-2
|
||||||
|
:validation="utmMediumValidation"
|
||||||
|
/>
|
||||||
|
<c-input-text
|
||||||
|
v-model:value="utmCampaign"
|
||||||
|
label="UTM Campaign (Identifies a specific product promotion or strategic campaign)"
|
||||||
|
placeholder="Put your UTM Campaign here..."
|
||||||
|
clearable
|
||||||
|
mb-2
|
||||||
|
:validation="utmCampaignValidation"
|
||||||
|
/>
|
||||||
|
<c-input-text
|
||||||
|
v-model:value="utmContent"
|
||||||
|
label="UTM Content (Identifies search terms)"
|
||||||
|
placeholder="Put your UTM Content here..."
|
||||||
|
clearable
|
||||||
|
mb-2
|
||||||
|
/>
|
||||||
|
<c-input-text
|
||||||
|
v-model:value="utmTerm"
|
||||||
|
label="UTM Term (Identifies what specifically was clicked to bring the user to the site)"
|
||||||
|
placeholder="Put your UTM Term here..."
|
||||||
|
clearable
|
||||||
|
mb-2
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div v-if="utmifiedUrl">
|
||||||
|
<div mb-2>
|
||||||
|
Your url with UTM parameters added
|
||||||
|
</div>
|
||||||
|
<c-card>
|
||||||
|
{{ utmifiedUrl }}
|
||||||
|
</c-card>
|
||||||
|
|
||||||
|
<div mt-3 flex justify-center>
|
||||||
|
<c-button autofocus @click="copy()">
|
||||||
|
Copy url
|
||||||
|
</c-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
Loading…
Reference in New Issue
Block a user