I am using a branch.io banner via the branch.io SDK on a site that is a single page app.
Branch has a feature where it lets you specify the urls where the banner will appear.
The problem is because my site is a single page app, branch appears to fail to recognize page changes, and which page is actually being viewed.
is there any way to configure branch smart banners to slow on specific pages when using it on a single page app, or am I out of luck?
Jackie from Branch here.
Here's how we support single page web apps.
Close the current Journey: https://docs.branch.io/pages/web/journeys/#closing-a-journey-programmatically
Trigger to show the Journey: https://docs.branch.io/pages/web/journeys/#trigger-a-journey-to-show-by-firing-an-event
Set deep link data(https://docs.branch.io/pages/web/journeys/#deep-linking-from-the-banner-or-interstitial) - this is only required if custom key-value pairs are used. With Canonical URL, Branch handles this at its end.
As a point of reference, feel free to take a look at our example single app, using the above features: https://mikekwon36.github.io/owners_testpage
Hope this helps!
Related
Just finished learning Vuejs and after visiting a few websites that use Vuejs like;
a) https://coderstape.com
b) https://www.thenetninja.co.uk
c) https://laracasts.com
I noticed that by navigating around the websites we by clicking on navbar links and some other links then the pages refresh and I haven't been able to find out the reason online. Could someone kindly explain what's happening in that? Doesn't it go against the purpose of SPA?
For example the last site you specified: https://laracasts.com.
On its main page there is a white button "BROWSE COURSES". If you open Chrome DevTools panel(look at the picture with explanations), go to tab "Networks" (1) and then click on this white button, you can see GET request to "series?curated" (2). If you open its details, you can see that as response, new page is received in the form of an HTML code (3), not JSON for example, as is usually the case in SPA.
Also, if you look at what programming language is used on this site, for example, using service https://whatcms.org/?s=laracasts.com, you can see that this is a PHP, namely Laravel.
From all this, I can make the assumption that they use Vue.js only partially, maybe in several components, but the site navigation itself is presented in the form of traditional static pages, which is why the page reloads.
Also, for example, if you take a look at this website https://www.spendesk.com/, you can see that they use Vue.js+Nuxt.js, as well as Node.js, as indicated by service whatcms.org, and if you try to navigate to various pages on this site, you will see no page loading. I can say that this site is a true SPA in the form in which you mean it.
I heard that you can do a SPA with a Laravel backend, but I think that's another story.
I am trying to write a Shopify application and I want to add a section to the product page when the store owner installed my app. I tried this by adding a custom script tag in the shop template and this tag will load and inject my desired HTML into the page. It's work but it needs to force the store owner to change the product page template and its not user-friendly.
I see some apps in the Shopify app store that can change the product page after you install them without needs add any part to the product page template. How they do this work? I can't find the correct way in the Shopify documents.
You can change the Shopify theme of the shop using The API for Assets:
However as drip mentioned this is not a good idea:
If you change the theme auto-magically via code, you are looking for trouble. A lot of things can go wrong - simply you cannot cater for all themes and their changes over time! So you could possibly leave a broken page after the change. The e-shop owner won't be impressed! Actually a lot of the 1* reviews of apps are for that reason!
What would happen if the eshop owner removes your app? He won't know what code to remove.
So, most apps ask the user to add the app code. They provide detailed instructions of course.
Fyi, another problematic approach is the following:
Some apps may attempt to change the DOM "on the fly", by first locating an existing DOM element (a lot of theme-specific if statements to do that with any degree of success) and, then insert the app's DOM elements.
That's very messy and problematic as well, but at least you do not risk ruining the owner's theme files. In the worst case he can uninstall your app and he 'll be ok.
I'm creating a SPA app using Durandal and I would like to include a credit card payment facility. The guys that I'm looking at requires you to give return URLs to success, cancel and a view other pages, is that possible?
To me it would be breaking the 'single page' part of SPA, but is it possible? Could I do it all in a window?
Disclaimer: I don't know Durandal, but you would solve this in an SPA using either "hashbang URIs" or actually re-serving the SPA in your webserver for the requested return URI and adjusting the content using the same technique as hangbash URIs but using history.pushstate/history.popstate instead, see here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A more general article from Google is available here that covers the same principle: https://developers.google.com/webmasters/ajax-crawling/
This "works" because SPAs are SPAs only in that the browser requests a new HTML document from the server once (or in your case, twice), the SPA should still be updating the history and address-bar state of the UA as the user navigates the application, just as though it were a regular multi-page application.
A great example of this is GitHub's source navigator: Try here ( https://github.com/angular/angular.js ) and navigate the repository, observe that the contents of the file-listing change as does the address bar, but your browser doesn't reload the whole page... yet if you copy+paste the (modified) address bar address into a new browser window, you get the same page back.
I looked into doing credit card processing from a SPA and the best option I had found was Stripe. They supply a javascript file that looks like it would work, I never implemented it on my project due to time constraints so I can't confirm that it works but it looked very promising.
IFRAMEs are quite good for this sort of thing. You can use jQuery to hook an event handler to the page load event and this will tell you when the other end has responded. Load the 3rd party page into the IFRAME and serve response pages on the URLs you provide to the service provider. As mentioned by others you can use routes to identify the response pages. The IFRAME will stop the round-tripping from mucking up your application state and in fact it is possible to put script in your response pages that dot-notates its merry way up the DOM and into your app.
I've added a contact button on the title bar but I can't get my contact form to display. Has anyone done this?
First of all, the contact button Module field should point to a new Activity module like VerticalContainerActivity which should contain an HtmlView module in its body. This HtmlView displays your contact page - put the address in its ContentUrl. Most of these steps are identical to what you'll find in this tutorial.
You can see an example of this in the diamonds sample app. Create a new app from the diamond store starting point and see how the contact button is implemented there.
The second important point to remember is that you shouldn't use regular store URLs in your Appixia app. When the user sees them, they would see your Prestashop theme with all the navigation and this will be very confusing inside a mobile app. Instead, make a mobile friendly version of your contact page which doesn't use your Prestashop theme and only shows the contact info content.
Using the Prestashop Contact Form in your Appixia app:
I'm not sure this is a 100% good idea in terms of usability. I don't recommend using a web form for contact in a mobile app.
A mobile phone is a communication device. It is has special integration for making phone calls and sending emails - I really recommend you use these methods instead. Look at the HTML source of this example to see how simple it is to integrate (it's just a link in your HTML).
In order to encourage your users to contact, you need to ask them for as little info as possible. Your website contact form makes your users type in their email address. If they email you directly through their device (with a mailto: link), their correct email will be filled automatically. Same with making a call, when they tap on the link, the number will be dialed automatically for them.
If you really insist on implementing the Prestashop contact form, this will require some Prestashop php games. You should find the contact form controller in the Prestashop source and create the same form (in php or hardcoded HTML) without your website theme. It will be a little annoying because after we submit the form, we also need to make sure the confirmation message is also displayed without your website theme.
i developed a radio stations widget (see it at my site). the problem is, i dont know how to make it persistent same like on the http://josephbeeson.com/gwapdemo/gwap.html . it's like facebook chatbar which not reload when navigate to any page. i have try n look for the demo codes but still not understand. please give step by step tutorial. i want to implement it on my social website http://www.heypy.com.
The whole page does not get reloaded, the new content is just loaded via AJAX and displayed within the current document.
To make it look to the user like he’s navigated to some other URL, the address bar content is updated using the HTML5 History API.
please give step by step tutorial.
Happy to give you the relevant keywords, so you can do research on them yourself. But won’t provide a private tutorial here, that’s not the purpose of this site. Thanks for your understanding.