CMS, AJAX, and Custom Analytics

My boss asked me a few weeks ago to develop a site for one of the professors at Binghamton University. The site was to just be a redesign for some content the professor already had hosted, and needed to be clean and simple to use. After talking to my boss, we decided on a basic layout, with a CMS to easily change the content using CKEditor.

I started by setting up a basic framework for the site, throwing some dummy text in to help me visualize everything. After getting the look the way I wanted it, I decided to switch gears over to the CMS implementation to get that squared away. Once I had the ability to add new pages, including whether they should be in the menu as a top level or a submenu, and could add the appropriate text, I threw a couple of pages into the database and went to check the front end.

At first I was going to use some .htaccess rewrites to make the URL look clean, and just pass the page names via the $_GET parameter – I’ve done this on a couple of sites already, and it helps keep a clean layout. After looking at the content that was actually being loaded, I realized that I wanted to take this site a step further. Rather than reloading the page each time a link was clicked, I decided to throw together a small PHP script to query the database, and use Javascript and AJAX to dynamically alter the page – I wanted to make it so that the user never left the ‘index.php’ page. After some testing, and re-testing, I finally had it working, and even got it to display a 404 error if the page wasn’t found in the database. I even tried to add a loading image, to be displayed while the database was being queried, but the whole process was firing so fast that it never got a chance to show up.

The final step was to add some analytics – I usually immediately turn to Google for this, but given that the site never left the index, I realized that this wouldn’t provide accurate tracking. After some quick searching, I found a tutorial on how to make a basic analytics tracker. I ended up modifying it slightly to fit into the AJAX implementation, but ended up getting it to save an entry each time a page was loaded from the database.

I’m putting the finishing touches on the site as I’m writing this, but expect a more in-depth tutorial in the coming weeks – I plan on using the entire framework from this site as my starting point for more projects in the future. To check out the site, head over here to test it out.

This entry was written by Marc Budofsky , posted on Sunday October 30 2011at 12:10 pm , filed under Binghamton University, Javascript, PHP, Web Design and tagged , , , , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

2 Responses to “CMS, AJAX, and Custom Analytics”

  • Jonathan says:

    I’ve always loved the idea of loading the bulk of a page’s content via AJAX, as you’ve done here. I notice that in your implementation the URL of the site doesn’t change. I believe one way to get the URL to change would be to modify the anchor value of the URL when the user clicks a link, and also read it on page load. The URL would be a good thing to change so people can share “page” links, bookmark, etc… Also, google (and probably other SE’s) often don’t index the content loaded via AJAX. For instance, if you take a look at the December 9th google cache here you’ll see the content of the home page is missing, though I don’t know that that’s a concern of the given project.

  • Hey Jonathan –

    Thanks for the feedback! As you mentioned, for that project, search engine optimization wasn’t really required. However, if I were to use this framework in another project, I would definitely look into modifying the URL on AJAX loads.

    I just checked out your site and saw that you went/go to Binghamton – did you graduate yet?

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>