Passing jQuery variable to a component or cs element?

Support
#1

Hello,

I’ve created a component (a button) with some parameters. One of these parameters is an input field for an ID and the URL on that button uses this ID to create the link:
https://app.adjust.com/{{dc:param:adjustID}}

Now I also have a little javascript, that checks, if there are some URL parameters at the current document e.g. domain/page?gclid=xxxxx and stores that string including the “?” in a variable named “qS”. At the console it looks all fine but the question is, how do I add the value of the variable to my https://app.adjust.com/{{dc:param:adjustID}}?

I assume that https://app.adjust.com/{{dc:param:adjustID}}{{dc:query:query_var key="sQ"}} is the wrong way, because it didn’t work :smiley:

I also tried to add {{dc:url:param key="gclid"}}, but then I only get what’s after the “=”, so when calling the page with “?gclid=xxxxx” I just get the “xxxxx” but I need the whole string after the “?”, which I stored already using the little javascript, which also checks if there is a “?” and if it contains “gclid” or something else and depending on that adds another string to the variable or leaves it as it is.

Any hint?

best regards
Mirco

#2

Hi Mirco,

Thanks for reaching out.
You should add the parameter like qs={{dc:query:query_var key=“sQ”}}. If it is the first parameter you can add it with ? like the example given below. If it is a second parameter, you need to add it using the &.

https://app.adjust.com/{{dc:param:adjustID}}?qS={{dc:query:query_var key=“sQ”}}

Hope it helps.
Thanks

#3

Hi @tristup

that didn’t work out sadly. Maybe my explanation was bad :slight_smile:

  1. I have a component (a button) and this one has a parameter with the label “AdjustID” (because that ID can change from page to page or even on one page)

  2. the URL called by this button is set to https://app.adjust.com/{{dc:param:adjustID}}

  3. now I want to get the queryString of the current page (if there is one) and therefor I wrote this little script (probably not perfect):

     // Function to get the query string from the URL
 function getQueryString() {
     var qS = window.location.search.substring(1);
     return qS;
 }
 // Get the query string and store it in a variable
 var qS = getQueryString();
 // Check if the query string is not empty and contains specific keys
 if (qS && (qS.includes('gclid') || qS.includes('gbraid') || qS.includes('wbraid'))) {
     // Put a "?" in front of the query string for further use
   	qS = '?' + qS;
   	// Append "&engagement_type=fallback_click" to the stored variable
     qS += '&engagement_type=fallback_click';
 } else if (qS != 0) {
   // in case it's a different substring which does not include the specific keys above
   qS = '?' + qS;
 } else {
   // if there is no substring store nothing
   qS = "";
 }
 // for testing and always shows the expected result
 console.log('Query string:', qS);

  4. If I use https://app.adjust.com/{{dc:param:adjustID)}?qS=… as you suggested I always get a ?qS= at the end of button link but {{dc:query:query_var key=“qS”}} didn’t add the value of the “qS” variable.

I “simply” want to append the qS variable to the of the buttons URL.

I guess it’s not possible (I tried but got a syntax warning), to use something like
{{dc:myVar}} = qS; within the javascript… but it seems like a one-way ticket that let you use {{dc}} in scripts, but to set some as e.g. a custom {{dc}} is not possible.

Any further ideas? :slight_smile:

best regards
Mirco

#4

Hi @tristup

I managed to solve this. At the end it was pretty much straight forward :slight_smile:

First I added a custom attribute to the element (at the component builder): data-url="https://adjust.com/{{dc:param:adjustID)}" and gave it the class name “badge”

And then I changed the javascript to:

jQuery(document).ready(function($) {
        // Function to get the query string from the URL
    function getQueryString() {
        return window.location.search.substring(1);
    }
    // Get the query string and store it in a variable
    var queryString = getQueryString();
    // Check if the query string is not empty and contains specific keys
    if (queryString) {
        // Check if the query string contains specific keys
        if (queryString.includes('gclid') || queryString.includes('gbraid') || queryString.includes('wbraid')) {
            // Append "&engagement_type=fallback_click" to the stored variable
            queryString = '?' + queryString + '&engagement_type=fallback_click';
        } else {
            // Put a "?" in front of the query string for further use
            queryString = '?' + queryString;
        }
    }
    // Append the updated query string to the URL of elements with class "badge"
    $('.badge').each(function() {
        var url = $(this).data('url');
        $(this).attr('href', url + queryString);
    });
});

That way the query string is always added to the badge’s url with the AdjustID as a parameter.

best regards
Mirco

#5

Hello Mirco,

It is good to know that you have managed to resolve your issue. Thank you for sharing your solution. Other users might find it useful for their build as well.

Cheers.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.