JQM & SPA support?

[sunyzc]

Hi all,

1. Does Omniture support jQueryMobile and Single Page Application, and how to do it?

I already have omniture and implemented the trackAction, trackState, and tracktime in iOS native app.

For web SPA, I can only do the trackAction, but to track state, In theory I should put some javascript code snippet on each apge I want to track, but there is only one page for the whole web app. How to do it?

2. Sometimes the request for trackAction will be canceled, and I can't get the specific reasons(This issue has been updated but still haven't got an solution).

We have a link like below:

<a href="mailto:test@gmail.com&subject=test" onClick="var s=s_gi('wfbmobileappdev'); s.linkTrackVars='contextData.wfi.shareType,contextData.wfi.shareEvent'; s.contextData['wfi.shareType'] = 'Test'; s.contextData['wfi.shareEvent'] = '1'; s.tl(this,'o','Sharing Action')">Test</a>

we invoke the email client by using the syntax href="mailto:...", but this will cause to cancel to send the trackAction data and we haven't known the specific reasons. You can find there are 2 request when clicking the menu item 'Article Feedback', the first request is used to send data to omniture server but it's canceled:

[img]2014-02-12_142618.png[/img]

Once the request is canceled, it will not send any request again even we do anything.

But if I modify the href="gmmmailto:..." into href="#" for testing, there will be only the measurement request and the Status is 200(OK).

[img]2014-02-12_143422.png[/img]

[update-02/20/2014]

Thank Alexis Cazes, I've got an progress for the 2nd issue. There are 2 reasons:

1. I don't know why there are different between putting the functional code into onClick attribute and encapsulating a new method. It can't work by putting the code into OnClick attribute, but work well by encapsulating a new method.

2. I set some attributes(s.trackDownloadLinks, s.trackExternalLinks, s.trackInlineStats) false to prevent the default track link before(To know why to do this, please refer the 3rd issue). So if I reset these attributes true, and the image request will be sent successfully, but it will send request when I click any link and this is not what I want to see. So I get a new problem below:

3. How to  prevent the default click event monitor in AppMeasurement.js?

When I include the AppMeasurement.js & VisitorAPI.js into the web app, no matter what link to click, it still send an image request to omniture server and this is not what I want to see, I just want track only one of them by manual. I thought the solution is to set some attributes(s.trackDownloadLinks, s.trackExternalLinks, s.trackInlineStats) false. But If I do this, it will re-back to the 2nd issue...

PS: I've modified these 2 files according to the JavaScript Implementation Steps.

[update-03/04/2014]

Thank André, I've got the solution to prevent the default click event monitor according to your advice. I'm using s.linkInternalFilters="javascript:,http" to prevent all the click event, document.domain is not enough in our case, and it will also prevent the event for sending email.

So the issue 2# and 3# have been fixed.

Thanks Alexis Cazes and André again.

Could anyone can help me to resolve the first issue? Thanks very much.

[Alexis_Cazes_]

Hi,

Are you using the legacy javascript (H. version of the code) or the new Appmeasurement library ? 

The image request might be failing because the image request does not have enough time to be sent before the next page or pop up window is opened.

Either use a timer to wait 500 ms before opening the new window or use the code here : https://microsite.omniture.com/t2/help/en_US/sc/implement/index.html#The_stl_Function__Link_Tracking

For the timer you might want to do the following:

1.prevent default

2.send adobe image request

3.wait 500 ms (I usually use 700ms)

4.Open or do action

Best regards.

Alexis Cazes

[anurban]

Hi,

you may check our internal url filters variable.

I tend to use s.linkInternalFilters="javascript:,"+document.domain

If this variable does not contain your current domain there will be an extra onClick event handler.

If this does not work - start putting console.log()'s into the function s_doPlugins.

Good luck!

André

[sunyzc · Accepted solution]

Thank André,

I've got the solution to prevent the default click event monitor according to your advice. I'm using s.linkInternalFilters="javascript:,http" to prevent all the click event, and document.domain is not enough in our case.

[sunyzc]

Thanks Alexis Cazes,

    I'm using the new Appmeasurement library(1.2.2), 

    For the timer, Although it's an effective solution, I think it shouldn't implemente the analytics by sacrificing the UX.

    For the either way, is there anything difference between my code and that?

Anyway, thank your suggestion.

[Alexis_Cazes_]

Try the following :

<a href="mailto:test@gmail.com&subject=test" onClick="var s=s_gi('wfbmobileappdev'); s.linkTrackVars='contextData.wfi.shareType,contextData.wfi.shareEvent'; s.contextData['wfi.shareType'] = 'Test'; s.contextData['wfi.shareEvent'] = '1'; s.tl(this,'o','Sharing Action',null,'navigate');return false">Test</a>

Let me know if it works

[sunyzc]

Thanks Alexis Cazes,

    I've modified the tag a according your code, but it seems like there are no any change and still be canceled. Even I put the "alert(1)" after the method s.tl(), then to click the link and it pupop an alert as expected, the status is still pending untill I click the OK button on the alert dialog.

[Alexis_Cazes_]

I tested the code a bit more and was able to make it work by doing the following :

In the html page I put : 

<a href="mailto:test@gmail.com&subject=test" onClick="trackClickInteraction('Sharing Action')">Test</a>

And in the Appmeasurement.js file I put the following function just below the s_doPlugins() function :

function trackClickInteraction(name){
var s=s_gi('wfbmobileappdev'); 
s.linkTrackVars='contextData.wfi.shareType,contextData.wfi.shareEvent'; 
s.contextData['wfi.shareType'] = 'Test'; s.contextData['wfi.shareEvent'] = '1'; 
s.tl(true,'o',name,null,'navigate');
}

The image request is sent successfully.

Please let me know if it works.

[sunyzc]

Thank Alexis Cazes very much,

I find there is no difference between yours and mine. I also tried your code and the image request is still canceled, unless I put "#" on the href attribute.

I've found why it's canceled but still can't get the solution. Because I set some attributes(s.trackDownloadLinks, s.trackExternalLinks, s.trackInlineStats) false to prevent the default track link. So if I reset these attributes true, and the image request will be sent successfully, but it will send request when I click any link and this is not what I want to see. So I get a new problem...

Besides, I don't know why there are different between putting the functional code into onClick attribute and encapsulating a new method. It can't work by putting the code into OnClick attribute, but work well by encapsulating a new method. Anyway, I've known what's the cause for the 2nd issue.

[Alexis_Cazes_]

You could also try the following :

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script language="JavaScript" type="text/javascript" src="VisitorAPI.js"></script>             <script language="JavaScript" type="text/javascript" src="AppMeasurement.js"></script>     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>     <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> <body> <script> $(document).ready(function(){ $("a").click(function(event) { event.preventDefault(); var s=s_gi('edirocks'); s.linkTrackVars='contextData.wfi.shareType,contextData.wfi.shareEvent'; s.contextData['wfi.shareType'] = 'Test'; s.contextData['wfi.shareEvent'] = '1'; s.tl(true,'o',name,null,'navigate'); var value = $(this).attr("href"); setTimeout(function(){window.location=value},700);         }); }); </script> <script language="JavaScript" type="text/javascript"><!-- /* Get the AppMeasurement instance */ /*var s=s_gi("INSERT-RSID-HERE")*/ /* You may give each page an identifying name, server, and channel on the next lines. */ s.pageName="New appmeasurement test" var s_code=s.t();if(s_code)document.write(s_code)//--></script> <a href="mailto:test@gmail.com&subject=test">Test</a> </body> </html>

[sunyzc]

Yes, It's a available solution and it will delay 700ms.

But,

1. It will sacrifice a little UX.
2. If the network is not well, 700ms is not enough and still be canceled. Once canceled, it won't request any more when I click next time.

Thank you.