Windows Store Apps: Adding Google Analytics to Windows 8 Store Apps

So you’ve built your very first Windows 8 Store app, had it approved and it is now available in the Windows App Store. The only thing is, you will have to be patient to see if people are downloading and using your app. Since the Store dashboard only updates your apps download stats once a day, it can be a highly frustrating wait. But the reality is that you don’t need to wait. By implementing Google Analytics within your app, you can see instantly how many people are using your app, track their interaction and find out where they are using your app from.

Using Google Analytics in your Windows Store app is quite straight forward. There are a number of free libraries that allow you to do this in minutes. I tried out a few of such libraries and settled on one – for me, the best was Google Analytics SDK for Windows 8 and Windows Phone.

Here’s how you can implement this within your Windows 8 or Phone XAML project (for JavaScript solution, for this guide).

1. Create your Google Analytics Account

ga_setup.png

2. Make sure you select “App” and not “Website”

3. In your app manifest, add the “Internet” capability under the “Capabilities” tab.

4. Install the Google Analytics SDK via Nuget

nuget1.png

nuget2.png

5. Modify the analytics.xml file that is automatically added to your project after installing the SDK.

6. You should change the tracking-id, the appName and appVersion values.
Obviously the tracking-id should be that of the account created in Google Analytics.

<?xml version=”1.0″ encoding=”utf-8″ ?>
<analytics xmlns=”http://googleanalyticssdk.codeplex.com/ns/easytracker”>
<!–Replace placeholder ID with your tracking ID–>
<trackingId>UA-XXXX-Y</trackingId>
<!–Replace placeholder name with your app name–>
<appName>TestApp</appName>
<!–Replace placeholder version with your app version–>
<appVersion>1.0.0.0</appVersion>
</analytics>

7. Add the tracking code to your porject…

// track the page view
GoogleAnalytics.EasyTracker.GetTracker().SendView(“main”);

// track a custom event
GoogleAnalytics.EasyTracker.GetTracker().SendEvent(“test”, “userclick”, null, 0);

Once you build and test your app, you should instantly see statistics being tracked in the “Real-Time” section of your Google Analytics.

Happy tracking!

 

Tags: , , , , ,

No Comments

Windows Store Apps: Add a Privacy Policy link to Settings Charm (C# & JavaScript)

In my (little) spare time recently, I’ve been playing around with developing Windows 8 Store apps. I submitted my very first app to the Store this week and unfortunately the app failed the certification process.

The reason for failure was simple… I requested Internet Connection permissions in the app and therefore, based on the Windows Store App certification requirements, I should have included a Privacy Policy link within the app. In fact, I needed to include the Privacy Policy link from the Settings Charm.

Of course, having never done this before I had no idea how to do this. After much searching, I finally figured out how to do this.

So if your app has failed in your quest to be certified, here’s the simple steps required to get a Privacy Policy link included in the Settings Charm for your Windows Store app….

C# Solution

1. Add the following name spaces
using Windows.UI.ApplicationSettings;
using Windows.UI.Popups;

2. Add the event handler to your app initialisation
SettingsPane.GetForCurrentView().CommandsRequested += SettingCharmManager_CommandsRequested;

3. Then add the following methods…
public SettingCharmManager()
{

SettingsPane.GetForCurrentView().CommandsRequested += SettingCharmManager_CommandsRequested;
}
private void SettingCharmManager_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
args.Request.ApplicationCommands.Add(new SettingsCommand(“privacypolicy”, “Privacy Policy”, PrivacyPolicyLink));
}

private async void PrivacyPolicyLink(IUICommand command)
{
Uri uri = new Uri(“<enter the full URL to your Privacy Policy here>”);
await Launcher.LaunchUriAsync(uri);
}

JavaScript Solution

var settingsPane = Windows.UI.ApplicationSettings.SettingsPane.getForCurrentView();
function commandsRequested(eventArgs) {
    var applicationCommands = eventArgs.request.applicationCommands;
    var privacyCommand = new Windows.UI.ApplicationSettings.SettingsCommand('privacy', 'Privacy Policy', function() {
        window.open('<enter your Privacy Policy URL here');
    });
    applicationCommands.append(privacyCommand);
}
settingsPane.addEventListener("commandsrequested", commandsRequested);

 

Assuming your Privacy Policy link is valid, you should not fail for this reason on your next app submission! :)

Enhanced by Zemanta

Tags: , , , , , , , , ,

No Comments

Creating a search engine friendly one page website

With the slow demise and declining support for the once mighty Adobe Flash, web designers have found an alternative solution to creating interesting websites. The increased HTML5 support and improved JavaScript engines from the major browsers has meant that using HTML and JavaScript to create dynamic and engaging websites is no longer something that requires an additional browser plugin. The power, speed and performance of the top modern browsers allows web designers to create hugely interesting animated websites that are much more interesting than your typical text heavy website.

What seems to be the new trend in creating the coolest and funkiest website is to build a “one page website”. This basically means that all the content of the website is on one page, but the designer has created it in such a way that it looks like a normal website with really interesting navigation and animation. But of course, the problem with this is that designers are compromising their search engine rankings just to be “cool”. This too was a problem with Adobe Flash websites in the past.

Fortunately, unlike Flash, because we still use plain old HTML, we can make our one page websites search engine friendly! It just takes a little bit of planning and well thought out user flow.

How To Do It
As mentioned above, the idea with most of these one page websites is that all the content is on one page. Of course, we don’t want to do this since we know that Google (and other search engines) want to lots of pages of content. So basically, we want all the links on our website to link to an absolute URL that the search engine spiders can crawl, instead of the default home page (or one page).

To achieve this, we need to create an individual page for each and every section that we plan to include in the website. Instead of  using the standard method of one page websites to link to each key section of the website using anchor links (e.g. /#aboutus) we aim to link to a fully formed URL (e.g. aboutus.html).

On each page, we will need to specify a DIV that will contain the content for every page to be loaded within the One Page Website. We will then use jQuery to hijack the clicked link and AJAX to load the contents of that called DIV into our page. This may sound a little confusing, but if you take the example below – it will probably become a whole lot clearer!

index.html

<html>
<head>
    <title>Tom Doyle Web Design</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        loadPage();
      });

     function loadPage(url) {
         if (url == undefined) {
            $('#container').load('index.html #header ul', hijackLinks);
         } else {
            $('#container').load(url + ' #content', hijackLinks);
         }
      }

    function hijackLinks() {
      $('#container a').click(function(e){
         e.preventDefault();
         loadPage(e.target.href);
      });
      $(document).ready(function(){
      loadPage();
    });

   function loadPage(url) {
       if (url == undefined) {
         $('#container').load('index.html #header ul', hijackLinks);
       } else {
         $('#container').load(url + ' #content', hijackLinks);
       }
   }

  function hijackLinks() {
     $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
  }

}

</script>
</head>
<body>
    <div id="MyHeader"><h1>Tom Doyle Web Design Page</h1></div>
    <div id="container">
          <div id="content">This is the new web design page. View
          our about us page - <a href="AboutUs.html">click here</a>
          </div>
    </div>
</body>
</html>

AboutUs.html

<html>
<head>
    <title>Tom Doyle Web Design</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        loadPage();
      });

     function loadPage(url) {
         if (url == undefined) {
            $('#container').load('index.html #header ul', hijackLinks);
         } else {
            $('#container').load(url + ' #content', hijackLinks);
         }
      }

    function hijackLinks() {
      $('#container a').click(function(e){
         e.preventDefault();
         loadPage(e.target.href);
      });
      $(document).ready(function(){
      loadPage();
    });

   function loadPage(url) {
       if (url == undefined) {
         $('#container').load('index.html #header ul', hijackLinks);
       } else {
         $('#container').load(url + ' #content', hijackLinks);
       }
   }

  function hijackLinks() {
     $('#container a').click(function(e){
        e.preventDefault();
        loadPage(e.target.href);
    });
  }

}

</script>
</head>
<body>
    <div id="Title"><h1>About My Company</h1></div>
    <div id="container">
          <div id="content">This is the about page
<a href="index.html">Load the homepage content</a></div>
    </div>
</body>
</html>

In the example above we’ve only used the “onclick” event to load content, but you can use this approach with other events and get the same results. I hope this gives you some ideas as to how you could create your one page website to be search engine friendly. 

You can also check out this website that I was involved in building a couple of years ago with a similar approach www.shooteditor.com

If your looking for some inspiration on creating your own One Page Website – check out  www.onepagelove.com

Tags: , , , , , ,

No Comments

UPC Broadband WiFi Router susceptible to a simple brute force attack

Many Internet users in Ireland are well aware of the Eircom wireless router hack that showed just how easy it would be for someone to compromise the poor security design of some Wifi routers. In Eircom’s case, they were providing all their Broadband customers with routers that could be compromised and accessed by hackers, simply by using the digits of the routers default SSID. Hackers figured out that by using the digits set up by default when you turned on your Eircom wifi router, you could generate the routers password within seconds by compromising the poorly thought out security algorithm.

Now it seems, UPC broadband is the latest Irish broadband provider that could fall foul to potential hackers. It seems our ISPs, in an attempt I can only assume, to make the set up and install of their routers a simple task for their less tech savvy customers – does nothing but create holes for hackers to exploit.

Recently an Irish IT company, discovered that UPC’s broadband routers are susceptible to a brute force attack based on the algorithmn used to generate the passwords that they stick to the back of all their routers.

The hack is definitely not as easy to exploit as the one Eircom introduced, but it’s still very attainable to any serious hacker or even a hobbyist who just wants to leech their neighbours broadband connection.

Check out the article from PlanIT Computing on how UPC’s routers can be exploited and what you can do to prevent an attack on you.

http://www.planitcomputing.ie/blog/?p=325

Tags: , , , , , , , , , , , ,

No Comments

How to insert a Google Map into a Word Document

Maps for Office : Apps for Office

There are many ways to “skin a cat” as they say. But if you’re looking to do something a little less barbaric such as inserting a Google Map into a Word document, it may not be that straight forward.

If you’re lucky enough to be using the latest version of Word from Microsoft’s Office 2013 suite – things can’t get any easier than using the great Maps for Office app that we recently published to the Office Store. The Maps for Office app allows you to search for a location, add a pin, choose your preferred size and insert the map directly into your document. You can’t really get much easier than that now can you? If you’re interested in finding out more about this app, visit the Office Store and download it today.

If you’re not lucky enough to own a copy of Word 2013, you’re not really out of luck since there are a number of other ways to insert a Google Map into your Word document.

I’ve outlined what I feel is the easiest way to achieve this (without using our app of course!).

First, create your map!

  1. Go to http://maps.google.com and search for the location you wish to use for your map in the search box at the top of the page.
  2. When you’ve found your desired location, it’s time to position it and choose your desired zoom level.
  3. You can click the map and drag it to centre the location on screen.
  4. Click the “+” and “-” buttons on the maps slider to zoom in and out on the map as needed to get the map exactly as you’d like it to appear.
  5. Once you’re happy with how the map looks, you’re ready to insert it into your Word document.~

 

Insert Google Map into your document…

  1. Open the Snipping Tool program in Windows. Do this by clicking the Windows key on your keyboard and typing “Snipping Tool”.
  2. When the Snipping Tool window opens, select “New” and your mouse cursor will change into a cross hair.
  3. Select the map by clicking, holding and dragging the mouse cursor across the area of the map you’d like to copy
  4. Open your Microsoft Word document, select the location where you would like to place the map into your document and press “Ctrl-V” to paste the map into your document.
  5. And that’s it!

Tags: , , , , , , , , , , , , , , , , , , , ,

No Comments