Enter variable into URL

JavaScript
1

My client is using an ad tracking script in his shopping cart, so I need to put a variable into a string and send it off to the tracker. The variable is provided by the shopping cart via javascript, and I’m not sure how to put that into the string.

This is what I came up with, but I have no way of knowing if it works because I can’t actually see the output.

<html>
<head>
<script>
    function orderNum() {
        document.write(ss_ordernum); // cart provided variable
    }
</script>

<script src="https://tags.mediaforge.com/js/xxx/?orderNumber=javascript:orderNum();">

</head>
2

No that wouldn’t work. Which ad tracking script is being used there?

3

Sorry for the delay, I didn’t receive notification you’d posted!

it’s MediaForge.

4

One way to do it is to use JavaScript to create a new script tag, so that you can use the order number in the src attribute of the script tag, but that then means that situations without scripting support won’t see the ad.

The best way that I know of to handle this is to pass the order number to a PHP script so that the PHP script can generate the page (and/or just the script tag) with that order number in the ad-tracking part. That way when JavaScript is supported, you can make an ajax request to the PHP script for that same script reference and add it to the existing page as well.

So the two different streams are:

Shopping cart -> PHP script (which includes generateAdScriptLink.php) -> HTML page with order number
or
Shopping cart -> Ajax request for generateAdScriptLink.php -> insert/replace the requested content in to the page

Which would be something like the following example:


<form id="shoppingCart" method="post" action="handleShoppingCartOrder.php">
    <input name="ordernumber">
    ...
</form>

handleShoppingCartOrder.php


<?php
ob_start();
include 'generateAdScript.php'; // echos the output, so it can be used by ajax as well
$adScriptLink = ob_get_clean();

$adScript = '';
if (!empty($adScripLink)) {
    $adScript = '<script src="' . $adScriptLink . '"></script>';
}

echo <<< EOT
<html>
    <head>
        ...
        $adScript
    </head>
    ...
</html>

EOT;
?>

generateAdScript.php


<?php
$orderNumber = filter_input(INPUT_POST, 'ordernumber', FILTER_SANITIZE_NUMBER_INT);
if ($orderNumber > 0) {
    echo 'https://tags.mediaforge.com/js/xxx/?orderNumber=' . $orderNumber;
}
?>



var shoppingCart = document.getElementById('shoppingCart');
shoppingCart.onsubmit = function () {
    // use ajax techniques to submit this.elements.ordernumber to generateAdScript.php and use the parseResponse function to process the result
    return false; // prevent form from automatically submitting
};

function parseResponse(request) {
    // check if a valid Ajax response
    // ...

    // and then
    addScriptLinkToHead(request);
}

function addScriptLinkToHead(link) {
    var head = document.head,
        adScriptLink = request,
        scriptTag = document.createElement('script')
        oldScriptTag = document.getElementById('generatedScriptTag');
    scriptTag.src = adScriptLink;
    scriptTag.id = 'generatedScriptTag';
    
    // remove old script tag if necessary
    if (oldScriptTag) {
        oldScriptTag.parentNode.removeChild(oldScriptTag);
    }

    // add script tag
    head.appendChild(scriptTag);
}

The above code has been written from off the top of my head, and is completely untested so don’t expect any of it to work.
Given that though, the way that the code is structured is the sort of thing that I’m talking about.

5

Thank you! That’s a good idea. The bad thing about this cart is that only HTML and javaScript can be used in this section, so AJAX would be a nice solution. I don’t see in your example the javascript variable (ss_ordernum) which is how the cart returns the order number. How do I get that?

6

I couldn’t answer that at this stage as we have no information yet about the cart that you are speaking about.

7

Figured that part out.

Thanks so much, Paul. You’ve put me on the right track. I really appreciate it! :slight_smile: