nutritionix / nutrition-label

Create a FDA-style nutrition label with any nutrition data source (even the Nutritionix API - http://www.nutritionix.com/api)
http://www.nutritionix.com/
MIT License
176 stars 66 forks source link

[Medium] Add a way to fire google analytics event when changing the quantities #51

Closed majin22 closed 8 years ago

majin22 commented 8 years ago

allow a feature to fire this when the arrows are changed or the value on the texbox is changed

related task https://github.com/mattsilvllc/NewSiteDesign/issues/477

majin22 commented 8 years ago

when using this feature, the page where you will add the label needs to have the google analytics code first https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_javascript_tracking_snippet

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
</script>
<!-- End Google Analytics -->

then the settings that you can change are:

sample use (very basic, assuming your google analytics function is ga())

$('#myFoodLabel').nutritionLabel({
    'allowGoogleAnalyticsEventLog' : true
});

when for some reason, you changed that value, to something like myOwnAwesomeGa (you changed something like (window,document,'script','https://www.google-analytics.com/analytics.js','myOwnAwesomeGa');

then the sample basic use is

$('#myFoodLabel').nutritionLabel({
    'allowGoogleAnalyticsEventLog' : true,
    'gooleAnalyticsFunctionName' : 'myOwnAwesomeGa'
});

demo http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo-analytics-custom-js-trigger.html Thanks

majin22 commented 8 years ago

this new feature is to allow users to trigger their own function when the quantity is changed. this user function should accept 3 values - kind (input/arrows), old value and new value

demo http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo-analytics-custom-js-trigger.html