How to disable cookies with cookieconsent by Insites - javascript

I don't understand: https://cookieconsent.insites.com/documentation/disabling-cookies/
onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-out' && !didConsent) {
// disable cookies
}
},
What do I have to put instead of "//disable cookies" to disable the cookies?

I think that you could add something like:
window['ga-disable-UA-XXXXX-Y'] = true;
Inside that section (see here). But it mostly depends your needs and your cookies you set.
Additionally I think that the script could be improved to use
if (navigator.doNotTrack && navigator.doNotTrack === 1) {
window['ga-disable-{{GA ID}}'] = true;
}
So we could use the "Do not track" option in the browser here. Not sure if that is already covered in the Insites CookieConsent script.
P.S.
Keep noted that there exists currently a small bug (reported here).

If you have more analytics and so on, you can do like:
Define a function which creates a variable on call:
<script type="text/javascript">
function setOptOut() {
localStorage.setItem('optout', 'true');
window.location.reload(false);
}
</script>
Insert the call where you find //disable cookies like:
setOptOut()
Load scripts only if not opted out:
if (!localStorage.getItem('optout')) {
//your tracking scripts
}

I've made some chrome extension, feel free to use it
https://www.youtube.com/watch?v=Wt8NOtzGdds

Related

How can I get this JavaScript to correctly decorate button links on Unbounced landing pages for Google's Cross-Domain Measurement?

I am using a service called Unbounced for my website landing pages. They wrap the CTA buttons on the landing pages, making them indirectly go to their destination.
For example, my CTA button first goes here:
https://www.axelgo.app/drs/clkn/https/go.axel.network/#/signup
...and then redirects to here:
https://go.axel.network/signup
This wouldn't be an issue, except Google's Cross-Domain Measurement works by decorating outbound clicks to pre-specified domains with an '_gl' parameter. Since this link is technically an internal one (axelgo.app) that redirects to the external domain (go.axel.network), it doesn't get decorated.
For another example, this is my expected result when clicking the CTA button:
https://go.axel.network/?_gl=1\*1x93dka\*_ga\*Njk2OTU0MTU1LjE2NjQyMjc5NjA.\*_ga_4YJDRFJTFE*MTY3Mjc2MzMwNC40NC4wLjE2NzI3NjMzMDQuMC4wLjA.signup
...but my result due to the wrapping behavior isthis: https://go.axel.network/signup
I've been playing around with some scripts I found here and here. I'll share these below. They do not work in my case though, and I believe it is because these may have been intended for form submissions and not button clicks? I'm not exactly sure as I don't know much JavaScript.
Here's the code I found of other people working through similar problems:
Example 1:
<script>
function decorateUrl(urlString) {
var ga = window[window['GoogleAnalyticsObject']];
var tracker;
if (ga && typeof ga.getAll === 'function') {
tracker = ga.getAll()[0]; // Uses the first tracker created on the page
urlString = (new window.gaplugins.Linker(tracker)).decorate(urlString);
}
return urlString;
}
function linkDecorator(){
if (window.module.lp.form.data.action === 'url') {
window.module.lp.form.data.url = decorateUrl(window.module.lp.form.data.url)}
};
if (document.querySelector('.lp-element.lp-pom-button')) {
document.querySelector('.lp-element.lp-pom-button').addEventListener('click', linkDecorator);
}
</script>
Example 2:
<script>
$('.lp-pom-button, .lp-pom-text a, .lp-pom-image a').click(function(event) {
var parentClass = $(this).parent().attr('class');
var isFormRedirect =
parentClass === 'lp-element lp-pom-form' &&
window.module.lp.form.data.confirmAction === 'url' &&
lp.jQuery('form').valid() === true;
if (isFormRedirect) {
ga(function(tracker) {
var linker = new window.gaplugins.Linker(tracker);
window.module.lp.form.data.confirmData = linker.decorate(window.module.lp.form.data.confirmData);
});
} else {
ga('linker:decorate', this);
}
});
</script>
again, these are not functional when I tried applying them. I don't think they were made for my use case.
Thanks in advance for any support.
Edit: here's a landing page: https://www.axelgo.app/drs/

Most effective way of determining whether called page is being loaded inside iframe or directly from browser?

I want to check whether the loaded page is loaded directly from browser or called inside any frame including Facebook application as canvas page.
This is really important for me. I found out this question How to identify if a webpage is being loaded inside an iframe or directly into the browser window? but some people said that it doesn't work at some browsers ?
I can also use jquery if that provides better solution or this solution is the best ?
Thank you very much for the answers
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
http://www.jquery4u.com/snippets/jquery-check-window-iframe/
function isIframe() {
var isInIframe = (window.location != window.parent.location) ? true : false;
alert(isInIframe);
}

Best way to execute js only on specific page

I was wondering what would be the best way to execute a java-script code only on specific pages.
Let's imagine we have a template-based web-site, rewrite rule for the content ist set, jquery available and it basically looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
...
include $content;
..
</body>
</html>
content 'info' contains a button, we want something to happen on click, content 'alert' should give us a message when you hover a text field.
What is the best way to trigger these actions, without running into an error, because the object is not found?
Option one: using window.location.pathname
$(document).ready(function() {
if (window.location.pathname == '/info.php') {
$("#button1").click(function(){
//do something
})
}else if(window.location.pathname == '/alert.php'){
$("#mytextfield").hover(){
alert('message');
}
}
Option two: checking if elements exist
$(document).ready(function() {
if ($("#button1").length > 0) {
$("#button1").click(function(){
//do something
})
}else if ($("#mytextfield").length > 0){
$("#mytextfield").hover(){
alert('message');
}
}
Option three: include the script in the loaded template
//stands for itself
Is there a better solution? Or do I have to get along with one of these solutions?
Your experience, usage, or any links related to this topic are appreciated.
//EDIT:
I might have choosen a bad example, the actual code would be somethin like:
mCanvas = $("#jsonCanvas");
mMyPicture = new myPicture (mCanvas);
where the myPicture constructor get's the context of the canvas element, and throws an error, if mCanvas is undefined.
Set a class attribute to your body tag.
<body class="PageType">
And then in your script..
$(function(){
if($('body').is('.PageType')){
//add dynamic script tag using createElement()
OR
//call specific functions
}
});
I would use the switch statement and a variable. (I'm using jQuery!)
var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname
switch(windowLoc){
case "/info.php":
//code here
break;
case "/alert.php":
//code here
break;
}
//use windowLoc as necessary elsewhere
This will allow you to change what "button" does based on the page that you're on. If I understood your question correctly; this is what I would do. Also, if I had were serving large amounts of javascript, I would simply add a new JS file completely.
var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname
switch(windowLoc){
case "/info.php":
var infoJS = document.createElement('script');
infoJS.type = 'text/javascript';
infoJS.src = 'location/to/my/info_file.js';
$('body').append(infoJs);
break;
case "/alert.php":
var alertJS = document.createElement('script');
alertJS.type = 'text/javascript';
alertJS.src = 'location/to/my/alert_file.js';
$('body').append(alertJs);
break;
}
Hope this helps -
Cheers.
A little different approach than checking the URL path : You can group page specific event handlers in a single function and then in each include, have a domready which will call these functions.
Eg: in script.js you have two functions (outside domready) viz. onPage1Load() and onPage2Load().
While in your page1.php you have a $(document).ready(onPage1Load)
and so on for other pages. This will make sure that unintended event handlers are not registered.
You can also use vanilla javascript to do the same
console.log(window.location.href);
const host = "http://127.0.0.1:5500/";
// JAVASCRIPT FOR INDEX PAGE
if (window.location.href == host + 'index.html') {
console.log("this is index page");
}
// JAVASCRIPT FOR ORDER PAGE
if (window.location.href == host + 'order.html') {
console.log("this is order page");
}
You can use Require js (RequireJS is a JavaScript file and module loader) and load script if they only needed. Link is http://requirejs.org/, I know using require js not so much easy.

Using JavaScript, how can I force my user to log out before going to a new domain?

I have a web site (written in PHP) that my users need to log into, and I want to be sure that they log out when they're done. So, I have a JavaScript method that deletes the PHP session cookies, and I want to call that method (a) right before the user either closes the browser window (i.e., the DOM Window object) or (b) points their browser to a site outside of my domain. Part (a) is pretty simple using the Window.onclose method, but I can't figure out how to do part (b). The problem is that I can't get any of the Window events to distinguish between when the user is leaving my domain and when he's going to a different page in my domain. I've seen this on some web sites (like, banking web site for example) but does anyone know how I'd actually implement it?
Also, this is approximately the code from that blog post, but written with jQuery (which is what I'm using):
var stay_in_site = false;
$('a').live('click', function() {
stay_in_site = true;
}
window.onunload = function() {
if(stay_in_site) {
return;
}
alert("I see you are leaving the site.");
}
This blog post is about just that.
If you're using prototype, the code will look something like this. (taken from blog post)
staying_in_site = false;
Event.observe(document.body, 'click', function(event) {
if (Event.element(event).tagName == 'A') {
staying_in_site = true;
}
});
window.onunload = popup;
function popup() {
if(staying_in_site) {
return;
}
alert('I see you are leaving the site');
}

Javascript: how do I determine if a link targets the same domain as the page it resides on?

For the purposes of tracking non-HTML documents via google analytics, I need the mentioned algorithm. It should:
not hard-code the domain
ignore the protocol (i.e. http/https)
not worry about the presence/absence of "www" (any absolute links WILL prefix with "www" and all pages WILL be served via "www")
This is complicated by the fact that I need to access it via a function called from the IE-only 'attachEvent'.
UPDATE Sorry, I've worded this question really badly. The real problem is getting this to work via an event, since IE has its own made-up world of event handling. Take the following:
function add_event(obj) {
if (obj.addEventListener)
obj.addEventListener('click', track_file, true);
else if (obj.attachEvent)
obj.attachEvent("on" + 'click', track_file);
}
function track_file(obj) { }
It seems as if the "obj" in track_file is not the same across browsers - how can I refer to what was clicked in IE?
I would like to point out that, if you're on so.com, the following links are URLs within the same domain:
http://test.so.com
http://so.com/index
index
/index
#
/#
https://subdomain.so.com#hash
mail.google.com
mail.google.com/index.php?var=value#index
(it may seem odd, but the last two ones are valid: if you're on http://so.com, the last one would take you to http://so.com/mail.google.com/index.php?var=value, which is perfectly valid)
This doesn't really answer the question but I hope it will guide the rest of the answers. If there's anything else weird enough, feel free to add it.
This sounds like a comedy answer but in all seriousness it would be be advisable that you could also do something like:
$('a.external')
Certainly the regex comparison to your window.location is the programmatic answer.
The method of attachment is not the only way IE and W3 event listeners differ. For IE you must read window.event.srcElement; in W3 it's event.target where event is the parameter passed to the callback function.
If you don't need multiple event handlers on links, old-school DOM 0 event handlers are probably an easier way for you to approach this, allowing you to just us ‘this’ to get the object on any browser.
function bindtolinks() {
for (var i= document.links.length; i-->0;)
document.links.onclick= clicklink;
}
function clicklink() {
if (this.host==window.location.host) {
dosomething();
return true; // I'm an internal link. Follow me.
} else {
dosomethingelse();
return false; // I'm an external link. Don't follow, only do something else.
}
}
I will answer the question in the update, about events in IE:
function track_file(evt)
{
if (evt == undefined)
{
evt = window.event; // For IE
}
// Use evt
}
is the classical way to get consistent event object across browsers.
After that, I would use regexes to normalize the URL, but I am not sure what you look after.
[EDIT] Some real code to put in practice what I wrote above... :-)
function CheckTarget(evt)
{
if (evt == undefined)
{
// For IE
evt = window.event;
//~ event.returnValue = false;
var target = evt.srcElement;
var console = { log: alert };
}
else
{
target = evt.target;
//~ preventDefault();
}
alert(target.hostname + " vs. " + window.location.hostname);
var re = /^https?:\/\/[\w.-]*?([\w-]+\.[a-z]+)\/.*$/;
var strippedURL = window.location.href.match(re);
if (strippedURL == null)
{
// Oops! (?)
alert("Where are we?");
return false;
}
alert(window.location.href + " => " + strippedURL);
var strippedTarget = target.href.match(re);
if (strippedTarget == null)
{
// Oops! (?)
alert("What is it?");
return false;
}
alert(target + " => " + strippedTarget);
if (strippedURL[1] == strippedTarget[1])
{
//~ window.location.href = target.href; // Go there
return true; // Accept the jump
}
return false;
}
That's test code, not production code, obviously!
The lines with //~ comments show the alternative way of preventing the click on link to do the jump. It is, somehow, more efficient because if I use Firebug's console.log, curiously the return false is ineffective.
I used here the behavior "follow link or not", not knowing the real final purpose.
As pointed out in comments, the RE can be simpler by using hostname instead of href... I leave as it because it was already coded and might be useful in other cases.
Some special precautions should be taken in both cases to handle special cases, like localhost, IP addresses, ports...
I got rid of the domain name, before re-reading the question and seeing it wasn't a problem... Well, perhaps it can be useful to somebody else.
Note: I shown a similar solution in a question to decorate links: Editing all external links with javascript
Given a click event and the original target element, this should work for the original question:
if(target.protocol == window.location.protocol && target.host == window.location.host){
}
Browsers nicely convert the link from the various patterns mentioned by #Tom into full links, so the protocol and host values simply need to match your domain.
if( someDomElementWhichIsALink.href.indexOf(window.location) != -1 ) {
// this is targeting your domain
}

Categories