How to implement deep linking in Windows Phone 8

I am trying to implement deep linking using myapp:// moniker. For testing purpose I have an HTML page with the following meta:

<html><head>
<meta property="al:windows_phone:app_id_here" content="12345" />
<meta property="al:windows_phone:url" content="myapp://products/?id=widget" />
<meta property="al:windows_phone:myapp" content="Example Store" />
<title></title>
</head>
<body>
<h1>Test</h1>
</body>
</html>

And in WMAppManifest, I have declared the protocol as:

<Extensions>
  <Protocol Name="myapp" NavUriFragment="encodedLaunchUri=%s" TaskID="_default" />
</Extensions>

I have hosted the html on a private server but navigating to the page through Internet Explorer on Windows Phone doesn't open the app, instead, it just shows the webpage. I am very new to deep linking. What am I doing wrong?

Solution

The AppLinks meta tags do only advertise your deep links to crawlers/bots (so that e.g. Google knows that your website has a corresponding app and deep links).

To implement the actual deep linking you have to add some code to your website. The following is a very barebones example:

<script>
  // when the page is loaded...
  window.onload = function() {

    // and viewed on a Windows Phone...
    if (navigator.userAgent.match(/Windows Phone/)) {

      // then try to open the deep link
      window.location.replace('myapp://products/?id=widget');

      // if it didn't work after half a second, then redirect the
      // user to the app store where he can download the app
      setTimeout(function() {
        window.location.replace('http://www.windowsphone.com/s?appid=12345');
      }, 500);
    }
  }
</script>

If you do not want to implement it by yourself then you can use a 3rd party provider for deep links, e.g. Shortcut Media (Disclaimer: I currently work at Shortcut Media).