I know that a lot of my readers are other York Interns doing their own internships, hosting their own blogs (you may have noticed I have a list of their names, linking to their blogs, running down the bottom left side of my sidebar). And a couple people have expressed an interest, and I would like to preserve for posterity, and make it easier on those trying to find tutorials like this on Google, the special little things I've added to this blog.
I know I've mentioned that I put Google Analytics on the site, which may I just say is awesome! I think my favourite thing to do with it is go to my analytics homepage, click through visitors, into map overlay and look at the city view. I get to see all the points around the world my blog gets visited from, larger or smaller based on how many visits were made! It's really interesting!
So, fellow interns/bloggers, if you would like to put google analytics on your own site, this is how I did it. As I'm writing this, I'm trying to assume as little html knowledge as possible; just to make sure this is as accessible to everyone as I can make it.
HOW TO GET GOOGLE ANALYTICS ON YOUR BLOGGER/BLOGSPOT BLOG
First things first of course, you have to go to the Google Analytics homepage. From there, right under the big blue "Access Analytics" button is a sign up now button. It just uses your google account, you have to give it the url of the page you want it to track and stuff (which is of course the url of your blog, mine is http://dippyjonestravel.blogspot.com). It's all very straight forward.
Just go through the Google Analytics set up process, standard, nothing fancy and it will give you some code that'll start with something like < script type = 'text/javascript' > and end with < / script >. You want to copy that whole block of code and go to your Blogger dashboard. Make like you're going to customize your layout; you want to be in the Layout tab, and go to "Edit HTML". Don't touch any of the text in here, you're just going to go in, paste the Google Analytics code where it needs to be and get out.
What you're looking for is where it's describing the "Footer". Mine was just over halfway down, and with the exception of the pink stars, this is what it looked like in mine:
/ * Footer
----------------------------------------------- * /
#footer {
clear:both;
padding:15px 0 0;
}
#footer p {
margin:0;
}
/ * Page structure tweaks for layout editor wireframe * /
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar-wrapper,
body#layout #sidebar {
padding: 0;
width: 240px;
}
]]>< /b:skin >
< /head >
< body >
*********
< div id='outer-wrapper' > < div id='wrap2' >
So what you want to do, is paste your Google Analytics code where those pink stars are. The description of the footer may look different, but what you need is that < body > tag. You can hit enter a few times after the body tag to give yourself some space, that won't hurt, but just paste the code between that tag and the next one.
Then hit "Save Template".
And there you go! Now, you can have Google Analytics send you weekly reports about your site. You can see if people are typing your web-adress in directly, or if they're clicking through from facebook, or another blog; or if they found you through a google search! You can see what language they use, what country they're visiting from, even which city! And you can see how many individual people are visiting, not just how many times your page has been looked at.
As long as you don't touch that code in the layout, you can play around with all the features at Google Analytics. I'm having a lot of fun with it!
Now, you may have also noticed I put a map of my experience up at the top of my blog there, and I tend to insert them into my travel oriented posts. Compared to the Google Analytics, I suppose it's easy as pie.
HOW TO INSERT GOOGLE MAPS INTO YOUR BLOG
First is how to get the code. I assume you're familiar with Google Maps. You can search what ever you like, and voila, you see it there on the map. Now you can insert the map however you like. You can search for any specific point; a city, a country, a business, and share a map illustrating that point.
Or, what I do: I create my own maps, with my own placemarkers using the feature "My Maps" you can see it right next to the link for "Get Directions" in the top left part of Google Maps' search page.
But that brings up a whole other can of worms, doesn't it? Where do you want it? What are your options?
Well, you can put it in a post, or make it into a widget and have it somewhere on the main, and every other, page of your blog.
First the easy one, how to put it into a post.
Now when you're writing your post, you're writing it in a box, with a toolbar up top, and some tabs above that, the one that's selected is "Compose" by default. When you want to insert a map, just click over to the "Edit HTML" tab and copy-paste the code map wherever you like, then click back over to "Compose" and you'll see your little map right in the box. You can type around it, you can highlight it and change it's alignment, and post as you like. When I'm putting my maps into my posts, I like to customize the map and ensure it is 300 pixels by 300 pixels so it isn't too... overpowering.
If you'd like the map to be a more permanent feature; a prominent part of your page, or even just a sidebar, you need to make it into a "Gadget". I know that sounds intimidating, but stay with me!
If you want it to just be in your sidebar, you want to customize it to make sure that it's thin enough to fit; a width of 250 pixels is probably best.
If you want it above the posts like mine is, or below the posts if you prefer, then customizing it to a width of 425-450 is probably best, depending on your layout. Play around with it until it suits you.
Once you've got the code, you need to make the Gadget.
To do that, you go to your Layout tab again (or click "Customize" in the navigation bar above your blog on its homepage), but this time, you want to stay on the tab labelled "Page Elements". Here, you'll see a kind of wireframe layout of your blog as it currently is. You can move things around so they're in the places you like, but we're here to make a Gadget. In this wireframe layout there will be blocks labelled "Add a Gadget", one will be at the top of your sidebar and there will probably be one across the top, click on that link: "Add a Gadget".
Clicking the link will bring up a little pop-up. It will have a few tabs along the side, and you'll be in the one labelled "Basics", this is the tab you want. The fourth gadget down is labelled "HTML/JavaScript", just click on that title. Give the Gadget a title in the little text box, then paste the HTML code for your map into the "Content" box, then click "Save".
Now you'll have a new box in your wireframe layout, labelled what ever you called the map (I named mine "my trip in map form"). Move this box wherever you'd like it; under the title, above your blog posts, across the bottom of your page, wherever you like!
Once it's where you want it, click the orange "Save" button and enjoy your success!
You can actually create as many "HTML/JavaScript" Gadgets as you like and shuffle them around so your blog looks exactly how you like. That's how I put the "AddThis" button in, the Twitter feed, my Flickr feed and all those other treats in my sidebar!
I hope you enjoyed this, and find it useful.
I really wish I'd had a tutorial to use for putting my Google Analytics in that was this straightforward... I had a devil of a time finding the place it was meant to go! I actually had to copy the whole HTML from that Layout editing box, paste it into a word processor and use the Find feature to find where I was meant to put the code. Lame.
But hey, if you want these perks, you have to be willing to work for it. Well, you don't, now that I've made this tutorial! ^.^
Ciao!
No comments:
Post a Comment