Google Analytics & Google Tag Manager

Hello again! So once again it's been just about forever since I last wrote but I thought this topic would be nice since there's not a whole lot pertaining to it.

Recently at work I was tasked with getting custom code working with a modal popup that would send events to a client's Google Analytics(GA). The client is using Universal Analytics so I thought simply calling ga('send','event','category','action'); would do the trick. But it was not that simple.

First I will give you the written part of my research. Google Tag Manager(GTM) is a simple way to control library's that get loaded onto your site. You can specify rules for when certain scripts or libraries are loaded. It's a great tool but like everything you need to know the caveats. When you put GA into GTM the container the script is placed in hides the ga Tracking object. Plain and simple that means you can't call ga() from an outside script....initially. GTM has a property for a tag in each container called Tracker Name. If this is not set GTM creates it's own Tracker Name each time a page is loaded. You can write client side code to find this name but now you are hard coding a value. If something would change now your script is broken. The best work around is to enable the Tracker Name but leave it blank. Now you can simply call the ga() tracking object and not have to prepend the Tracker Name to anything. Now what does that look like? I'll show you of course.

First log into GTM and navigate to the account you want to configure. Below I have a container called Blog in an account.   

Click on Tags on the left hand side and select the tag you want to modify. See figure below.

You will then see three green circles with checks. The third one says "Configure Tag". To configure this one select the pen to the far right as shown below.

You will be presented with more configuration options. The one we are interested in is the "Advanced Configuration".

Under "Advanced Configuration" you fill find a setting called "Set Tracker Name". We want to enable this setting and leave it blank so that GTM will not generate it's own Tracker Name.

Now we can simply call the ga() Tracking object with out the use of a Tracker Name. Keep in mind that if you do fill in the Tracker Name you will need to prepend this to the correct property in the ga() Tracker object. GTM does highly recommend not using Tracker names. So please consider your situation before enabling this setting.

I hope this post helps some of you using GTM and GA. This certainly is not an introduction to either GA or GTM but hopefully provides some insight into an issue you are experiencing. Until next time!

Bootstrap Snippet Pack for Visual Studio

So recently I've been more and more interested in using Bootstrap. Boostrap is awesome for creating very rich and responsive websites or even mobile apps in something like Apache Cordova. My biggest issue was how do I make a Boostrap site quickly without having to memorize all the classes that make up the styles.

In comes Bootstrap Snippet Pack. An extension for Visual Studio that allows you to quickly create Bootstrap elements in a few simple clicks or key strokes. So what is it? It's a Visual Studio extension that contains pre-defined code snippets for you to quickly call. Simple as that!

First, go get the extension here. Once you have run through the installation you may have to restart Visual Studio. Now that you have the extension, open Visual Studio and create a new web project of any kind, MVC, Webforms or just an HTML page.

The easiest way to add a snippet is by using the keyboard shortcut to access code snippets in Visual Studio. The magic key stroke is Crtl+K, Crtl+X. You are presented with the snippet tool as shown below.

Simply select Bootstrap from the menu and hit enter. You are now presented with all the code snippets for Bootstrap. Again, shown below.

Let's try something simple. Find Bootstrap 3.x form. This will give you a simple label, textbox and submit button styled with Bootstrap.

If you run this you are given the following design:

Now as you can see I have used a boilerplate ASP.Net application, specifically a Webforms application. By inserting the form snippet between the Jumbotron element, also boostrap, and the rest of the body, I get a simple Email submittal form. Again this is all styled with Bootstrap.

Now that you have seen how simple it can be to mock up a website using a nice style it's time to explore. Go through the Bootstrap snippets and try them out. The form that I have showed you can have many more fields. Just copy the email label and texbox and paste in as many as you want for whatever fields you need. Just remember to change the names so you don't have 10 email fields. That's it! Also, visit the Bootstrap website here and start digging into how forms, buttons, modals, tables and so much more are styled with Bootstrap.

Well I hope you enjoyed this post. If you have any questions drop me a message via any of the social media spots above. Hopefully this is another tool that will help you be great! Thanks!

Microsoft Band

So just when I was ready to call it quits on hoping for a wearable that works with Windows Phone out comes a wearable. Microsoft has announce the Microsoft Band.

All the functionality of a fitness device plus you can stay productive with it too with alert notifications. The companion app, Microsoft Health for Windows Phone, can be found here. But it also is supported on iOS & Android. Funny that Microsoft is the one to release a cross-platform

Also from my Twitter sources I have heard that the Microsoft Band will also support other wearable devices coming in January. I am personally hoping to have support for the Pebble. Once I scrape up $200 I will get one & post about my experience. If you get one tell me about it on Twitter. I have also heard rumbling about an SDK but nothing confirmed. Thanks!