kik.metrics.enableGoogleAnalytics() not longer working properly - kik

I have implemented kik.metrics.enableGoogleAnalytics(); on my kik page and confirmed in my google analytics that "kikSend" and "kikReceive" were in fact pinging my GA account. However, in some recent tests I found those pings appear to be very sporadic and I'm not sure why.
- I have my universal GA script in my header along with my account/domain info
- the kik.metrics.enableGoogleAnalytics(); is in my script at the bottom
- I can successfully send a kik item to a friend
- my friend can successfully receive the item
But most of the time my GA account is not receiving the pings for those kikSend and kikReceieve events. Very possible that I am misunderstanding when those events are to be fired...I believe the kikSend should be fired any time that I successfully send a kik message to a friend. And the kikReceive should be fired every time the friend views the message. Accurate?
In the head tag:
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-2', 'mydomain.com');
ga('send', 'pageview');
</script>
In my script tag at the bottom (just after the app.js include...this is the first thing called:
<script>
kik.metrics.enableGoogleAnalytics();
</script>

oh my...just found out that I had a huge oversight in the GA interface. The kik.metrics. enableGoogleAnalytics() works just fine. User error on my part: My real-time view was set to "Viewing: Active Users" instead of "Viewing: Events (Last 30 min)". When the "Last 30 min" was selected, that does in fact tally up the events as expected.

Related

How to click on a deeply buried button in div classes via protractor. No id

I am trying to click a button that is buried in div classes in the code via protractor.
I am pioneering a protractor project for my work and have reached a point where I no longer know what to do. I have a button that is buried in div classes and is not allowing me to click. I have tried using mouseMove to get over to the coordinates of the button, I have tried using the className of the specific button, etc. The button does not have an id. The id is not the issue as I have tried clicking a different button, equally buried in divs, by it's id. I need to know how to get through the layers of divs in order to click the button because the rest of the tests will be dependent on it.
APPLICATION CODE:
::before
<dashboard-label>
<div class="att-topic-analysis-tabs">
<div class="att-button-group">
<button class="btn btn-default btn-lg att-close-topic ng-scope"
role="presentation" tabindex="-1"
ng-click="removeTopic(currentTopic.id)" translate>
Close Topic
</button>
</div>
</div>
PROTRACTOR TEST:
it('Closes Topic Successfully', function(){
//opens the first available topic
openTopic.click();
//checks that the URL contains 'topics' after 5 seconds
browser.wait(proExpect.urlContains('topics'), 5000);
var closeTopic = element(by.className('att-close-topic'));
//browser.wait(proExpect.elementToBeClickable(closeTopicButton), 5000);
console.log(closeTopic);
closeTopic.click();
browser.wait(proExpect.urlContains('home'), 5000);
});
As you can see, the Close Topic button is kind of buried in div classes and the standard click isn't working. Any info would be greatly appreciated
If the closeTopic locator is finding the element, but failing to click it, check to make sure there's only one matching element in the DOM, and that it's visible. My favorite way to check the DOM is just ctrl-F in Chrome inspector and paste the exact CSS that the test is using (.att-close-topic). And to check that what it's getting is visible, use
console.log(closeTopic.isDisplayed());
This can be a big gotcha in protractor, because it doesn't fail (only warns) when there are multiple matches on the page, and it defaults to the first match rather than the first visible match, which drives me nuts, because it's very rare that you want to do anything with a non-visible element on the page.
This will be partly opinion, but just to add a layer to the conversation...
Sometimes the solution to locating a troublesome element on the page is to go back to the developers and make the page more testable. I've seen testers spend hours or days crafting brilliant workarounds to access a stubborn element, and the end result was a fragile, complicated end-to-end test (and aren't they fragile enough already?).
Sometimes a 5-minute conversation with a developer can result in a quick change in the production code (e.g. add a unique ID) that avoids all that effort and yields a much better result, more stable, more simple. But this requires open conversation between the dev and test team, and a culture that values testing as a primary activity enough to make those testability changes to production code that is otherwise working just fine.
This is what you want to read to help you debug why your test doesn't work.
Also, you might want to start adopting await/async since the control flow will go away in the future.
http://www.protractortest.org/#/debugging
try this
var closebutton=element(by.css("[ng-click="removeTopic(currentTopic.id)"]"),
EC = protractor.ExpectedConditions;
Waits for the element to be clickable.checks for display and enable state of button
browser.wait(EC.elementToBeClickable(closebutton), 10000);
now use : closebutton.click();

window.ATL_JQ_PAGE_PROPS in JQgrid

I want to popup a Jira request popup, on click of an icon. This icon's css class is created in the JQ grid, in the column model. On the click of this icon, I need to open a Jira request popup.
can someone shed some light to achieve this.
EDIT - If you are talking about adding a JIRA issue collector to your own site, then this may help:
Step 1: Create an issue collector within Jira. Its a straight forward process and you can find the steps here or follow these steps:
Login to Jira
Choose > Projects.
On the left of the Project Summary page, click the Issue Collectors tab. The Issue Collectors page is displayed, listing any issue collectors that have already been set up in your project.
Click the Add Issue Collector button to open the Add Issue Collector page.
In the top section of the Add Issue Collector page, fill in the fields provided (name, description, issue type, issue reporter, match reporter, collector browser info)
In the middle section of the Add Issue Collector page (entitled 'Trigger'), specify the "Trigger text" and "Trigger style".
In the lower section of the Add Issue Collector page (entitled 'Issue Collector Form'), specify the "Template" and "Message".
Click the Submit button to save your changes.
After clicking the Submit button to save your new issue collector, a page containing code snippets is displayed. Use the code and information provided to embed your new issue collector into your web site. This is what the snippets looks like
<script type="text/javascript" src="https://your_jira_url.co.za/s/a08716ba9b893434c0030633c043df94-T/asfxnf/74002/32f7d0e4f4445b0f89b4b03188c6e1bf/2.0.23/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&collectorId=*****"></script>
Step 2: Embed code snippet to your site (Add the below code to the html page you want the Jira popup to appear on)
<!-- This is the script for the issue collector feedback form -->
<PASTE CODE SNIPPET HERE>
<!-- This is the script for specifying the custom trigger. -->
<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = {
"triggerFunction": function(showCollectorDialog) {
//Requries that jQuery is available!
jQuery("#feedback-button").click(function(e) {
e.preventDefault();
showCollectorDialog();
});
}
};
</script>
 
Step 3: Add a trigger to call up the collector popup (same html page as above)
<a href="#" id="feedback-button" class='btn btn-primary btn-large'>Report feedback</a>
When you click the button, your Jira popup will appear.
Reference:
https://confluence.atlassian.com/adminjiraserver071/advanced-use-of-the-jira-issue-collector-802592648.html

OnsenUI loads page in text, via a splitter

I have previously created a web app, and now I would like to integrate it with OnsenUI to enable my app to be used on all mobile devices as well as the web.
I am using a splitter in a toolbar which will be the header of all pages, and it will redirect the user to other pages when they click an item in it. Clicking the home item successfully redirects to the home page (index, which is already loaded correctly). However, clicking any of the other items in the splitter redirects me to the requested page, but shows the content of the file in text format instead of actually rendering the page. It looks like the following, except it's all jumbled together with no spaces:
searchForTrainer.jade:
//-ons-template(id='searchForTrainer.jade')
ons-page(ng-controller='SearchController' ng-init='showme = false; getAllTrainers();')
ons-toolbar
.left
ons-toolbar-button(ng-click='mySplitter.left.open()')
ons-icon(icon='md-menu')
.center
| Search Trainer
// ***** I cut off the rest of the file for simplicity
// ***** I should still be able to see the toolbar if the page loads correctly
Here is the content of index.jade:
doctype html
html
head
link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/jquery.datetimepicker.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/ratings.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/searchTrainerTab.css')
link(rel='stylesheet' type='text/css' href='/onsenui/css/onsenui.css')
link(rel='stylesheet' type='text/css' href='/onsenui/css/onsen-css-components.css')
block loadfirst
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js')
script(src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous")
script(src='/onsenui/js/onsenui.js')
script(src='/onsenui/js/angular-onsenui.js')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
script(src='/angular/fitnessapp.js')
script(data-require='angular-credit-cards#*', data-semver='3.0.1', src='https://rawgit.com/bendrucker/angular-credit-cards/v3.0.1/release/angular-credit-cards.js')
script(async='', defer='', src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDcVf7YAPNwa8gUsMCOZNQZA31s5Ojf2n8&libraries=places')
body
ons-splitter(var='mySplitter', ng-controller='RootController as splitter')
ons-splitter-side(side='left', width='220px', collapse='', swipeable='')
ons-page
ons-list
ons-list-item(ng-click="splitter.load('index.jade')", tappable='')
| Home
ons-list-item(ng-click="splitter.load('searchForTrainer.jade')", tappable='')
| Search Trainer
ons-list-item(ng-click="splitter.load('searchForEvent.jade')", tappable='')
| Search Event
ons-list-item(ng-click="splitter.load('trainerAddEvent.jade')", tappable='')
| Create Event
ons-list-item(ng-click="splitter.load('userProfile.jade')", tappable='')
| Profile
ons-list-item(ng-click="splitter.load('addPayment.jade')", tappable='')
| Payment
ons-list-item(ng-click="splitter.load('userSettings.jade')", tappable='')
| Settings
ons-list-item(ng-click="splitter.load('trainerSignup.jade')", tappable='')
| Trainer Application
ons-list-item(ng-click="href='/logout'", tappable='')
| Logout
ons-splitter-content(page='index.jade')
ons-template(id='index.jade')
ons-page(ng-controller='MapController' ng-init='getEvents()')
ons-toolbar
.left
ons-toolbar-button(ng-click='mySplitter.left.open()')
ons-icon(icon='md-menu')
.center
| Fitness App
//-.right
a(href='https://www.paypal.com/webapps/mpp/paypal-popup', title='How PayPal Works', onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;")
img(src='https://www.paypalobjects.com/webstatic/mktg/logo/bdg_now_accepting_pp_2line_w.png', border='0', alt='Now Accepting PayPal')
//- google maps stuff
ons-input#pac-input.controls(type='text', placeholder='Search Box')
div#map.col-md-12
ons-bottom-toolbar
.center
| Fitness App
block scripts
script.
// ***** I cut out javascript related to Google Maps for simplicity
here is the splitter load page function I am using in my angular file:
this.load = function(page) { console.log("The page is: " + page);
mySplitter.content.load(page)
.then(function() {
mySplitter.left.close();
});
};
Has anyone successfully built an Onsen app using Jade?
UPDATE
When I leave the code in html instead of jade, everything works correctly. When I convert it back to jade it shows up as text again.
UPDATE 2
Using Solution 1 from the selected answer, I realized and solved my problem with the guidance from the selected answer on my other post:
Answer
By the looks of it you seem to be using Jade on the server side.
To solve the problem I see a couple possible solutions.
Solution 1:
Make sure that whatever Onsen UI is receiving is pure HTML. You're free to use Jade, but as it stands Onsen does not have Jade bundled inside, so there is no way for it to support it out of the box. However as long as Onsen sees only html it should be fine.
The reason why the ons-template(id='index.jade') works initially is actually because when you serve the page you are actually serving actual html, so when onsen starts the contents of that template are actually pure html.
In searchForTrainer.jade it seems that you are giving it raw jade, which it does not know how to handle. You can handle this on the server side, making sure that the request for the searchForTrainer returns html. Returning jade.renderFile('searchForTrainer.jade') from the server instead of the jade file itself should solve the issue.
Solution 2:
As you noticed as long the contents are inside the initial page everything will be fine. So you could just put all your ons-templates inside the initial page.
If you want to retain your current file structure you can just do
include searchForTrainer.jade
while having an ons-template tag in the file itself. That way in the end the result will be a page with the template already converted into html.
Solution 3:
The final option is to give the raw jade files, but help Onsen understand Jade, so that it can use them properly. To do that you need to include jade.js and modify Onsen UI so that it uses it.
However since Onsen does not currently provide an official API for switching template engines whatever hack we use now might break in the future. It's possible that in the near future a feature like that may be implemented, but in order to do it now we need to wrap some of onsen's internal functions.
Here's a simple example to do it.
module.run(function($onsen) {
var old = $onsen.normalizePageHTML;
ons._internal.normalizePageHTML = $onsen.normalizePageHTML = function(html) {
return old(jade.render(html, {}));
};
});
And here's also a working Demo showing this solution in action.
Note: that demo actually checks for a comment // jade at the beginning just to be safe.
Which solution to choose?
Solution 1 - I think this makes most sense as it retains a clear separation of concerns. If you want to change the templating engine it should be handled only in one place. Onsen does not need to know what you're using on the server as long as it gets what it wants.
Solution 2 - Not the best way to solve the problem, but it may be the easiest to use if you just want things to work. One minus is that with it you would load all the templates at the beginning, which may not be very good.
Solution 3 - While this solution can work I would suggest avoiding it as handling jade on the frontend would result in poor performance. It's could be an option if you actually decide not to rely on the server.

Full Page Cache in CakePHP

I have one search page with some search criteria. From that page I going to some other page and clicking browser back button means the page was refreshing. Actually I page should not be refresh instead on refreshing the page should display with some result with out refreshing.
Kindly give me suggestions.
From you question i understand that you need navigate to some other page without refreshing the page as like google.
But its not done using cache. There are function called pushState() and onpopstate() to make this.
How it will work?
With the function pushState(), we can able to change the url of a page without refreshing the page. And the previous url will automatically added to the history. So we need implement a single page to load the content of the page using ajax based on the url.
The function onpopstate() will be triggered when a url is changed using pushState().
Example:
http://html5.gingerhost.com/
The above page uses the above function. That page consist of 4 links (Home, Seattle, New York, London). When we click on those link a new url will be loaded without refreshing the page.
<title></title>
<ul id="menu" class="clearfix">
<li class="current">Home</li>
<li>Seattle</li>
<li>New York</li>
<li>London</li>
</ul>
<article>
<h1></h1>
<div id="image"></div>
<div id="articletext"></div>
<div class="clear"></div>
</article>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
//Capture the click on the links
$('#menu a').click(function(e) {
href = $(this).attr("href");
// Call a function to load the content based on the url
loadContent(href);
// HISTORY.PUSHSTATE add the url to the history
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
console.log("pathname: "+location.pathname);
// Load the content on clicking back or forward using its url
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT PROVIDED BY content.php
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// output provider by content.php like {"title":"Seattle - Part of a demo for #ProSEO","h1":"Seattle","article #articletext":"<p>Seattle is the northernmost major city in the contiguous United States, and the largest city in the Pacific Northwest and the state of Washington. It is a major seaport situated on a narrow isthmus between Puget Sound (an arm of the Pacific Ocean) and Lake Washington, about 114 miles (183 km) south of the Canada - United States border, and it is named after Chief Sealth \"Seattle\", of the Duwamish and Suquamish native tribes. Seattle is the center of the Seattle-Tacoma-Bellevue metropolitan statistical area--the 15th largest metropolitan area in the United States, and the largest in the northwestern United States.<\/p><p>Seattle is the county seat of King County and is the major economic, cultural and educational center in the region. The 2010 census found that Seattle is home to 608,660 residents within a metropolitan area of some 3.4 million inhabitants. The Port of Seattle, which also operates Seattle-Tacoma International Airport, is a major gateway for trade with Asia and cruises to Alaska, and is the 8th largest port in the United States in terms of container capacity.<\/p>","#image":"<img class=\"thumbnail\" alt=\"\" src=\"seattle.jpg\">"}
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES(values will be set)
$.each(json, function(key, value){
$(key).html(value);
});
});
}
</script>
As like above you can able to render the content and provide a json response and pass it to the jquery and you can able to achieve that.
Some suggestions:
Use session to store search parameters, when user back to search page check if session exist. If exist use that parameters to find data again or load cached query results.
Better options, change form request type from POST to GET method. So when you submit search form, your url looks like:
http://myhost.com/search?q=my+term&param1=zzz&param2=&param3=
Use this url parameters to find data again. This option allow you to share search criteria with other users.
Create the search values to create a unique key e.g. with md5. Then store the result with this key to your caching system ( file, memcached whatever).
So if a user should run the same search again fetch the result directly from cache without bothering the db.
It could look like this:
$sCacheKey = md5(json_encode($this->data));
$result = Cache::read($sCacheKey, 'short');
if ($result === false) {
$result = $this->YourModel->find(conditions etc....);
Cache::write($sCacheKey, $li, 'short');
}
Or do you want to cache your complete rendered page?

How to do a 'HTTP-POST' with HyperlinkButton

I have a silverlight application where users can type in a SQL-query in the application, then the server returns the query result as an Excel file.
Users click on a download link, which is linked to a HttpHandler in the server which generates the excel file. After some research[1] I found out that using the HyperlinkButton control is the most robust way of providing links to file without the hassles of browser's popup security settings.
I need to send the SQL query, which can get quite long, as a parameter to the HttpHandler.
I can't include it in the url as querystrings(HTTP GET) due to size limitations.
Is there a way to do a 'HTTP-POST' with HyperlinkButton?
[1] Browser.HtmlPage.Window.Navigate is blocked but HyperlinkButton isn't - why?
In that case I think you can try sending a get/post request using jquery.
Post request API documentaton: http://api.jquery.com/jQuery.post/
Get Request API documantation: http://api.jquery.com/jQuery.get/
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function f(){
$.post("http://www.w3schools.com/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
}
)};
</script>
</head>
<body>
Send an HTTP POST request to a page and get the result back
</body>
</html>
Instead of Using Links Why just you make the buttons look like Links instead. One perfect example of buttons been shown as links is the Facebook. It has several number of buttons in a post, but all of them are shown as links. Here is the Css Code that what it makes a button look like a link. You can always change the look and feel of the link(perhaps Button).
Here the css code for the button.
button {
background:none!important;
border:none;
padding:0!important;
/* Do all your Styling to the Button here. It will look like a link instead. */
}
Button HTML Code.
<button>Your Button Here.</button>
Hope that Solves your Problem. Thank You.

Resources