Calling javascript function with arguments using JSNI

I'm trying to integrate Mixpanel with GWT, but I have problems calling an event with a property and one value.

My function to track an simple event (without values):

 public native void trackEvent(String eventName)/*-{
        $wnd.mixpanel.track(eventName);
    }-*/;

It works.

But when I want to add some properties and values, it doesn't work properly:

public native void trackComplexEvent(String eventName, String property, 
            String value)/*-{
    $wnd.mixpanel.track(eventName, {property:value});

}-*/;

I have 2 problems with this:

1) Mixpanel says the property name is: "property"(yes, the name of the variable that I'm passing, not the value).

2) Mixpanel says the value is:undefined

An example from mixpanel web is:

mixpanel.track("Video Play", {"age": 13, "gender": "male"});

So, I guess the problem is I'm doing a wrong call or with wrong type of arguments.

Solution

your problem is, that when you pass the you create the property object, you don't create a parameter, taken from your property name, but rather a property named property. If you debug your code, you can check, that a parameter property is passed to your mixpanel.track function.

To do what you want, you have to use an other syntax.

public native void trackComplexEvent(String eventName, String property,
        String value)/*-{
    //create the property object you want to pass
    var propertyPassed = {}     
    // set the value you want to pass on the propertyPassed object
    propertyPassed[property] = value;

    //call your function with the argumetn you want to pass     
    $wnd.mixpanel.track(eventName, propertyPassed);
}-*/;

I tested your code, by creating a JavaScript funciton on my site:

window.mixpanel = {
            track : function(eventName, props) {
                alert(props.age);
            }
        }

and calling it with

    trackComplexEvent("hallo", "age", "13");

The alert was '13'

BR, Stefan