Get UTM parameters in simple Javascript —after user redirect Page

How to send UTM parameters even after user redirects to other pages?

Send UTM Parameters even after redirection?

Yes, this is possible by using the most simple understanding of web technologies, but we have to understand the simple term that we are looking for answers; what is UTM?

Universal Tracking Module (UTM) is a system used in web development to track and measure the success of campaigns and online activities. It uses specific parameters added to URLs which are then tracked by analytics platforms such as Google Analytics. These parameters can be used to measure the performance of campaigns, identify sources of traffic, and understand user behavior on a website.

UTM tracking is used by digital marketers to track the success of their marketing campaigns for websites and make informed decisions on how to optimize their marketing strategies for better results.

There are two vital web development technologies that we need to be aware of in order to receive a dynamic feedback from this method.

• Local Storage
• Ajax

Local Storage

Local storage in web development is an API that enables web applications to store data locally on the user’s browser. It allows web developers to store data for later use and is used to persist user-specific data, such as preferences and form data, in the client-side browser. Local storage is a key-value pair and is more secure than cookies as it does not send any data to the server. It is also more efficient than cookies as it does not need to be sent back and forth with each HTTP request.

Ajax

Ajax (Asynchronous JavaScript and XML) is a web development technique that allows for the creation of interactive web applications. It enables web developers to send data to and from a server asynchronously, without reloading the entire page. This allows web pages to be more responsive and dynamic, providing an improved user experience. Ajax is commonly used to create dynamic interfaces on websites, such as forms, auto-complete search fields, and interactive maps.

Overview of the Process

Store UTM on Local Storage

This image enhances the steps where the UTM will be stored on the local storage once the user lands on the website.

Send Form Data with UTM

This image enhances the steps of how the UTM will be passed via the form data even after the user redirects to other web pages with the use of AJAX technology.

How to write it in code?

Well, here will will have to understand the various types of development coding patterns that the industry uses to keep dynamic content a constant with the use of OOP a.k.a. Object Oriented Programming patterns.

“This piece of code written below must be stashed in the main script section of the website, where no duplicates are written.

• In plain HTML files you can stash it away in a external Java script file and link it to all other pages as an external script.
• In PHP OOP frameworks, you can stash it away in the main file layout.
• In Java script frameworks, you can stash it away in the main component

Once you have an idea where the code must be placed, I will explain how the process will work.

The Process

Step 01 — We must read the URL from the current webpage and extract the UTM parameters from it to be stored in the local storage. In this step we also must check for duplicates.

Step 02 — Find the input fields in the particular webpage and store the UTM parameters into the respective input values. In order for this to work, we will create hidden input fields in every form of the web page.

Form UTM Input Fields

<form class="contact-form" id="getInTouch" method="post" action="{{URL('/request_detail_project/submit')}}">
    @csrf

    <!-- UTM Parameters -->
    <input type="text" name="utm_source" class="utm_parameters" hidden>
    <input type="text" name="utm_id" class="utm_parameters" hidden>
    <input type="text" name="utm_campaign" class="utm_parameters" hidden>
    <input type="text" name="utm_medium" class="utm_parameters" hidden>
    <!-- UTM Parameters -->

    <!-- Name input -->
    <div class="mb-4">
        <input type="text" name="name" class="form-control form-control-lg" placeholder="{{ trans('frontLang.fullname') }}"  required />
    </div>

    <!-- Phone input -->
    <div class="mb-4">
        <input type="phone" name="phone" class="form-control form-control-lg iti-phone" placeholder="{{ trans('frontLang.phone') }}" required />
    </div>

    <!-- Email input -->
    <div class="mb-4">
        <input type="email" name="email" class="form-control form-control-lg" placeholder="{{ trans('frontLang.email') }}" required />
    </div>

    @honeypot

    <button class="submit btn btn-outline-white btn-lg btn-block rounded-0" type="submit">
        <i class="loading-icon fa-lg fas fa-spinner fa-spin d-none"></i> &nbsp;

        <span class="btn-txt">
            {{ trans('frontLang.submit') }}
        </span>
    </button>
</form>

Main Script JQuery

$(document).ready(function() {
    var queryForm = function(settings){

        // STORE THE UTM IN SESSION STORAGE

            var reset = settings && settings.reset ? settings.reset : false;

            var self = window.location.toString();

            var querystring = self.split("?");

            if (querystring.length > 1) {

                var pairs = querystring[1].split("&");

                for (i in pairs) {

                    var keyval = pairs[i].split("=");

                    if (reset || sessionStorage.getItem(keyval[0]) === null) {
                        sessionStorage.setItem(keyval[0], decodeURIComponent(keyval[1]));
                    }
                }
            }

        // STORE THE UTM IN SESSION STORAGE


        // READ THE UTM IN SESSION STORAGE INTO INPUT VALUES

            var hiddenFields = document.querySelector(".utm_parameters");

            // Get all hidden inputs with utm_parameters in form submission ex: {name: value} OR {utm_campaign: reel}
            var utm_parameters = document.getElementsByClassName("utm_parameters");

            // GET UTM PARAMETERS STORED IN SESSION
            var utm_campaign = sessionStorage.getItem('utm_campaign');
            // console.log(utm_campaign);

            var utm_source = sessionStorage.getItem('utm_source');

            var utm_id = sessionStorage.getItem('utm_id');

            var utm_medium = sessionStorage.getItem('utm_medium');


            /**
             * LOOP THROUGH THE UTM PARAMETERS
             * COLLECTED FROM THE PAGE
             * AND APPEND THE UTM PARAMETERS
             * COLLECTED FROM THE SESSION STORAGE
            */
            for(var i = 0, length = utm_parameters.length; i < length; i++) {

                if(document.getElementsByName(utm_parameters[i].name)[0].name == 'utm_source') {
                    // console.log(utm_source);
                    document.getElementsByName(utm_parameters[i].name)[0].value = utm_source;

                }else if(document.getElementsByName(utm_parameters[i].name)[0].name == 'utm_medium') {

                    document.getElementsByName(utm_parameters[i].name)[0].value = utm_medium;

                }else if(document.getElementsByName(utm_parameters[i].name)[0].name == 'utm_id') {

                    document.getElementsByName(utm_parameters[i].name)[0].value = utm_id;

                }else if(document.getElementsByName(utm_parameters[i].name)[0].name == 'utm_campaign') {

                    document.getElementsByName(utm_parameters[i].name)[0].value = utm_campaign;
                }
                // console.log(document.getElementsByName(utm_parameters[i].name)[0].name+': '+document.getElementsByName(utm_parameters[i].name)[0].value)
            }

        // READ THE UTM IN SESSION STORAGE INTO INPUT VALUES
        console.log("done");

    }
    setTimeout(function(){queryForm();}, 5000);
});

If you have any questions regarding the process, comment below. Note, all information regarding this blog have been collected by reliable and trusted sources.

• stackoverflow.com
• laracast.com
• github.com