<style>
html {
background-color: #d8d8d8;
}
</style>
<div class="background-ash">
<div class="wrapper u-p-y-4">
<div class="row background-ash">
<div class="grid-18 grid-md-12">
<h1 class="supersize">UTM-generator</h1>
<p class="preamble">UTM används för att märka upp våra betalda marknadsföringssatsningar. Det möjliggör att vi ser var trafiken kommer ifrån och var vi presterar bra.</p>
</div>
<div class="grid-18">
<h2>Steg 1: Ange länken du vill tagga</h2>
<div class="field-group u-z-index-foreground u-p-t-1 u-p-b-2">
<label for="URL" class="">URL</label>
<div class="display-flex">
<input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input a-input--large" pattern="https://.*" required>
</div>
</div>
<div class="row u-m-t-2 u-m-b-4">
<div class="grid-18">
<h2>Steg 2: Välj var länken kommer att delas</h2>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/meta-logo.svg" class="m-card__image m-card__media" alt="Meta logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_meta" name="utm_source" value="utm_source_meta" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="metaTarget" aria-controls="metaTarget" aria-expanded="false">
<label for="utm_source_meta" class="u-link-area u-position-static">
Facebook / Instagram
</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/google-ads.svg" class="m-card__image m-card__media" alt="Google Ads logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_google_ads" name="utm_source" value="utm_source_google_ads" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="googleAdsTarget" aria-controls="googleAdsTarget" aria-expanded="false">
<label for="utm_source_google_ads" class="u-link-area u-position-static">Google Ads</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/x.svg" class="m-card__image m-card__media" alt="X logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_x" name="utm_source" value="utm_source_x" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="xTarget" aria-controls="xTarget" aria-expanded="false">
<label for="utm_source_x" class="u-link-area u-position-static">X / Twitter</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/linkedin-logo.svg" class="m-card__image m-card__media" alt="LinkedIn logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_linkedin" name="utm_source" value="utm_source_linkedin" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="linkedinTarget" aria-controls="linkedinTarget" aria-expanded="false">
<label for="utm_source_linkedin" class="u-link-area u-position-static">LinkedIn</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/email.svg" class="m-card__image m-card__media" alt="E-post">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_email" name="utm_source" value="utm_source_email" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="emailTarget" aria-controls="emailTarget" aria-expanded="false">
<label for="utm_source_email" class="u-link-area u-position-static">Nyhetsbrev</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/link.svg" class="m-card__image m-card__media" alt="Link">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_collab" name="utm_source" value="utm_source_collab" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="collabTarget" aria-controls="collabTarget">
<label for="utm_source_collab" class="u-link-area u-position-static">Samarbeten</label>
</div>
</div>
</div>
</div>
</div>
<!-- META -->
<section id="metaTarget" class="u-aria-hidden">
<h1 class="u-m-b-2">Meta</h1>
<h2>Steg 3: Välj vad ambitionen med kampanjen är</h2>
<div class="row">
<div class="grid-18 grid-sm-12 grid-lg-9">
<div class="display-flex flex-column">
<label for="brandMeta">Välj varumärke</label>
<select name="brandMeta" id="brandMeta" class="a-select a-select--full-width">
<option value="" disabled selected>Välj varumärke</option>
<option value="INTS">Internetstiftelsen (INTS)</option>
<option value="INK">Internetkunskap (INK)</option>
<option value="IND">Internetdagarna (IND)</option>
<option value="IMUS">Internetmuseum (IMUS)</option>
<option value="G10">Goto 10 (G10)</option>
<option value="SOI">Svenskarna & internet (SOI)</option>
</select>
<button data-a11y-toggle="editBrandsMetaContainer" aria-controls="editBrandsMetaContainer" aria-expanded="false" type="button" id="editBrandsMeta" data-toggle-text="Redigera varumärken|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera varumärken
</button>
</div>
<div id="editBrandsMetaContainer" aria-hidden="true" class="u-aria-hidden">
<div class="row">
<div class="grid-18">
<div class="display-flex u-m-t-2">
<input type="text" class="a-input u-m-r-1" placeholder="Nytt varumärke">
<input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Varumärke</th>
<th>Värde</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Internetstiftelsen</td>
<td>INTS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetkunskap</td>
<td>INK</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetdagarna</td>
<td>IND</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetmuseum</td>
<td>IMUS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Goto 10</td>
<td>G10</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Svenskarna & internet</td>
<td>SOI</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-12 grid-lg-9">
<div class="display-flex flex-column">
<label for="campaignMeta">Kampanjnamn</label>
<select name="campaignMeta" id="campaignMeta" class="a-select a-select--full-width">
<option value="" disabled selected>Välj kampanjnamn</option>
<option value="INTS">Tänk säkert</option>
<option value="INK">Internetkunskap säkerhetsmånaden</option>
<option value="IND">Internetdagarna 2024</option>
<option value="IMUS">Internetmuseum</option>
<option value="G10">Goto 10</option>
<option value="SOI">Svenskarna & internet 2024</option>
</select>
<button data-a11y-toggle="editCampaignMetaContainer" aria-controls="editCampaignMetaContainer" aria-expanded="false" type="button" id="editCampaignMeta" data-toggle-text="Redigera kampanjer|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera kampanjer
</button>
</div>
<div id="editCampaignMetaContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
<div class="row">
<div class="grid-18">
<div class="display-flex">
<input type="text" class="a-input u-m-r-1" placeholder="Ny kampanj">
<input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Kampanj</th>
<th>Värde</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tänk säkert</td>
<td>INTS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetkunskap säkerhetsmånaden</td>
<td>INK</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetdagarna 2024</td>
<td>IMD</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetmuseum</td>
<td>IMUS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Goto 10</td>
<td>G10</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Svenskarna & internet 2024</td>
<td>SOI</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GOOGLE -->
<section id="googleAdsTarget" class="u-aria-hidden">
<h1 class="u-m-b-2">Google Ads</h1>
<h2>Steg 3: Välj vad ambitionen med kampanjen är</h2>
<div class="row">
<div class="grid-18 grid-sm-12 grid-lg-9">
<div class="display-flex flex-column">
<label for="brandGoogleAds">Välj varumärke</label>
<select name="brandGoogleAds" id="brandGoogleAds" class="a-select a-select--full-width">
<option value="" disabled selected>Välj varumärke</option>
<option value="INTS">Internetstiftelsen</option>
<option value="INK">Internetkunskap</option>
<option value="IND">Internetdagarna</option>
<option value="IMUS">Internetmuseum</option>
<option value="G10">Goto 10</option>
<option value="SOI">Svenskarna & internet</option>
</select>
<button data-a11y-toggle="editBrandGoogleAdsContainer" aria-controls="editBrandGoogleAdsContainer" aria-expanded="false" type="button" id="editBrandGoogleAds" data-toggle-text="Redigera varumärken|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera varumärken
</button>
</div>
<div id="editBrandGoogleAdsContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
<div class="row">
<div class="grid-18">
<div class="display-flex">
<input type="text" class="a-input u-m-r-1" placeholder="Nytt varumärke">
<input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Varumärke</th>
<th>Värde</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Internetstiftelsen</td>
<td>INTS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetkunskap</td>
<td>INK</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetdagarna</td>
<td>IND</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetmuseum</td>
<td>IMUS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Goto 10</td>
<td>G10</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Svenskarna & internet</td>
<td>SOI</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-12 grid-lg-9">
<div class="display-flex flex-column">
<label for="campaignGoogleAds">Kampanjnamn</label>
<select name="campaignGoogleAds" id="campaignGoogleAds" class="a-select a-select--full-width">
<option value="" disabled selected>Välj kampanjnamn</option>
<option value="INTS">Tänk säkert</option>
<option value="INK">Internetkunskap säkerhetsmånaden</option>
<option value="IND">Internetdagarna 2024</option>
<option value="IMUS">Internetmuseum</option>
<option value="G10">Goto 10</option>
<option value="SOI">Svenskarna & internet 2024</option>
</select>
<button data-a11y-toggle="editCampaignGoogleAdsContainer" aria-controls="editCampaignGoogleAdsContainer" aria-expanded="false" type="button" id="editCampaignGoogleAds" data-toggle-text="Redigera kampanjer|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera kampanjer
</button>
</div>
<div id="editCampaignGoogleAdsContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
<div class="row">
<div class="grid-18">
<div class="display-flex">
<input type="text" class="a-input u-m-r-1" placeholder="Ny kampanj">
<input type="text" class="a-input u-m-r-1" placeholder="Värde" style="max-width: 70px;">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Kampanj</th>
<th>Värde</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tänk säkert</td>
<td>INTS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetkunskap säkerhetsmånaden</td>
<td>INK</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetdagarna 2024</td>
<td>IND</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetmuseum</td>
<td>IMUS</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Goto 10</td>
<td>G10</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Svenskarna & internet 2024</td>
<td>SOI</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row u-m-t-4">
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 4: Ange vad kampanjen innehåller</h2>
<label for="campaignContentGoogleAds">Fritext</label>
<input type="text" class="a-input" name="campaignContentGoogleAds" id="campaignContentGoogleAds" placeholder="t.ex. ''INK_ai_artiklar''">
</div>
</div>
</section>
<!-- X -->
<section id="xTarget" class="u-aria-hidden">
<h1 class="u-m-b-2">X / Twitter</h1>
<div class="row">
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 3: Vad är ambitionen med kampanjen?</h2>
<div class="display-flex flex-column">
<label for="contentX">Välj innehåll</label>
<select name="contentX" id="contentX" class="a-select a-select--full-width">
<option value="" disabled selected>Välj innehåll</option>
<option value="kännedom">Kännedom</option>
<option value="trafik">Trafik</option>
<option value="video">Video</option>
<option value="konvertering">Konvertering</option>
</select>
<button data-a11y-toggle="editXContainer" aria-controls="editXContainer" aria-expanded="false" type="button" id="editXContainer" data-toggle-target="editXContainer" data-toggle-text="Redigera ambition|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera ambition
</button>
</div>
<div id="editXContainer" aria-hidden="true" class="u-aria-hidden">
<div class="row">
<div class="grid-18">
<div class="display-flex u-m-t-2">
<input type="text" class="a-input u-m-r-1" placeholder="Ny ambition">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Ambition</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kännedom</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Trafik</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Video</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Konvertering</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 4: Vad handlar innehållet om?</h2>
<label for="campaignContentX">Innehåll</label>
<input type="text" class="a-input" name="campaignContentX" id="campaignContentX" placeholder="t.ex. ''X-kampanj 2024''">
<div class="input-help">
Skriv in samma namn på kampanjen som den är döpt till i X campaign manage
</div>
</div>
</div>
</section>
<!-- LINKEDIN -->
<section id="linkedinTarget" class="u-aria-hidden">
<h1 class="u-m-b-2">LinkedIn</h1>
<div class="row">
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 3: Vad är ambitionen med kampanjen?</h2>
<div class="display-flex flex-column">
<label for="contentLinkedin">Välj innehåll</label>
<select name="contentLinkedin" id="contentLinkedin" class="a-select a-select--full-width">
<option value="" disabled selected>Välj innehåll</option>
<option value="kännedom">Kännedom</option>
<option value="trafik">Trafik</option>
<option value="video">Video</option>
<option value="konvertering">Konvertering</option>
</select>
<button data-a11y-toggle="editLinkedinContainer" aria-controls="editLinkedinContainer" aria-expanded="false" type="button" id="editLinkedinContainer" data-toggle-target="editLinkedinContainer" data-toggle-text="Redigera ambition|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera ambition
</button>
</div>
<div id="editLinkedinContainer" aria-hidden="true" class="u-aria-hidden">
<div class="row">
<div class="grid-18">
<div class="display-flex u-m-t-2">
<input type="text" class="a-input u-m-r-1" placeholder="Ny ambition">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Ambition</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kännedom</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Trafik</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Video</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Konvertering</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 4: Vad handlar innehållet om?</h2>
<label for="campaignContentLinkedIn">Innehåll</label>
<input type="text" class="a-input" name="campaignContentLinkedIn" id="campaignContentLinkedIn" placeholder="t.ex. ''LinkedIn-kampanj 2024''">
<div class="input-help">
Skriv in samma namn på kampanjen som den är döpt till i Linkedin campaign manage
</div>
</div>
</div>
</section>
<!-- EMAIL -->
<section id="emailTarget" class="u-aria-hidden">
<h1 class="u-m-b-2">Nyhetsbrev</h1>
<h2>Steg 3: Välj vilket nyhetsbrev</h2>
<div class="row">
<div class="grid-18 grid-sm-12 grid-lg-9">
<div class="display-flex flex-column">
<label for="brandEmail">Välj nyhetsbrev</label>
<select name="brandEmail" id="brandEmail" class="a-select a-select--full-width">
<option value="" disabled selected>Välj nyhetsbrev</option>
<option value="internetstiftelsens almänna nyhetsbrev">Internetstiftelsens allmänna nyhetsbrev</option>
<option value="digitala lektioners nyhetsbrev">Digitala lektioner</option>
<option value="internetkunskaps nyhetbrev">Internetkunskap</option>
<option value="internetdagarnas kunder">Internetdagarnas kunder</option>
<option value="internetdagarnas intresselista">Internetdagarnas intresselista</option>
<option value="svenskarna och internets intresselista">Svenskarna och internets intresselista</option>
</select>
<button data-a11y-toggle="editEmailsContainer" aria-controls="editEmailsContainer" aria-expanded="false" type="button" id="editEmailsContainer" data-toggle-target="editEmailsContainer" data-toggle-text="Redigera nyhetsbrev|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera nyhetsbrev
</button>
</div>
<div id="editEmailsContainer" aria-hidden="true" class="u-aria-hidden">
<div class="row">
<div class="grid-18">
<div class="display-flex u-m-t-2">
<input type="text" class="a-input u-m-r-1" placeholder="Nytt nyhetsbrev">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Nyhetsbrev</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Internetstiftelsen</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetkunskap</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetdagarna</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetmuseum</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Goto 10</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Svenskarna & internet</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-12 grid-lg-9">
<div class="display-flex flex-column">
<label for="campaignEmail">Kampanjnamn</label>
<select name="campaignEmail" id="campaignEmail" class="a-select a-select--full-width">
<option value="" disabled selected>Välj kampanjnamn</option>
<option value="INTS">Tänk säkert</option>
<option value="INK">Internetkunskap säkerhetsmånaden</option>
<option value="IND">Internetdagarna 2024</option>
<option value="IMUS">Internetmuseum</option>
<option value="G10">Goto 10</option>
<option value="SOI">Svenskarna & internet 2024</option>
</select>
<button data-a11y-toggle="editCampaignEmailContainer" aria-controls="editCampaignEmailContainer" aria-expanded="false" type="button" id="editCampaignEmailContainer" data-toggle-target="editCampaignEmailContainer" data-toggle-text="Redigera kampanjer|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera kampanjer
</button>
</div>
<div id="editCampaignEmailContainer" aria-hidden="true" class="u-aria-hidden u-m-t-2">
<div class="row">
<div class="grid-18">
<div class="display-flex">
<input type="text" class="a-input u-m-r-1" placeholder="Ny kampanj">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Kampanj</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tänk säkert</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetkunskap säkerhetsmånaden</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetdagarna 2024</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Internetmuseum</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Goto 10</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Svenskarna & internet 2024</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row u-m-t-4">
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 4: Vad handlar innehållet om?</h2>
<label for="campaignContentEmail">Innehåll</label>
<input type="text" class="a-input" name="campaignContentEmail" id="campaignContentEmail" placeholder="t.ex. ''Tidigare kunder''">
<div class="input-help">
Beskriv kortfattat målgruppen du skickar mejlet till. T.ex. “Tidigare kunder"
</div>
</div>
</div>
</section>
<!-- COLLABORATION -->
<section id="collabTarget" class="u-aria-hidden">
<h1 class="u-m-b-2">Samarbeten</h1>
<div class="row">
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 3: Vad är ambitionen med kampanjen?</h2>
<div class="display-flex flex-column">
<label for="contentCollab">Välj innehåll</label>
<select name="contentCollab" id="contentCollab" class="a-select a-select--full-width">
<option value="" disabled selected>Välj innehåll</option>
<option value="kännedom">Kännedom</option>
<option value="trafik">Trafik</option>
<option value="video">Video</option>
<option value="konvertering">Konvertering</option>
</select>
<button data-a11y-toggle="editCollabContainer" aria-controls="editCollabContainer" aria-expanded="false" type="button" id="editCollabContainer" data-toggle-target="editCollabContainer" data-toggle-text="Redigera ambition|Dölj" class="a-button--transparent align-self-end u-font-size-medium u-p-x-0 u-align-left u-nowrap" style="max-width: none;">
Redigera ambition
</button>
</div>
<div id="editCollabContainer" aria-hidden="true" class="u-aria-hidden">
<div class="row">
<div class="grid-18">
<div class="display-flex u-m-t-2">
<input type="text" class="a-input u-m-r-1" placeholder="Ny ambition">
<button type="button" class="a-button a-button--icon a-button--jade-light u-flex-shrink-0">
<span class="a-button__text">Lägg till</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="row u-m-t-3">
<div class="grid-18">
<div class="table-container">
<table class="m-table m-table--tight">
<thead>
<tr>
<th>Ambition</th>
<th class="u-align-center" style="width:110px;">Ta bort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kännedom</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Trafik</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Video</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
<tr>
<td>Konvertering</td>
<td class="u-align-center">
<button type="button" class="a-button a-button--standalone-icon">
<span class="a-button__text">Ta bort</span>
<svg class="icon a-button__icon u-icon--medium">
<use xlink:href="#icon-trash"></use>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-12 grid-lg-9">
<h2>Steg 4: Vad handlar innehållet om?</h2>
<label for="campaignContentCollab">Innehåll</label>
<input type="text" class="a-input" name="campaignContentCollab" id="campaignContentCollab" placeholder="t.ex. ''Samarbete 2024''">
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="u-p-y-2 background-concrete">
<div class="wrapper">
<div class="row">
<div class="grid-18">
<div class="field-group u-position-sticky-top-0 u-z-index-foreground u-p-t-1 u-p-b-2">
<label for="URL" class="">Kampanj URL</label>
<div class="display-flex">
<input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input u-m-r-2" pattern="https://.*" required readonly>
<button type="button" class="a-button u-flex-shrink-0">
<span class="a-button__text">Kopiera länk</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
html {
background-color: #d8d8d8;
}
</style>
<div class="background-ash">
<div class="wrapper u-p-y-4">
<div class="row background-ash">
<div class="grid-18 grid-md-12">
<h1 class="supersize">UTM-generator</h1>
<p class="preamble">UTM används för att märka upp våra betalda marknadsföringssatsningar. Det möjliggör att vi ser var trafiken kommer ifrån och var vi presterar bra.</p>
</div>
<div class="grid-18">
<h2>Steg 1: Ange länken du vill tagga</h2>
<div class="field-group u-z-index-foreground u-p-t-1 u-p-b-2">
<label for="URL" class="{{labelClasses}}">URL</label>
<div class="display-flex">
<input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input a-input--large" pattern="https://.*" required>
</div>
</div>
<div class="row u-m-t-2 u-m-b-4">
<div class="grid-18">
<h2>Steg 2: Välj var länken kommer att delas</h2>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/meta-logo.svg" class="m-card__image m-card__media" alt="Meta logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_meta" name="utm_source" value="utm_source_meta" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="metaTarget" aria-controls="metaTarget" aria-expanded="false">
<label for="utm_source_meta" class="u-link-area u-position-static">
Facebook / Instagram
</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/google-ads.svg" class="m-card__image m-card__media" alt="Google Ads logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_google_ads" name="utm_source" value="utm_source_google_ads" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="googleAdsTarget" aria-controls="googleAdsTarget" aria-expanded="false">
<label for="utm_source_google_ads" class="u-link-area u-position-static">Google Ads</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/x.svg" class="m-card__image m-card__media" alt="X logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_x" name="utm_source" value="utm_source_x" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="xTarget" aria-controls="xTarget" aria-expanded="false">
<label for="utm_source_x" class="u-link-area u-position-static">X / Twitter</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/linkedin-logo.svg" class="m-card__image m-card__media" alt="LinkedIn logotype">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_linkedin" name="utm_source" value="utm_source_linkedin" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="linkedinTarget" aria-controls="linkedinTarget" aria-expanded="false">
<label for="utm_source_linkedin" class="u-link-area u-position-static">LinkedIn</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/email.svg" class="m-card__image m-card__media" alt="E-post">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_email" name="utm_source" value="utm_source_email" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="emailTarget" aria-controls="emailTarget" aria-expanded="false">
<label for="utm_source_email" class="u-link-area u-position-static">Nyhetsbrev</label>
</div>
</div>
</div>
</div>
<div class="grid-18 grid-sm-xs-9 grid-md-6 grid-lg-3 u-m-b-2">
<div class="m-card m-card--padded">
<img src="/assets/images/link.svg" class="m-card__image m-card__media" alt="Link">
<div class="m-card__content u-p-x-2 u-p-y-0">
<div class="radio">
<input type="radio" id="utm_source_collab" name="utm_source" value="utm_source_collab" class="a-radio u-visuallyhidden" data-toggle="radio" data-target="collabTarget" aria-controls="collabTarget">
<label for="utm_source_collab" class="u-link-area u-position-static">Samarbeten</label>
</div>
</div>
</div>
</div>
</div>
<!-- META -->
{{render '@utm-generator--meta'}}
<!-- GOOGLE -->
{{render '@utm-generator--google'}}
<!-- X -->
{{render '@utm-generator--x'}}
<!-- LINKEDIN -->
{{render '@utm-generator--linkedin'}}
<!-- EMAIL -->
{{render '@utm-generator--email'}}
<!-- COLLABORATION -->
{{render '@utm-generator--collab'}}
</div>
</div>
</div>
</div>
<div class="u-p-y-2 background-concrete">
<div class="wrapper">
<div class="row">
<div class="grid-18">
<div class="field-group u-position-sticky-top-0 u-z-index-foreground u-p-t-1 u-p-b-2">
<label for="URL" class="{{labelClasses}}">Kampanj URL</label>
<div class="display-flex">
<input type="url" id="URL" placeholder="https://www.exempel.se" autocomplete="off" class="a-input u-m-r-2" pattern="https://.*" required readonly>
<button type="button" class="a-button u-flex-shrink-0">
<span class="a-button__text">Kopiera länk</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined. */
No notes defined.