logo-image

Setting up Google Analytics goals    June 8, 2017    0

A goal represents a completed action called conversion, and it is a measure how good or bad your site fulfills your target objective. Examples of goals can be:

  • submitting a form on your website
  • finalizing a purchase (if you are running an eCommerce website)
  • downloading some marketing material like a case study, brochure, etc
  • or any other action.

Why you should use them?

Properly defined goals allow you to track critical information such as number of conversions and conversion rate. It is much harder, some would say even impossible, to evaluate your business effectiveness and marketing campaigns without properly set goals. Goals are there to show you if users are completing actions that matter to you. Based on these informations you will be able to re-configure steps that lead to action completion so your digital business can be more successful.

How to setup goals?

Once you sign in to Google Analytics you should:

Click “Admin” and choose desired view.
step-1
In View column click on “Goals”.
step-2
Click “+ New Goal” button
step-3
You will have 3 options for setting up goals: using template, smart goal or custom.
step-4

Using template

  • Select template from the list
  • Click on “Continue”

You will go to second step “Goal description”. We will cover this below.

Using smart goal

Your account need to meet certain prerequisites in order to have option for this. Most important one is to have AdWords setup. Then you will need to meet some other prerequisites. You can read more about this here.

Using custom goal

Select Custom option from the list and click on button “Continue”
step-4a
Fill in details in description section and choose goal type
step-5
Based on goal type enter all required info
step-6

Goal types

There are 5 types of goals. Here is the table:

goal-types

You can only create 20 goals in total. If you want to track more you can create additional view for that property or just edit existing goal that you don’t need anymore.

Also, you cannot delete goals. You can just set them to record activity or not. Reason for this behavior is that you cannot delete something that Google analytics is already tracking. That’s right, analytics already tracks all that. Goals are there to help you to sort and organize your tracking in manner that you can see flaws in your UX design (if there are any).

Color Names    August 19, 2009    0

Anyone for Light Salmon?

Anyone for Light Salmon?

Did you ever receive an email from the client with something like: I would like lots of Light Salmon color in the header? Bet you did. Guess you stared at the screen with – What the f…(?!) look. Well, here is the solution. I’ve found a perfect place where all the weird color names live and are translated to the language we understand – hexadecimal. Here is the Wikipedia link where all of them are listed. Pretty useful for the rest of us who think that salmon is a fish and should be swimming in the river, or eaten by the bear when swimming up hill on Animal Planet.

Golden Ratio WordPress Theme    April 10, 2009    4

Many visitors of Array Studio Workshop were more then interested in the Golden Ratio post. Even though I promised more material about it, I couldn’t find enough time to conduct a research. Until now. I don’t intend to bother you with more theory, but rather to show you how to use it in practice. Since we’re using WordPress regularly, we thought that creating a WordPress theme based on Golden Ratio rule will have two pretty good points:
  • We’ll have a theme just the way we want in Golden Ratio
  • We’ll present the actual way how you can use Golden Ration in design.
We also wish all of you to participate with ideas and comments! So, for start here are some written in stone rules we will keep in mind throughout the process.

Golden rules for creation of Golden Ratio WordPress Theme

Rule #1: Theme must be functional, practical & user friendly This basically means that we’ll round some numbers, we’ll think about the most common ad spaces people use, we’ll make the font sizes readable, etc. Rule #2: Website shouldn’t be wider then 960 pixels. This one is pretty understandable – it is a safe width for most screens. Rule #3: Simple is good We’ll make the main theme as simple as possible, so it can be upgraded later.

Let’s start!

Here is our initial, rough-rough composite. Golden Ratio WordPress - Composite I personally enjoy 3 column design for blogs, with the main column on the left hand side, and the 2 smaller ones on the right. In order to follow the Golden Ratio rule, two side columns should be in different width. However, nowadays you need at least 160 pixels for the far right column (since that is the place for adverts, and the 160 pixels is what we need). We also need some margin space on the left from that column. Let’s say 20 pixels will do.

Now let’s do some math

So, we have: 160+20 pixels =180 pixels (for the right hand sidebar plus spacing) Now, let’s calculate the second sidebar: 180 x 1.618 = 291.24 pixels. We’ll round that up to 290 pixels. We’ll take our 20 pixels back, so we’ll have 270 pixels for the second sidebar. Now it’s time for the main content. 290 x 1.618 = 469.22. Again, we’ll round it up to 470 pixels for the main content. This space is enough for the 468×60 regular banner ad, which you might use as well. However, when you calculate the sum, you’ll get: 160 + 20 + 270 + 20 + 470 = 940px That’s absolutely fine, since we have 960 pixels defined as a safe maximum width. So, we’ll decrease the original value for 20 pixels. So, by applying the Golden Rule, we have a 3-column WordPress theme with the: 470px column, 270px column and 160px column, by looking from left to right.

What about the header & footer?

For the header at this stage, we used simple calculation. For the top part, where the logo and navigation bar should be, we took 100 pixels. Bottom part of the header is 160 pixels high. For the footer divider, we’ll continue this array of numbers. 160 pixels x 1.618 = 258.88. We’ll use 260 pixels for the footer height.

Conclusion

Till now, we have defined the main sections. In my next post, I’ll deal with the font sizes. Your comments are more then welcome.

Cross Browser Tell a Friend JavaScript    April 8, 2009    6

Recently we had a client asking for a “tell a friend” JavaScript that works in all major web browsers. Why not – how complicate can it be? All I have to do is type something like this in google and I’ll have my “Tell a Friend” working on ie, ie6, firefox, safari in no time… Yeah right. As you’ve might of guessed that was not the case. Finally we found something that works so here it is Copy the js code blelow
<SCRIPT TYPE="text/javascript">

var SubjectLine='Take a look at this web page I found, '+top.document.title;
var BodyText='You can see this page at: '+top.location.href;

var Message='Send <A CLASS=contact HREF="mailto:?SUBJECT='+escape(SubjectLine)+'&BODY='+escape(BodyText)+'" TITLE="Send your friends e-mail about this page">this page<\/A> to a friend.';

var MessageIE='Send <A CLASS=contact HREF="mailto:?SUBJECT='+(SubjectLine)+'&BODY='+(BodyText)+'" TITLE="Send your friends e-mail about this page">this page<\/A> to a friend.';

if(document.all) { document.write(MessageIE); }

else { document.write(Message); }

</SCRIPT>
paste this code on the place you want your “Tell a Friend” link to appear

We’re Back! Version 5.0 is live    April 6, 2009    0

Array Studio v5.0As you can see, we have finally redesigned our website. It took us about a year to do that. Well, to be honest, redesign was done some 300 days ago, but we just couldn’t find the time to integrate it. (Yeah, same story every time…) Our site’s design is not the only thing changed in our company. If you check our team page, you’ll see some news – Array Studio is no longer in back-end programming business. We leave that part to our partner companies, yet we are 100% focused on the creative part of the Web Development, like usability, front-end programming and of course – design itself. Our former co-founder, Slobodan, now has his own company now, and we wish him the very best. So, to keep us busy, we have opened a print design section. You can see some of our works on our portfolio page. You’ll find our updated web design portfolio there as well. That’s all for now. Hope you didn’t give up on reading our blog in the past 2 years.

Rails Source Code Annotations    March 4, 2007    1

Ruby On RailsI’ve been catching up on my blog reading and I’ve stumbled upon an article describing a great new feature in Edge Rails that lets you add annotations to your code. You can use TODO, OPTIMIZE and FIXME to mark parts of your code. Then you can use rake notes to list annotations – which is great since you won’t miss any of the notes you made. The only problem is that this is still in only in Edge Rails, i.e. it’s not yet in stable Rails release. But there’s a really simple way to add source code annotations rake task to non-Edge Rails app:
svn export http://svn.rubyonrails.org/rails/trunk/railties/lib/tasks/annotations.rake \\
 lib/tasks/annotations.rake
For more information about Rails source code annotations see Ryan’s blog.

MySQL insert a new row or update old one    February 16, 2007    12

Today I stumbled upon a newish MySQL feature that can often be very useful. Since MySQL 4.1 there’s a non-standard feature (i.e. it’s an extension of SQL standard and won’t work on other databases) that lets you insert a new row, but if it happens that a row with same primary/unique key already exists it will just update that row. Insert query syntax looks like this:
INSERT INTO table (primarykeycol,col1,col2) VALUES (1,2,3) ON DUPLICATE KEY UPDATE col1=0, col2=col2+1
If there is already a row with primarykeycol set to 1 this query is equal to:
UPDATE table SET col1=0, col2=col2+1 WHERE primarykeycol = 1
Ordinarily to achieve the same result you would have to issue an UPDATE query, then check if there were affected rows and if not issue an INSERT query. This way, you can do everything in one step – first try insert and then update if insert fails. One situation for which this type of syntax is perfect is when you work with daily counters. For example, you might have a table with PostID, Date and Count columns. Each day you’d have to check if you already created an entry for that day and if so increase the count column – and this can be easily substituted with one INSERT … ON DUPLICATE KEY UPDATE query. Unfortunately there are some caveats. One being that when you have multiple unique indexes it will act as if you had an OR condition in WHERE clause of UPDATE query. This means that multiple rows should be update, but INSERT … ON DUPLICATE KEY UPDATE will update only one row. For more information you should read article in MySQL manual: INSERT … ON DUPLICATE KEY UPDATE Syntax

Free Web based color scheme creator    February 3, 2007    4

I simply enjoy this kind of stuff. Specially if client doesn’t have any specific color scheme request. This color cycle is easy to use and you can generate great color schemes, if you know where to click. Color cycle First, click on the buttons below the cycle and choose from (Mono, Contrast, Triad, Tetrad and Analogic). Then, play around with colors and see what you’ll get. Use variations to set the colors perfectly. There is also a simple preview where you’ll be able to see how colors fit. I prefer dark and light pastels myself. Here is the link to Color Scheme Creator. Enjoy.