ceaksan - E-commerce & User Behavior Analytics

URL Structure Parsing

Master dynamic URL parsing with jQuery to extract and respond to page segments instantly, boosting tracking accuracy and campaign performance.

Ceyhun Enki Aksan
Ceyhun Enki Aksan Entrepreneur, Maker

Google Tag Manager enables different actions and tests based on UTM parameters and many other URL components.

In addition to the URL structure of the viewed page, you can also access the URL segments of clicked links and incorporate them into your configurations as needed. Especially when setting up custom functions for frequently recurring links on e-commerce pages and blogs, you only need to clearly define your requirements, and the rest can be easily handled with a few lines of JavaScript code.

Url parsing
Url parsing

URL Structures

Briefly, when discussing URL structures1, you can examine two different examples of configurations based on the relevant components.

So, if we’re viewing a page with a link like https://www.nasa.gov:1234/mission_pages/newhorizons/main/index.html?q=123#top, how can we retrieve the relevant URL components?

window.location

window.location.host // www.nasa.gov:1234
window.location.hostname // www.nasa.gov
window.location.port // 234
window.location.protocol // http
window.location.pathname // index.html
window.location.href // https://www.nasa.gov/mission_pages/newhorizons/main/index.html?foo=123#top
window.location.hash // #top
window.location.search // ?q=123
$(location).attr('host') // www.nasa.gov:1234
$(location).attr('hostname') // www.nasa.gov
$(location).attr('port') // 1234
$(location).attr('protocol') // http
$(location).attr('pathname') // index.html
$(location).attr('href') // https://www.nasa.gov/mission_pages/newhorizons/main/index.html?foo=123#top
$(location).attr('hash') // #top
$(location).attr('search') // ?q=123

*[URL]: Uniform Resource Locator
*[UTM]: Urchin Tracking Module

Footnotes

  1. The Location Object. W3Schools ↩
javascript jquery