JQM & SPA support?

Avatar

Avatar

sunyzc

Avatar

sunyzc

sunyzc

15-10-2015

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.

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

sunyzc

Avatar

sunyzc

sunyzc

15-10-2015

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.

Answers (9)

Answers (9)

Avatar

Avatar

AlexisCazes

MVP

Avatar

AlexisCazes

MVP

AlexisCazes
MVP

15-10-2015

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.

Avatar

Avatar

anurban

Employee

Avatar

anurban

Employee

anurban
Employee

15-10-2015

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é

Avatar

Avatar

sunyzc

Avatar

sunyzc

sunyzc

15-10-2015

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.

Avatar

Avatar

AlexisCazes

MVP

Avatar

AlexisCazes

MVP

AlexisCazes
MVP

15-10-2015

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>

Avatar

Avatar

sunyzc

Avatar

sunyzc

sunyzc

15-10-2015

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.

Avatar

Avatar

sunyzc

Avatar

sunyzc

sunyzc

15-10-2015

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.

Avatar

Avatar

AlexisCazes

MVP

Avatar

AlexisCazes

MVP

AlexisCazes
MVP

15-10-2015

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

Avatar

Avatar

sunyzc

Avatar

sunyzc

sunyzc

15-10-2015

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.

Avatar

Avatar

AlexisCazes

MVP

Avatar

AlexisCazes

MVP

AlexisCazes
MVP

15-10-2015

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