{"id":3735,"date":"2025-04-08T11:53:06","date_gmt":"2025-04-08T09:53:06","guid":{"rendered":"https:\/\/trackboxx.com\/?post_type=free-tools&#038;p=3735"},"modified":"2025-12-08T11:59:00","modified_gmt":"2025-12-08T10:59:00","slug":"utm-builder","status":"publish","type":"free-tools","link":"https:\/\/trackboxx.com\/fr\/free-tools\/utm-builder","title":{"rendered":"Constructeur UTM"},"content":{"rendered":"<p class=\"has-text-align-center has-medium-font-size\">Cr\u00e9e ton lien UTM avec notre constructeur de lien UTM gratuit :<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100px\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-utm-builder\">\n<style>\n.wp-utm-builder {\n  max-width: 800px;\n  margin: 20px auto;\n  padding: 20px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n\/* Ausgabe-Feld (nicht wie Eingabe-Feld) *\/\n.wp-utm-builder #generated-link {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #dcdcdc;\n  border-radius: 6px;\n  background: #fafafa;\n  color: #333;\n  min-height: 80px;\n  font-family: monospace;\n  resize: none;\n  cursor: default;\n}\n\n.wp-utm-builder #generated-link:focus {\n  outline: none;\n  border-color: #dcdcdc;\n  box-shadow: none;\n}\n\n\/* Form Layout *\/\n.wp-utm-builder .utm-form {\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n}\n\n.wp-utm-builder .form-row {\n  display: flex;\n  gap: 15px;\n}\n\n.wp-utm-builder .form-group {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n.wp-utm-builder label {\n  margin-bottom: 5px;\n  font-weight: 600;\n  font-size: 14px;\n}\n\n.wp-utm-builder .form-input {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.wp-utm-builder .form-input:focus {\n  border-color: #3858e9;\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(56,88,233,0.2);\n}\n\n\/* Buttons *\/\n.wp-utm-builder .submit-button {\n  background-color: #3858e9;\n  color: white;\n  padding: 12px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n  transition: background-color 0.3s;\n}\n\n.wp-utm-builder .submit-button:hover {\n  background-color: #2c4ac5;\n}\n\n.wp-utm-builder .link-actions {\n  margin-top: 12px;\n  margin-bottom: 30px; \/* <-- NEUER ABSTAND *\/\n  display: flex;\n  gap: 10px;\n}\n\n.wp-utm-builder .action-button {\n  padding: 8px 14px;\n  background-color: #f5f5f5;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  transition: background-color 0.2s;\n}\n\n.wp-utm-builder .action-button:hover {\n  background-color: #e5e5e5;\n}\n\n.wp-utm-builder #copy-status {\n  color: #3858e9;\n  font-size: 13px;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n.wp-utm-builder .warning {\n  color: #d63638;\n  font-size: 13px;\n  margin-top: 5px;\n  display: none;\n}\n<\/style>\n\n<div id=\"utm-builder-container\">\n\n  <h2>G\u00e9n\u00e9rateur de liens UTM<\/h2>\n\n  <div class=\"result-section\">\n    <p><strong>Lien UTM g\u00e9n\u00e9r\u00e9 :<\/strong><\/p>\n    <textarea id=\"generated-link\" readonly><\/textarea>\n\n    <div class=\"link-actions\">\n      <button id=\"copy-button\" class=\"action-button\">Copier<\/button>\n      <button id=\"test-button\" class=\"action-button\">Tester<\/button>\n      <span id=\"copy-status\"><\/span>\n    <\/div>\n  <\/div>\n\n  <form id=\"utm-builder\" class=\"utm-form\" action=\"#\" method=\"post\" data-trp-original-action=\"#\">\n    \n    <div class=\"form-group\">\n      <label for=\"base-url\">URL de base:*<\/label>\n      <input type=\"url\" id=\"base-url\" name=\"base-url\" required placeholder=\"https:\/\/example.com\" class=\"form-input\">\n    <\/div>\n    \n    <div class=\"form-row\">\n      <div class=\"form-group\">\n        <label for=\"utm-source\">UTM Source :<\/label>\n        <input type=\"text\" id=\"utm-source\" name=\"utm-source\" placeholder=\"google, newsletter, social\" class=\"form-input\">\n        <div id=\"source-warning\" class=\"warning\">Veuillez indiquer au moins un param\u00e8tre UTM<\/div>\n      <\/div>\n\n      <div class=\"form-group\">\n        <label for=\"utm-medium\">UTM moyen :<\/label>\n        <input type=\"text\" id=\"utm-medium\" name=\"utm-medium\" placeholder=\"cpc, email, banni\u00e8re\" class=\"form-input\">\n      <\/div>\n    <\/div>\n\n    <div class=\"form-group\">\n      <label for=\"utm-campaign\">Campagne UTM :<\/label>\n      <input type=\"text\" id=\"utm-campaign\" name=\"utm-campaign\" placeholder=\"soldes_d&#039;hiver_2025\" class=\"form-input\">\n    <\/div>\n\n    <div class=\"form-row\">\n      <div class=\"form-group\">\n        <label for=\"utm-term\">UTM Term :<\/label>\n        <input type=\"text\" id=\"utm-term\" name=\"utm-term\" placeholder=\"mots-cl\u00e9s\" class=\"form-input\">\n      <\/div>\n\n      <div class=\"form-group\">\n        <label for=\"utm-content\">Contenu UTM :<\/label>\n        <input type=\"text\" id=\"utm-content\" name=\"utm-content\" placeholder=\"button_cta\" class=\"form-input\">\n      <\/div>\n    <\/div>\n\n    <button type=\"submit\" class=\"submit-button\">G\u00e9n\u00e9rer un lien<\/button>\n  <input type=\"hidden\" name=\"trp-form-language\" value=\"fr\"\/><\/form>\n\n<\/div>\n\n<script>\n(function() {\n\n  const form = document.getElementById('utm-builder');\n  const generatedLink = document.getElementById('generated-link');\n  const copyButton = document.getElementById('copy-button');\n  const testButton = document.getElementById('test-button');\n  const copyStatus = document.getElementById('copy-status');\n  const warningElement = document.getElementById('source-warning');\n\n  form.addEventListener('submit', function(e) {\n    e.preventDefault();\n    generateUTMLink();\n  });\n\n  copyButton.addEventListener('click', function() {\n    if (!generatedLink.value) return;\n    navigator.clipboard.writeText(generatedLink.value);\n    copyStatus.textContent = 'Kopiert!';\n    copyStatus.style.opacity = '1';\n    setTimeout(() => copyStatus.style.opacity = '0', 2000);\n  });\n\n  testButton.addEventListener('click', function() {\n    if (!generatedLink.value) return;\n    window.open(generatedLink.value, '_blank');\n  });\n\n  function generateUTMLink() {\n    const baseUrl = document.getElementById('base-url').value.trim();\n    const source = document.getElementById('utm-source').value.trim();\n    const medium = document.getElementById('utm-medium').value.trim();\n    const campaign = document.getElementById('utm-campaign').value.trim();\n    const term = document.getElementById('utm-term').value.trim();\n    const content = document.getElementById('utm-content').value.trim();\n\n    if (!source && !medium && !campaign && !term && !content) {\n      warningElement.style.display = 'block';\n      generatedLink.value = '';\n      return;\n    } else {\n      warningElement.style.display = 'none';\n    }\n\n    try {\n      let url = new URL(baseUrl.includes(':\/\/') ? baseUrl : `https:\/\/${baseUrl}`);\n      let params = new URLSearchParams(url.search);\n\n      if (source) params.set('utm_source', source);\n      if (medium) params.set('utm_medium', medium);\n      if (campaign) params.set('utm_campaign', campaign);\n      if (term) params.set('utm_term', term);\n      if (content) params.set('utm_content', content);\n\n      url.search = params.toString();\n      generatedLink.value = url.toString();\n\n    } catch (e) {\n      alert('Fehler: Ung\u00fcltige URL \u2013 bitte pr\u00fcfen Sie die Basis-URL');\n    }\n  }\n\n})();\n<\/script>\n<\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100px\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-114b7eb\" data-block-id=\"114b7eb\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-114b7eb-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-c3d48bd\" data-v=\"4\" data-block-id=\"c3d48bd\"><style>@media screen and (min-width: 768px){.stk-c3d48bd {flex:var(--stk-flex-grow, 1) 1 25% !important;}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-c3d48bd-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-c3d48bd-inner-blocks\"><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-0cdc786\" data-v=\"4\" data-block-id=\"0cdc786\"><style>@media screen and (min-width: 768px){.stk-0cdc786 {flex:var(--stk-flex-grow, 1) 1 50% !important;}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-0cdc786-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-0cdc786-inner-blocks\">\n<p class=\"has-text-align-center\">Tu veux en savoir plus sur le suivi UTM ? Consultez notre article g\u00e9n\u00e9ral sur les <a href=\"https:\/\/trackboxx.com\/fr\/utm-tracking-parameter-application\/\" data-type=\"post\" data-id=\"3643\">Guide de suivi UTM<\/a> par<\/p>\n\n\n\n<p class=\"has-text-align-center\">Tu peux obtenir des instructions pour le suivi UTM avec Trackboxx <a href=\"https:\/\/trackboxx.com\/fr\/helpcenter\/utm-tracking\/\" data-type=\"helpcenter\" data-id=\"2150\">dans notre centre d'aide<\/a>. Bien entendu, tu peux aussi tester Trackboxx gratuitement et sans engagement.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-stackable-call-to-action stk-block-call-to-action stk-block stk-e215782 is-style-default\" data-v=\"2\" data-block-id=\"e215782\"><div class=\"stk-block-call-to-action__content stk-content-align stk-e215782-column stk-container stk-e215782-container stk-hover-parent\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-e215782-inner-blocks\">\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-55888e5\" id=\"jetzt-trackboxx-30-tage-kostenlos-testen\" data-block-id=\"55888e5\"><h3 class=\"stk-block-heading__text\">Essayez Trackboxx gratuitement pendant 30 jours<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-ea0d235\" data-block-id=\"ea0d235\"><p class=\"stk-block-text__text translation-block\">Sans indication de donn\u00e9es de paiement ! Sans renouvellement automatique!<br>Ta Trackboxx pr\u00eate \u00e0 d\u00e9marrer en 1 minute.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-button-group stk-block-button-group stk-block stk-0c93f40\" data-block-id=\"0c93f40\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-button-group\">\n<div class=\"wp-block-stackable-button stk-block-button stk-block stk-b564d26\" data-block-id=\"b564d26\"><style>.stk-b564d26 .stk-button{padding-right:40px !important;padding-left:40px !important;background:linear-gradient(135deg,rgb(226,1,119) 0%,rgb(0,92,174) 99%) !important;border-top-left-radius:40px !important;border-top-right-radius:40px !important;border-bottom-right-radius:40px !important;border-bottom-left-radius:40px !important}<\/style><a class=\"stk-link stk-button stk--hover-effect-darken\" href=\"https:\/\/api.trackboxx.com\/free\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"stk-button__inner-text\">Commencer maintenant gratuitement<\/span><\/a><\/div>\n<\/div><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-adccaa8\" data-v=\"4\" data-block-id=\"adccaa8\"><style>@media screen and (min-width: 768px){.stk-adccaa8 {flex:var(--stk-flex-grow, 1) 1 25% !important;}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-adccaa8-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-adccaa8-inner-blocks\"><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"has-text-align-center\"><\/p>\n\n\n\n<p><\/p>","protected":false},"featured_media":0,"template":"","class_list":["post-3735","free-tools","type-free-tools","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/free-tools\/3735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/free-tools"}],"about":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/types\/free-tools"}],"wp:attachment":[{"href":"https:\/\/trackboxx.com\/fr\/wp-json\/wp\/v2\/media?parent=3735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}