Tracking input field changes (Twitter Typeahead)


#1

Hey Piwik community, I posted this in General but didn’t get any responses so I’ll repost here.

I’m working on a side project tinkering around with Twitter Typeahead.
Currently using Typeahead 0.9.3, and extracting data from two different .json files using prefetch.

Here is the the script code:


<input class="both" type="text" placeholder="Data1+ Data2" spellcheck="false" dir="auto">

>     </section>
>         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
>         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
>         <script src="typeahead.js"></script>
>         <script src="js/hogan.js"></script>
> 
>         <script>
>       //applying typeahead to text input box: both
>            $('.both').typeahead([
>               {
>                 name: 'data1',
>               //data source
>               prefetch: 'data1.json',
>               // template for each suggestion
>                 template: [
>                 '<p class="name">{{name}}</p>',
>                 '<p class="price">{{price}}</p>',
>                 '<p class="desc">{{description}}</p>'
>               ].join(''),
>             //
>               engine: Hogan
>               },
>               {
>                 name: 'data2',
>                 prefetch: 'data2.json',
>                   template: [
>                 '<p class="name">{{name}}</p>',
>                 '<p class="price">{{price}}</p>',
>                 '<p class="desc">{{description}}</p>'
>               ].join(''),
>               engine: Hogan
>               }
>             ]);
            </script>


So the user query is being searched from both data files. It is displayed as such: http://i.imgur.com/dW3QLgA.jpg

CSS: http://jsfiddle.net/Nk3ym/

The orange background is the data from data1.json and the other one is data1.json. Anyway, I installed Piwik in hopes of capturing user interaction data when they click on the data that is displayed. Right now, if the user clicks on one of the search results, the value is populated back into the original input field (it is not linked to another URL):

<input class=“both” type=“text” placeholder=“Data1+ Data2” spellcheck=“false” dir=“auto” onClick="javascript:_paq.push([‘trackPageView’, ‘TESTING’]);">

How can I use Piwik to track what users are clicking on? Would this require a custom click ‘Event’? Or would a better way to get around the clicking aspect be to track what users are typing in? Remember, there’s no “submit” button as results are displayed in real-time.

Any and all help is appreciated :slight_smile: Thank you!


(Matthieu Aubry) #2

Yes I would recommend to use “trackEvent” to track Custom Events with Piwik.
Maybe this helps? JavaScript Tracking Client: API Reference - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v3