I would like to know how to integrate ionic v1 with google analytics
and to track specific screens.
For example, I want to have google analytics code UA-XXX and to track specific navigation (tab1, tab2, etc)
This question is too vast so I am not going to cover each and every detail but here is how you can integrate Google Analytics to your ionic v1 app's Screens/Tabs.
For this two things are important, first is life cycle events of Ionic Views and second is Google Analytics's cordova-plugin-google-analytics.
For each Tab there should be one controller and in that controller add the Ion View's life cycle events as per your tracking requirement. Below are the available events:
FIRST TIME VIEW INITIALIZATION
View 1 – loaded
View 1 – beforeEnter
View 1 – enter
View 1 – afterEnter
TRANSITION FROM ONE VIEW TO ANOTHER
View 2 – loaded
View 2 – beforeEnter
View 1 – beforeLeave
View 2 – enter
View 1 – leave
View 2 – afterEnter
View 1 – afterLeave
But I think you may meed only below two events mainly, enter and leave:
$scope.$on('$ionicView.enter', function(){
// Your Google Analytic event code of your choice
window.ga.startTrackerWithId('UA-XXXX-YY', 30);
});
$scope.$on('$ionicView.leave', function(){
// Your Google Analytic event code of your choice
window.ga.startTrackerWithId('UA-XXXX-YY', 30);
});
References:
Check this link for detailed information about usage of Google
Analytic APIs:
https://www.npmjs.com/package/cordova-plugin-google-analytics#javascript-usage
Nice working example of Ionic View life cycle events:
https://codepen.io/anon/pen/eKBgVg
Simple article to explain ionic views life cycle events:
https://www.gajotres.net/understanding-ionic-view-lifecycle/
Related
I am creating a function that calculates a page loading time for each page of my Ionic 3 App (I use lazy loading). However, I am currently stuck in issues:
When does the page start creating HTML?
When does the page finish creating HTML?
When does the page complete downloading all resources on the page (image, etc …)?
Can anyone give me advice?
One thing to look at is https://blog.ionicframework.com/navigating-lifecycle-events/ this contains the ionic life-cycle eg. ionViewDidLoad(): Fired only when a view is stored in memory. This event is NOT fired on entering a view that is already cached. It’s a nice place for init related tasks.
Ionic 3's pages are also angular components so I'd imagine the another thing to look at is the component hooks. These methods are fired when in the stages of the component life cycle.
https://angular.io/guide/lifecycle-hooks
https://www.intertech.com/Blog/angular-component-lifecycle/
eg. ngAfterViewInit(){ stopTimer() } //this method is fired once Angular initializes component and child component content
To achive what you want you could have a provider that both pages link to. When you change page start a timer and stop it using ngAfterViewInit() or other more appropriate hook.
Can anybody explain what are the difference between Event Bus and Router in SAPUI5?
Please help me in which scenario we have to use Router or Event Bus.
Let me try to explain you in a shopping scenario.
Suppose you are browsing the "MyshopWebsite" shopping website. Let's think it is developed using SAP UI5 library.
Major Functionlity :
Infinite scrolling on Home page ( Loading,say, n items first and then 10 more items as soon as you hit bottom.
Click on product and you can see its details in separate page.
Suggestions Shown on side panel based on your selections.
Scenario 1: Now, on home page you are scrolling. As soon as you hit bottom, new products are loaded. Note :
Here, we need to show more information on same page. We are not navigating or changing the browser HASH.
Router is used to navigate to a different page than the current one and pass required data. So, I will not use it here. I want to be on same page and not change browser URL and its current hash.
So, how do I show more products after reaching the end of page ? Check the browser end of Page ( through JS) and load more. Many ways are there.
So, let's think there is Messenger, X, whose job is to tell the world : Hey, he reached end of page !! He reached End of Page. We need more Products!!!
And there is a listener, L, who keeps listening to our Messenger, X. When he hears him, he sends him new data.
So, lets convert it to technical term.
function initMethod() {
var eventBus = sap.ui.getCore().getEventBus();
eventBus.subscribe("homePage", "reachedEndOfPage", handleEndOfPage, this); // Listener L
}
function reachedEndOfPage() {
var eventBus = sap.ui.getCore().getEventBus();
eventBus.publish("homePage", "reachedEndOfPage"); // Messenger X
}
function handleEndOfPage() {
// Ok.. lets send more data
}
Scenario 2 : Clicked on a Product. Simple, move him to a new page. Show the information of the page. Change Broswer URL and hash so it can be bookmarked.
What to choose: Router.
Our SAPUI5 router is based on Crossroads JS. They say Crossroads is :
It is a powerful and flexible routing system. If used properly it can reduce code complexity by decoupling objects and also by abstracting navigation paths and server requests.
Router used for Navigation.
But can event bus be used here for Navigation. How ? In press event of Product, Publish event (saying 'Product Clicked'), then create a handler who will subscribe for 'Product Clicked' event and then Fire App.navTo or Router.navTo.
So, difference is Event bus creates listeners for ANY TYPE OF EVENT which you can fire manually.
Where as Router is used to NAVIGATION and is ONLY LISTENING TO BROWSER HASH changes.
Scenario 3 : Now, I hope it gets clear. I'm NOT NAVIGATING but I want to listen/react to every time user clicks a Product.
So, I will create a Messenger, 'Click', who will shout(Publish) when I click on any Product. And a Suggestion Listener, say Listener 'Suggest', who will be listen/react to Published events by our Messenger :'Click'.
I hope it helps you. Let me know if you still have confusion. Will try to add more info as needed.
With the router you can navigate between different targets. One target consists of one or two views.
Say you have a list in view A and a form containing the details of a list item in view B. When pressing on a list item in view A you can navigate to your detail view B using the router.
With the event bus you can communicate between different active controllers.
Say you have a split app with a master and a detail view. You can fire events in your master view and listen to these events in your detail view (and vice versa)
I need an event of page which is backed.
IonWillEnter or ionViewDiEnter events aren't fired when page is backed.
Ionic framework seems to show page simply when a back button is clicked.
Would you like to teach me?
Sorry for my poor English.
Thanks
For your info.. Ionic 2 lifecycle method
ionViewDidLoad - works the same way as ngOnInit, fires once when the view is
initially loaded into the DOM
ionViewWillEnter and ionViewDidEnter - hooks that are available before and after the page becomes active
ionViewWillLeave and ionViewDidLeave - hooks that are available before and after the page leaves the viewport
ionViewWillUnload - is available before the page is removed from the DOM
You should use ionViewWillLeave / ioniViewDidLeave to track the page back/close event
According to https://ionicframework.com/blog/navigating-lifecycle-events/
ionViewWillEnter: It’s fired when entering a page, before it becomes the active one. Use it for tasks you want to do every time you enter in the view (setting event listeners, updating a table, etc.).
ionViewDidEnter: Fired when entering a page, after it becomes the active page. Quite similar to the previous one.
So you can use any of above. I prefer ionViewDidEnter more in this scenario so screen render faster if you call any API.
I can't wrap my head around this issue I've been experiencing, or perhaps I'm missing some crucial point here. I jotted down this sample app on ionic playground, it is of course a simplified version of my app.
Basically I have a tabbed layout with two views which share a common datasource of items (in my app it's a sqlite db table); the first view displays items in a certain state whereas the other tab display the remaining items (in my example I've used the TODO list metaphor).
Each tab has a child state which I refer to as 2nd-level state (assuming level 0 is the abstract tab state. These two 2nd-level states are defined separately but share a common controller and template.
I cannot for the life of me understand why these two states aren't being navigated to when I click on a list item from either of the two lists (1st-level state views).
NOTE: In the ionic playground no error is thrown in the console, but I can't quite tell what is going on in terms of state URLs. But when I test my actual app (where the problem is the same) in a browser I can see the URL changing to #/tab/tasks/xxxx or #/tab/completed/xxxx but template is not loading. Upon googling I came across several SO questions:
Ui-router URL changes, nested view not loading
In Angular ui-router nested state url changes,but template is not loading
UI-Router: URL changes, but view is not loaded
Angular Router - Url changes but view does not load
URL changes but view does not hcange
Angular UI-Router : URL changed but view isn't loaded
but the answers provided therein haven't worked for me (tried, as per the last one I listed, to add the # sign after the view name in the child states, but to no avail).
Kinda stuck, would really appreciate some input! Cheers.
Managed to get it working following this answer; I had previously tried simply appending the # character after the view name in nested states but it turns out the trick was to append #tab, where tab is the name of the top-level abstract state. I updated my fiddle on ionic playground. Cheers to you all.
In the iPhone application I'm developing, I have a need to return the user to the previous screen they were using when, for instance, the application was interrupted by, say, a phone call.
The application is driven by a navigation controller, and the user may be several layers deep into the application. As such, I think that I need to traverse the navigation controller logic to bring the user to the point that they were previously at, with all return navigation logic n place.
I'm comfortable that I can force the application to navigate down to the required level through code, but I would like to hide the screen switching and animations that would occur while this is going on, thus presenting the user with (apparently) a direct path to their last used screen, rather than showing them the underlying navigation that's occurred.
Could somebody please point me to some method of suppressing the intermediate displays?
Does anyone have other methods to perform this sort of task?
Thanks in advance for all suggestions.
I suggest you take a look at the Three20 project which contains a feature called "URL-based navigation", which might help you, since you only should to store the URL of the current visible view controller, and restore it when the app resumes after the phone call:
TTNavigationCenter is for those grizzled old web developers like myself who want to organize their app by "pages" which can be displayed by visiting a URL.
Your view controllers can simply register URL patterns that they handle, and when those URLs are visited the controllers will be created and displayed. You can also register generic actions that are called when a URL is visited.
TTNavigationCenter also persists and restores the full path of navigation controllers and modal view controllers, so your users can quite the app and come back exactly where they left off.
(source: Three20 Github project)