We Keep Coding

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

bookmarklet that works on 2 pages

I'm using a bookmarklet to inject javascript into a webpage. I am trying to login into my gmail account(that part works) and in my gmail account automatically click Sent folder as the page loads. This is the starting page:
This is the code I am using in bookmarklet:
javascript:
document.getElementById('Email').value='myEmail#gmail.com';
document.getElementById('next').click();
setTimeout(function(){
document.getElementById('Passwd').value='myPassword';
document.getElementById('signIn').click();},1000);
setTimeout(function(){
document.getElementsByClassName("J-Ke n0 aBU")[0].click();
},6000);
J-Ke n0 aBU is the class of Sent folder. This code logins into my account, but it doesn't click Sent folder.
I noticed similar behavior on other websites; whenever a new page loads or refreshes, the bookmarklet stops working.
Why is that and what is the correct way of using the same bookmarklet on different page than it was originally clicked.

Disclaimer: I don't have gmail, so I didn't test this for gmail specifically.
This answer exists to address your comment:
What about iframes. Is theoretically possible to use gmail login in an iframe and therefore when the iframe changes to another page this doesnt have effect on the bookmarklet?
Yes, it is technically possible to have a persistent bookmarklet using iframes (or, deity forbid, a frameset).
As long as your parent window (and it's containing iframe) remain on the same domain, it should work according to cross-domain spec.
It is however possible (depending on used method) to (un-)intentionally 'counter-act' this (which, depending on used counter-action, can still be circumvented, etc..).
Navigate to website, then execute bookmarklet which:
Creates iframe.
Sets onload-handler to iframe.
Replaces current web-page content with iframe (to window's full width and height).
Set iframe's source to current url (reloading the currently open page in your injected iframe).
Then the iframe's onload-handler's job is to detect (using url/title/page-content) what page is loaded and which (if any) actions should be taken.
Example (minify (strip comments and unneeded whitespace) using Dean Edward's Packer v3):
javascript:(function(P){
var D=document
, B=D.createElement('body')
, F=D.createElement('iframe')
; //end vars
F.onload=function(){
var w=this.contentWindow //frame window
, d=w.document //frame window document
; //end vars
//BONUS: update address-bar and title.
//Use location.href instead of document.URL to include hash in FF, see https://stackoverflow.com/questions/1034621/get-current-url-in-web-browser
history.replaceState({}, D.title=d.title, w.location.href );
P(w, d); //execute handler
};
D.body.parentNode.replaceChild(B, D.body); //replace body with empty body
B.parentNode.style.cssText= B.style.cssText= (
F.style.cssText= 'width:100%;height:100%;margin:0;padding:0;border:0;'
) + 'overflow:hidden;' ; //set styles for html, body and iframe
//B.appendChild(F).src=D.URL; //doesn't work in FF if parent url === iframe url
//B.appendChild(F).setAttribute('src', D.URL); //doesn't work in FF if parent url === iframe url
B.appendChild(F).contentWindow.location.replace(D.URL); //works in FF
}(function(W, D){ //payload function. W=frame window, D=frame window document
alert('loaded');
// perform tests on D.title, W.location.href, page content, etc.
// and perform tasks accordingly
}));
Note: one of the obvious methods to minify further is to utilize bracket-access with string-variables for things like createElement, contentWindow, etc.
Here is an example function-body for the payload-function (from above bookmarklet) to be used on http://www.w3schools.com (sorry, I couldn't quickly think of another target):
var tmp;
if(D.title==='W3Schools Online Web Tutorials'){
//scroll colorpicker into view and click it after 1 sec
tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;
tmp.focus();
tmp.scrollIntoView();
W.setTimeout(function(){tmp.click()},1000);
return;
}
if(D.title==='HTML Color Picker'){
//type color in input and click update color button 'ok'
tmp=D.getElementById('entercolorDIV');
tmp.scrollIntoView();
tmp.querySelector('input').value='yellow';
tmp.querySelector('button').click();
//click 5 colors with 3 sec interval
tmp=D.getElementsByTagName('area');
tmp[0].parentNode.parentNode.scrollIntoView();
W.setTimeout(function(){tmp[120].click()},3000);
W.setTimeout(function(){tmp[48].click()},6000);
W.setTimeout(function(){tmp[92].click()},9000);
W.setTimeout(function(){tmp[31].click()},12000);
W.setTimeout(function(){tmp[126].click()},15000);
return;
}
above example (inside bookmarklet) minified:
javascript:(function(P){var D=document,B=D.createElement('body'),F=D.createElement('iframe');F.onload=function(){var w=this.contentWindow,d=w.document;history.replaceState({},D.title=d.title,w.location.href);P(w,d)};D.body.parentNode.replaceChild(B,D.body);B.parentNode.style.cssText=B.style.cssText=(F.style.cssText='width:100%;height:100%;margin:0;padding:0;border:0;')+'overflow:hidden;';B.appendChild(F).contentWindow.location.replace(D.URL)}(function(W,D){var tmp;if(D.title==='W3Schools Online Web Tutorials'){tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;tmp.focus();tmp.scrollIntoView();W.setTimeout(function(){tmp.click()},1000);return}if(D.title==='HTML Color Picker'){tmp=D.getElementById('entercolorDIV');tmp.scrollIntoView();tmp.querySelector('input').value='yellow';tmp.querySelector('button').click();tmp=D.getElementsByTagName('area');tmp[0].parentNode.parentNode.scrollIntoView();W.setTimeout(function(){tmp[120].click()},3000);W.setTimeout(function(){tmp[48].click()},6000);W.setTimeout(function(){tmp[92].click()},9000);W.setTimeout(function(){tmp[31].click()},12000);W.setTimeout(function(){tmp[126].click()},15000);return}}));
Hope this helps (you get started)!

As JavaScript is executed in the context of the current page only, it's not possible to execute JavaScript which spans over more than one page. So whenever a second page is loaded, execution of the JavaScript of the first page get's halted.
If it would be possible to execute JavaScript on two pages, an attacker could send you to another page, read your personal information there and send it to another server in his control with AJAX (e.g. your mails).
A solution for your issue would be to use Selenium IDE for Firefox (direct link to the extension). Originally designed for automated testing, it can also be used to automate your browser.

Lotus Notes Xpage - view.postScript("window.open()") doesn't open a new window after replacing the contained Pagename (only at a specific document)

i'm currently working on a function (started after Buttonclick) to print a document in Lotus Notes (IBM Domino Designer 9.0 Social Edition Release 9.0). I have a custom control which creates a new document to the database. After saving the document its opened in read-only-Mode. There you have a button which will redirect you to a new window where the same contents are displayed without any layouts and something else (just the Text). Now its possible to print the page with Ctrl+P. There are two differen xPages for that.
Distribution.xsp
DistributionPrint.xsp
First of all i'm using
path = facesContext.getExternalContext().getRequest().getRequestURL();
to get the current page URL. After that there is an option to replace the current Page of the path (Distribution.xsp) into DistributionPrint.xsp.
var replacePage = #RightBack(path, "/");
path = #ReplaceSubstring(path, replacePage, "DistributionPrint.xsp");
When im testing it the replacement successfully worked. After that i'm bulding a new URL for the specific document to open with the new path. Finally everything is placed into the view.postScript method:
var docid = docApplication.getDocument().getUniversalID();
view.postScript("window.open('"+path.toString() + "?documentId=" + docid + "&action=openDocument"+"')")
Now my Problem starts. At 99% of my trys the new window is opened like i said the programm to do. But there are some kind of documents where i click on the button and he doesn't open a new window and trys to open the old Distribution.xsp url. I already tested out the path he wants to open at these kind of documents by using the debugtoolbar. The result of the button click returns the completly correct URL which should be opened. I can also copy that url and paste it manually into my browser => it works! But if i want to open that URL by a buttonclick and viewPostScript nothing happens.
Has anybody expierenced the same problem like me? Maybe one of you can help me through that problem. Its really annoying that everything works finde at 99% of my documents but at some documents it doesn't work although the given url is 100 percent correct.
Thanks for everyones help!

Try adding you code into a javascript function on the page and call that function from your view.postscript code
Or as Panu suggested add it to onCompete code

If the URL is correct then it sounds like a problem with view.postScript. Try with <xp:this.onComplete>.
Other things to try:
Use var w = window.open(... Plain window.open may change the URL of
current window.
Double check the URL with an alert();

You might be barking up the completely wrong tree. Did you try, instead of creating a second page for printing, create a second CSS stylesheet?
Using #Media Print you can tell the browser to use that stylesheet for printing. There you set all navigational elements to display : none and they won't print.
Removes the need to maintain a separate XPage for the printing stuff.

Thank you everyone for your suggestions. The solution of Fredrik Norling worked for me. I placed the Code into a function and called it at the buttonclick. Now every page is opened as expected. Thank you very much for the help!

Build chrome extension to tweet

I'm trying to build a simple chrome extension which consists of one icon that when clicked, pops up the official twitter window (as in here). The problem with most extensions that do this is that the window remains open after. If, however, you include this script provided by Twitter , they take care of closing the window after a few seconds, and that is what I want to do, so I'm trying to inject that code and then executing the URL. (Keep in mind both my javascript and chrome extensions knowledge is very limited).
This is what I have so far.
function onClicked(tab) {
var twitterWidgets = document.createElement("script");
twitterWidgets.type = "text/javascript";
twitterWidgets.src = "https://platform.twitter.com/widgets.js";
var head = document.getElementsByTagName("head")[0];
head.appendChild(twitterWidgets);
var urlToTweet = "https://twitter.com/intent/tweet?"
+ "text=" + encodeURIComponent(tab.title)
+ "&url=" + encodeURIComponent(tab.url);
//window.open(urlToTweet);
}
chrome.browserAction.onClicked.addListener(onClicked);
window.open is no good, as it opens a new tab. Neither is window.location and variants, that don't even seem to work at all. I realise I may have to add some chrome.extension.getURL to twitterWidgets.src, or something like it, but at this point, the more I mess with the script, the more confused I get.
Any help in the right direction is greatly appreciated.

I'm not really as to what your trying to do but if you use window.open like this it will open in the same page.
window.open("http://www.insertUrlHere.com","_self")
Hope this helps and is simple enough

How can i remove the http header referer informations(saved by browser) using javascript?

For example, there is a "Link" called go to view at the bottom of the my page, which is redirecting to http://localhost/test.php.
If we use $_SERVER['HTTP_REFERER'] in test.php page it will display the url of the page from which link was clicked.
The problem is this: my URL can be seen at the target page. This needs to be avoided. How can i do this using javascript?

When JavaScript gets to it, it is too late. Plus JavaScript can not do it.

There is no cross-browser solution. For example this code works in Chrome, but not in FF:
classic html link<br/>
js trickery
<script>
function goto(url) {
var frame = document.createElement("iframe");
frame.style.display = "none";
document.body.appendChild(frame);
frame.contentWindow.location.href="javascript:top.location.href = '" + url + "';";
}
</script>
There are third party solutions. You can find any number of them by searching "referer hide" or "refer mask" with you favorite search engine. - Some of them look sady, so try to find a trustworty one.
On the other hand. This is part of Internet culture. Referers can be used for valuable statistics for example. And if your website is in a crawler's index, they can find the link anyway.

Check http://www.referhush.com/
As sentence on this site says :"Webmasters can use this tool to prevent their site from appearing in the server logs of referred pages as referrer."