We Keep Coding

Change right click "Copy link" value

I am currently working on an affiliate website. I have made a script in jQuery that shows the sales page (without affiliate link) when hovering, but when you click on it, it adds my affiliate link to the beginning of the link. Then my network redirects them to the desired page.
EDIT: To clarify, I want to say that I am talking about hovering over links
Now, if you right click on it, a menu opens, and you can click "Copy link". This copies the "xxx" in:
Example
Which is without my affiliate link. How do I make the "Copy link" button copy another link than the href in the a tag? Is it even possible?
Right now I avoid it completely by having this in the beginning of my code:
.on("click contextmenu", function(){};
To give you an example of the current code, it works by listening to clicks on a tags with a specific class, then it checks if the href in the a tag contains some text, if it contains that text, it does this:
window.location.href = affiliatelink + link;
If it doesn't, it does this (if I don't have an affiliate link for that product):
window.location.href = link;
So, is my problem possible to solve - or do I have to do it, like I am doing it?
EDIT 2: I have to provide my code
$(document).ready(function(){
$(".class").on("click contextmenu", function(){
var link = this.href;
var partner = "https://affiliatelink.com/?url=";
if(link.indexOf("partnername") != -1){
window.location.href = partner + link;
} else {
window.location.href = link;
}
});});

Assuming I'm understanding your question correctly, it might be possible to solve if you change when you're appending your affiliate code to links.
The "copy link address" context menu shortcut is going to copy whatever is in the href attribute of a link tag. So, what if you set that attribute's value to your affiliate link + the original link's text? You would no longer need to do it in a click handler; it would "just work" and would support both cases.
Something like this might do the trick:
var links = [].slice.call(document.querySelector('.your-class'));
links.forEach(function(link){
link.href = affiliateLink + link.href;
});
You'd no longer need your click handler, and it supports both cases of interacting with links.
EDIT: Updated with your code sample.
$(document).ready(function(){
$(".class").each(function(){
var link = this.href;
var partner = "https://affiliatelink.com/?url=";
if(link.indexOf("partnername") != -1){
this.href = partner + link;
}
});});

Change host of all links on page with js/jquery

There is a website example.com. I want to change all links on that website so they appear to different host. I need to change these types of links:
Link
Link
Link
to
Link
Link
Link
While leaving form and js urls as is. I wonder what is the less painful way to do that? I know that parsing urls with regex is bad, so how can I parse these urls as a class and do operations to them?

you could try this:
$('a').each(function(){
var $me = $(this);
var url = $me.attr('href');
var newUrl = url.replace('example','mirror');
if(newUrl.indexOf('mirror') < 0) newUrl = 'mirror.com/' + url;
$me.attr('href',newUrl);
})
this will change all the <a> and only them (no forms and script href)

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.

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');

On back or forward button press in a browser the URL changes but the content does not

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;
}

Append main url with javascript withour refreshing the page doesnt work

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]);