I have list of videos on a page and i show play each video on the same page when one clicks on the video icon, My sample page url is like
www.xyz.com/video/
Now i have to append the url in such a way that when a user click on the video icon it should also play that perticular video on the same page and also change the url to
www.xyz.com/video/XhskwaJS without refresh the page. Logic behind this is to share give user ability to share each video rather than the main video page which has several videos listed
I used following code on event click to extract the VideoID and try to append it to the main URL
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var URL = 'http://www.youtube.com/embed/Se1y2R5QRKU?showinfo=0&modestbranding=1'
var match = URL.match(regExp);
if (match && match[7].length == 11) {
//console.log(match[7]);
location.href = $(this).attr('href') + match[7];
return match[7];
} else {
//alert("Could not extract video ID.");
}
Your regex won't match when applied to a youtube.com address as it requires youtu.be.
Maybe you can simplify the regex anyway by specifying one alternative for embed and watch urls along the lines of
^[^?]+/embed/([^?]+)\?
^[^?]+/watch\?v=([^&]+)
Finally, instead of setting location.href which triggers a refresh, use the html5 history api and write
window.history.replaceState('Object', 'Title', $(this).attr('href') + match[7]);
Related
I am trying to figure out how I can make said addon for firefox redirecting to the correct video in the traditional video player. So far I've gotten this
const currUrl = window.location.href;
if(currUrl.indexOf("shorts") != -1) {
var urlSplit = currUrl.split("shorts/");
var vidId = urlSplit[1].substring(0, 11);
location.assign('https://www.youtube.com/watch?v=' + vidId);
}
but my issue at the moment is that I can't get it to work automatically when I enter a youtube short video, instead I have to reload the page for it to work.
I tried different redirecting methods, location.assign, location.replace and location.href, alongside trying to figure out why it does not recognize the url change when i enter the video to no avail.
I have this really basic script that changes all the links on my wordpress site to preserve the url param - I use it on wordpress landing pages for my business
var queryString = new URL(window.location).search;
document.querySelectorAll("[href]").forEach(link => {
var current = link.href;
link.href = current + queryString;
});
E.g.
website.com/?location=Australia
All links on the page will carry over the parameter to whatever href link my visitor clicks
/book-online/?location=Australia
/request-a-callback/?location=Australia
However this is obviously changing all my href links, and is changing my tel: links with it.
Is there a way I can make it only change https://?
My tel: links look like this
tel:0293 12329?location=Australia
I have had this code copied and pasted for ages, I know absolutely nothing about javascript and no idea where I found the above code, I've just used it for ages and it works as a quick and easy way for me to track a users progress through my landing pages.
Perhaps you could only do this if tel: is not in the href?
var queryString = new URL(window.location).search;
document.querySelectorAll("[href]").forEach(link => {
var current = link.href;
if (!current.includes("tel:")) {
link.href = current + queryString;
}
});
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.
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.
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();
}
});
}
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.
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');
The legacy website I inherited is comprised of href #links to navigate through the website. It's rather large so I don't want to recreate the whole thing, even though I know the #urls are not best practice. One enhancement that is necessary is to enable the back and forward buttons in the browser so that they will not only change the URL (which it does) but refresh the page to show the previous/forward URL's content.
If anyone could point me in a direction to make this happen, I would definitely appreciate it.
Have some javascript on your page load look for the anchor and then scrollTo it
var url = "www.website.com/#a1", idx = url.indexOf("#")
var hash = idx != -1 ? url.substring(idx+1) : "";
function scrollTo(hash) {
location.hash = "#" + hash;
}
I have page the has some data in tabs, Im trying to write a function so that when links are click from another page can load the page with the tabs on and show the correct tab. This is working with the code below, minus the actual changing tabs function. But for some reason using the window.location..... as a variable still scroll the page down to the matching id. Is there another way to get the string in the url after the #. Or can i do it this way but not have to jump to the id? thanks
function loadTab(){
var linkToTab = window.location.hash.substr(1);
var linkClass = '.'+linkToTab
if(window.location.hash != '') {
changeTabs(linkClass);
}else{
$('.companyLink:first').addClass('active');
$('.companyBio:first').addClass('active');
$('.companyBio:first').fadeIn();
};
}
The hash character is for anchors.
Use a question mark instead of a hash.
<a href="index.html?tabname">
and
var linkToTab = window.location.search.substr(1);
var linkClass = '.'+linkToTab
if(window.location.search != '') {
The # part of the URL is traditionally used for anchors. The 'jumping' you see is the original feature.
Modern websites and web-applications use it build a history as HTML5's history feature isn't widely supported yet.
To avoid the jumping add event.preventDefault to your links, like:
Tab1
<script type="text/javascript">
document.getElementById("tab1handle").onclick = function (event) {
event.preventDefault();
}
</script>
You can also make sure the anchor is not defined. In this case the browser will jump to the top of the page. It's up to you whether this is undesirable or not.