CODEWITHSUNDEEP
javascriptphpjqueryfacebookgoogle-analytics
Mario Souljah
Mario Souljah

Reputation: 11

Keep UTM Source tracking in URL when user clicks on link

I run a news/publishing website where 95% of the traffic is coming from Facebook and from different Facebook fanpages.

I have set up UTM tracking through Google Analytics to track all links from different Fanpages to calculate how many visitors each page sents. This only tracks sessions when the user is sent to the website but when a user clicks on a link in the website such as another article the tracking is lost.

All users sent to the website have a UTM tracking code to the URL but when a user clicks on another link or article on the website the UTM tracking is removed from the URL therefore the tracking is lost for that user.

I want to track all pageviews from all users and sessions sent to the site.

I want the website to automatically have the UTM tracking in the URL when a user clicks on any link on the website.

For example, this is a link when a user is brought to the website:

http://99soccer.com/man-united-worried-as-rivals-man-city-are-poised-to-sign-their-transfer-target/?utm_source=slign-11&utm_medium=slign&utm_campaign=slign-11

If the user clicks on an article on the website this UTM tracking will disappear from the URL therefore not tracking the pageviews.

/?utm_source=slign-11&utm_medium=slign&utm_campaign=slign-11

Every user that will be sent to the website will be sent via referral and will have a utm source to track them but once you click on a link when you are on the website the tracking url (utm source) disappears. I want the tracking to stay there when you click on another link in the website.

Upvotes: 0

Views: 8401

Answers (4)

Ryan
Ryan

Reputation: 314

I had this same problem and everywhere I searched, the solutions would suggest querying all <a> tags in the document on page load, loop over them, and apply the UTM parameters. This seems incomplete to me... what if the DOM gets updated with new links after page load? Seems using a click event handler would be the better route.

I came up with this and it seems to work for me. I don't know if it's foolproof though, so I'm open to improvements.

if (window.location.search.includes('utm_')) {

    document.addEventListener('click', function(event){

        // get the nearest anchor tag to where the user clicked (in case they clicked on something inside the anchor tag like an <img> or <span>
        let aTag = event.target.closest('a');

        if (aTag !== null) {

            let urlParams = new URLSearchParams(window.location.search);
            let aParams = new URLSearchParams(aTag.search);

            // update the <a> tag's params with UTM params
            for (let [key, value] of urlParams.entries()) {

                // skip duplicates and only add new params that belong to UTM
                if (! aParams.has(key) && key.includes('utm_')) {
                    aParams.append(key, value);
                }
            }

            // reset the anchor's URL with all the query params added
            aTag.href = aTag.href.split('?')[0] + '?' + aParams.toString();
        }

    });

}

Upvotes: 2

orgreeno
orgreeno

Reputation: 193

You can manually set parameters for the session like this on the home page.

sessionStorage.setItem('utm_source', params.utm_source); sessionStorage.setItem('utm_medium', params.utm_medium); sessionStorage.setItem('utm_campaign', params.utm_campaign);

And then retrieve them on the contact page, probably to assign to a form field.

sessionStorage.getItem('itemName');

Upvotes: 1

F. Leone
F. Leone

Reputation: 595

var links = document.getElementsByTagName('a');
var utm = /(utm_source=.*)&(utm_medium=.*)&(utm_campaign=.*)/gi.exec(window.location.href);

for(var i=0;i<links.length;i++){
  console.log(links[i].href = links[i].href + "?" + utm[0]);
}

This should do the trick.

Upvotes: 1

Fernando
Fernando

Reputation: 429

There are better ways to get this data within GA. You can segment users with the initial referal source to your site and track the data that they have associated with them. I think this will accomplish what you want.

If for some reason I can't really think of you NEED to do this you could actively change all links on a page to include the UTM tag if a user loads the page with a UTM tag.

The rough structure of this: 1. Get the Document.url attribute 2. Logic check if it contains a UTM tag 3. If yes, add the same UTM tag to all links on the page 4. Add additional checks to remove UTM tags or other params those links might have as needed. Especially as the use of the & and ? in the url will need to be addressed.

Upvotes: -1

Related Questions