Script extraction parametre URL

Bonjour,
Ca fait plusieurs jours que j’essaie d’extraire un parametre d’URL pour intégrer la valeur dans un champ caché. L’objectif est de savoir les mots clés de mes campagnes Adwords qui convertissent le plus.

En gros :
1)Un prospect arrive sur ma landing page grâce à une ads qui ciblait « tir bouchon ». J’obtiens : www.monsite.fr/?key=tir+bouchon
2)Tir+bouchon est ensuite attribuer à un champ caché
3)Sur mon auto-répondeur je peux voir dans la colonne ATTRIBUT, l’ensemble des mots clés qui ont permis la conversion des prospects.

Le hic, c’est que je n’arrive pas à extraire le parametre de l’URL en javascript.

J’ai compris qu’il fallait utiliser la fonction
location.search

Mais quand j’essaie de construire un morceau de script cela mène nulle part et ne marche pas.

Le dernier script essayé :

<script>
var searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get("key"))
</script>

Pour voir directement si ça marche, j’essaie de faire apparaitre la valeur avec ce code :
<span id="key">anything</span>

OĂą ai-je fait une erreur dans la construction du script ?

Si l’un d’entre vous sait comment extraire un parametre URL, je suis preneur de conseil car là je bloque.

Merci d’avance !

Hello, ton code est correct. Si tu veux le mettre dans ton span suffit de rajouter un truc du genre

document.getElementById('key').innerHTML = searchParams

Attention qu’il y a un risque de sécurité XSS avec innerHTML.
En effet, tu n’as pas de contrôle sur le contenu du paramètre dans l’url. Un petit malin peut très bien injecter du brol.

Pour du test, ok. Mais ne le laisse surtout pas sur ton site.

Une alternative plus safe est d’utiliser textContent au lieu de innerHTML:

document.getElementById('key').textContent = searchParams

Merci pour vos réponses les gars !
J’ai essayé le script modifié suite à vos conseils et je n’arrive pas à l’insérer dans un champ de formulaire.

Etape 1) Je cherche à récupérer la valeur située après le ?key= dans l’url :
exemple : www.monsite.fr/?key=tir+bouchon

Le script pour extraire la valeur :

<script>
var searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get("key"))
document.getElementById('key').textContent = searchParams
</script>

Etape 2) Je cherche à remplir un champ de mon formulaire avec la valeur extraite via le précédent script

Le code du champ de mon formulaire par défaut :

 <input class="input" maxlength="200" type="text" id="CHAMPCACHE" name="CHAMPCACHE" autocomplete="off" />

Le code du champ du formulaire dont j’ai voulu attribuer la valeur « key » mais qui ne marche pas (cela m’écrit « key » dans le champ et nom « tir+bouchon ».

 <input class="input" maxlength="200" type="text" id="CHAMPCACHE" name="CHAMPCACHE" value="key"/>

Je pense que c’est un soucis attribution de variable sur value=, mais je ne vois pas comment résoudre ce soucis.

Il y a-t-il besoin d’un autre morceau de script ?

Merci Matt et Duke pour l’aide !

Bonsoir clement,

En effet, il y a deux partie dans le script Ă  Ă©crire.
La première partie concerne l’extraction du query parameter (celui de l’url).
La seconde partie concerne la copie de cette valeur dans le champ caché. Et c’est dans cette partie qu’est ton erreur.

Etant donné que c’est un élément de type input text ou input hidden, ce n’est pas l’attribut textContent qu’il faut utiliser mais plutôt l’attribut value.

Voici le code d’une page HTML qui fait le taf:

<html>

<body>

<form>
  <input class="input" type="hidden" id="CHAMPCACHE" name="CHAMPCACHE"  />
  <button onClick="javascript: alert('CHAMPCACHE: ' + this.form.CHAMPCACHE.value);return false;">
    Afficher valeur champcache !
  </button>
</form>

<script>
  // Extract 'key' query parameter value
  var searchParams = new URLSearchParams(window.location.search);
  var keyParam = searchParams.get("key");
  console.log("Key ulr parameter: " + keyParam);
  
  // Set 'key' query parameter value on hidden input field
  document.getElementById('CHAMPCACHE').value = keyParam;
</script>
</body>
</html>

Explications:

Le formulaire définit deux éléments:

  • Le premier est ton champ cachĂ© que tu veux initialiser avec la valeur de ton paramètre dans l’url
  • Le deuxième est un bouton qui va servir dans notre exemple Ă  afficher, dans un dialogue, la valeur du champs cachĂ© lorsque tu clique dessus.

Le script qui fait les deux choses mentionnées plus haut:

  • l’extraction de la valeur du query param ‹ key ›
  • l’initialisation de valeur du champ cachĂ© du formulaire

Pour tester:

  1. tu enregistres ce code dans un fichier que tu appel test.html
  2. Tu ouvres ce fichier avec chrome ou autre
  3. Tu cliques sur le bouton: il va t’afficher une valeur vide pour CHAMPCACHE
  4. Dans la barre d’adresse, tu ajoutes derrière le .html ?key=tir-pigeons et ensuite enter pour recharger la page
  5. Tu cliques sur le bouton: il va t’afficher tir-pigeons comme valeur de CHAMPCACHE

Si tu as des questions, n’hésites pas.

Enjoy !
Duke

1 000 000 000 de merci Duke ! Je viens de l’implémenter sur mon formulaire et sa marche du tonnerre !

Niveau fiabilité du suivi des ventes, ça sera bien plus précis que google tag qui n’est précis qu’a ~80% dans mon cas.

Pour ceux qui veulent faire des campagnes google ads avec un autorépondeur et sans passer par des logiciels extra-cher pour avoir un suivi des conversions super précis.

Etape 1 : Dans google ads, pour connaitre précisément quels mots clés capturent des leads/faient des ventes.
Aller dans toutes les campagnes>Paramètre>Parametre du compte>Suivi> et dans modèle de suivi mettre :
{lpurl}?key={keyword}

Là c’est pour tracker les Keywords, si vous voulez tracker autre chose (mobile/desktop/ect…) au lieu de {Keyword} il faut mettre d’autre variable {device},etc… Plus de variables ici : Set up tracking with ValueTrack parameters - Google Ads Help

C’est possible de régler les paramètres de suivi par campagne, ou plus précisément par groupe d’annonce/annonce. Mais pour l’exemple et la simplicité, je montre sur le compte entier.

Etape 2 : Implémenter le code de Duke sur son formulaire

Etape 3 : Bien regler son autorépondeur (avec ou sans Zapier) pour classer les clients + prospects. Ca permet d’avoir en un coup d’oeil les Keywords qui font les leads et les Keywords qui font les clients.

Encore Merci !

1 « J'aime »

Avec plaisirs @cle.ment .

đź”´ La "SCIENCE" pour DEVENIR RICHE sur INTERNET ? - TUGAN BARA

đź”´ Business 2 Pigeons (B2P), Abondance Quantique, Copywriting et Moral (+ deux analyses de funnels)

🔴 Crypto démolition - analyse de 2 copywritings crypto - TUGAN BARA