Tag: JavaScript

Dynamically Setting Domain Names For Webtrends

We use Webtrends at work to track usage of our websites.

We use the on demand version which relies on embedding a JavaScript tag onto the page. Recently, we’ve moved to using 1st party cookies (cookies set by the site) instead of 3rd party cookies (cookies set externally by webtrends). These are set in the JavaScript tag and are hard coded to the site, a real pain if you happen to move domain names as you need to code them up specifically each time. We got caught out recently by using a tag with the wrong domain name set in it, meaning we were unable to track the page impressions. We needed a solution…

As the tag is being set in JavaScript, we can use JavaScript to set the domain dynamically. Not all our sites are served dynamically so using JavaScript should mean it would work for anyone using this tag.

Here’s the offending bit of code…

// Code section for Set the First-Party Cookie domain
var gFpcDom=".kerrang.com";

This works for anything served from a Kerrang.com domain. However, what if we want to use a different domain for some reason?

We’ll JavaScript has a property in the document object called domain, we can use this at runtime to find out the full domain name the page was served from.

However, we don’t need the full domain name, just parent domain. For example, www.kerrang.com should become kerrang.com.

We can fix this by using several approaches, but the easiest is the split, splice, join method.

Firstly we split the domain into it’s components by splitting on the periods.

document.domain.split('.');

This gives us the array (“www”,”kerrang”,”com”).

Secondly we splice this to remove the first element.

document.domain.split('.').splice(1.3);

This is saying to take 3 elements after the 1st element in the array. This should cover us if we want to use something like kerrang.co.uk. So after running this we need to should have an array looking like this, (“kerrang”,”com”).

Finally we join this back together again, making sure a period is between each joined element.

document.domain.split('.').splice(1,3).join('.');

Running this should give us kerrang.com, which is acceptable to use in the Webtrends tag.

So our final code looks like this…

var gFpcDom = document.domain.split('.').splice(1,3).join('.');

Retargetting Selected Links With JavaScript

At work I have a new site that makes use of iframes to embed external content onto a page. The content is a blog, written by non technical members of staff who needed to be able to include links to external websites. They are happy with using <a href=" tags, but I didn’t want to worry them with target parameters in the HTML. We have to target _blank as we want the readers to keep the old site open and not open the content in the site framework.

The solution to this is to use a bit of JavaScript to manipulate the DOM and insert blank targeting to all blog entries.

As we control the HTML template of the blog, we made sure all the blog entries were wrapped by an enclosing div tag with a class called blogentry.

Here’s some example HTML. We have one link in the blogentry div we need to re target. The other link is not in a blogentry so has to be ignored.

<div class="blogentry">
<a href="http://www.robertprice.co.uk/">This link needs to open in a new window</a>.
</div>
<div>
<a href="http://www.robertprice.co.uk/">This link won't open in a new window</a>.
</div>

The JavaScript first has to get all div tags on the page. It does this by calling getElementsByTagName on the document. Once we have all the div tags, we have to iterate over them to make sure we only get the ones with the classname of blog entry.

var entries = document.getElementsByTagName('div');
for (var i in entries) {
if (entries[i].className == "blogentry") {
// insert target code here.
}
}

Now have our blogentry’s we need to find all the links inside and make sure they all target blank. We do this by calling getElementsByTagName on each node, then setting the target attribute to blank.

var targets = entries[i].getElementsByTagName('a');
for (var j in targets) {
targets[j].target="blank";
}

It’s as simple as that. The full code follows…

<script language="JavaScript" type="text/javascript">
<!--
var entries = document.getElementsByTagName('div');
for (var i in entries) {
if (entries[i].className == "blogentry") {
var targets = entries[i].getElementsByTagName('a');
for (var j in targets) {
targets[j].target="blank";
}
}
}
// -->
</script>

Framing Pages With JavaScript

Normally, when building a website, we’d not want our content to be in frames.

However, a project at work involved hosting some content externally from the parent site that was framed in the parent site.

That’s fine, nothing to difficult, but this content also provided an RSS feed and those links had to feed back into the parent page, so needed to launch the site framework around itself if it didn’t already exist.

The solution to this was to be have two JavaScript’s, one in the piece of content, and the other in the parent framework. When the content is loaded it needs to check if it’s framed, and if it’s not to load the parent framework which then needs to reload the content.

Here’s the code that goes into the content…

<script language="JavaScript" type="text/javascript">
if (self == top) {
var newurl = "http://www.myparentsite.com/?url=" + encodeURI(window.location.href);
if (document.images) {
top.location.replace(newurl);
} else {
top.location.href = newurl;
}
}
</script>

So what’s going on here? Well firstly we need to check if the content page has been launched in a frameset or not. To do this we check if self is the same as top. self is a JavaScript object that refers to the current page, and top is a JavaScript object that refers to the top of the current page, so this could be the parent page of multiple framesets. If it’s the same we know we’re at the top of the page and not in a frameset, so we need to launch the parent page architecture. To do this we work out what the URL of a parent will be and get JavaScript to tell the browser to goto to that page. If you look at the code here, you’ll see the parent site I’ve called www.myparentsite.com, but this could be anything. I append a parameter called url that is an encoded version of the current page’s URL.

When our parent page loads, it needs to see if it has a URL parameter to load in the content frame correctly. We use the following code on the parent page to achieve this.

<script language="JavaScript" type="text/javascript">
var newurl = decodeURI(location.search.slice(5));
if (newurl) {
// nothing actually :-)
} else {
newurl = "http://www.framedcontent.com/defaultcontent.html";
}
document.write('<iframe src="' + newurl + '" scrolling="no" width="492" height="680" frameborder="0" ></iframe>')
</script>

All we’re doing here is getting a whatever parameter string is passed in and treating it as a URL. If we don’t have a parameter we use a default. We then create a new iframe referring to this URL.

As you can see we make no effort to check the parameter passed in is a valid URL or even if it’s in the url parameter. This is very bad code, but serves to demonstrate the technique. In real life we’d check for the url parameter and that it is valid.

Comparing Email Addresses In JavaScript

I needed to write a quick JavaScript that could check if two email addresses were the same or not today. As it’s so simple, I thought I’d share it.

Firstly we put the following JavaScript into a script tag. 

function compareEmails(myForm) {
  if (myForm.email.value != myForm.email2.value) {
    alert("Your email addresses don't match. Please double check");
    return false;
  } else {
    return true;
  }
}

It takes a form, and compares the values of the fields called email and email2. If they are the same it returns true which lets the form submit normally.

However, if email and email2 are different it brings up an alert box telling our submitter the values are different, and returns false. Returning false means the script won’t submit to the script specified in the action parameter so the user has to confirm their email address again.

The following HTML code gives an example of the scripts use. 

<form action="dosomething.pl" onSubmit="compareEmails(this);">
Email :<input type="text" name="email" /> <br />
Verify Email: <input type="text" name="email2" /> <br />
<input type="submit" />
</form>

Of course the code can be used to compare any fields and not just email addresses. All you need to do is to change the field names in the JavaScript.

Enjoy!