Dynamicaly updating SEO data for SPA without history API - vue.js

We are developping a SaaS for our customers in the shape of an SPA with VueJS.
We would like our app to appear in the google results on the search of an item. So if you search for the term "item of some brand" in google, our app is returned because you can buy that item on it. Preferably, returning the corresponding item url.
For infrastructure reasons, we cannot rely on the history API for our links in the app. So the google bot cannot crawl our links, which is obviously a bad start...
However, I came to an idea which we would like your expertise/insights on.
Since we are building some kind of webshop, would an initial JSON-LD containing an array of references to the products with their respective url work ?
Something like :
{
"#context": "http://schema.org",
"#type": "someType",
"itemsOrWhatever": [
{
"#type": "itemOrWhatever",
"name": "Some item name",
"url": "https://my.app.com/#/item/myItemId"
},
{
"#type": "itemOrWhatever",
"name": "Some item name",
"url": "https://my.app.com/#/item/myItemId"
},
{
"#type": "itemOrWhatever",
"name": "Some item name",
"url": "https://my.app.com/#/item/myItemId"
}
]
}
Would it also work if, for each page, we update the SEO tags in the page's head ? Especially the JSON-LD part ?

As Google and other SEs are eventually improving their crawling mechanism for SPAs, you can tackle few ways via Vue without History mode.
1) for dynamic <head> issue with routing, you can fixed with vue-meta to work with your title, description and other meta keywords along with your routing
2) via SSR such as NUXT (it's part of Vue and dynamic link friendly)
3) Google Webmaster/ Search Console might be your best friend to tackle/solve problems of SPAs as you could.

Related

Shopify: How do shopify apps place an iframe on thank you page?

I've tried searching everywhere and looking at all the docs. There's nothing that shows how apps place an iframe inside the thank you page after the checkout.
How do other apps do this?
Order status page is known as Thank you page in Shopify. From Shopify Docs
Different fields appear on the order status page depending on whether
the status is confirmed, on its way, out for delivery, or delivered.
Generally, Shopify Apps add Script Tag via API to include their JavaScript on Shopify Store. The display_scope property can be order_status or all so that custom JavaScript also loads on Thank you page.
POST /admin/api/2020-07/script_tags.json
{
"script_tag": {
"event": "onload",
"src": "https://djavaskripped.org/fancy.js",
"display_scope": "order_status"
}
}
Once the JavaScript is loaded, the app may add iframe or anything that is needed. To extend the Order status page, Shopify also provides a JavaScript function named addContentBox.
Shopify.Checkout.OrderStatus.addContentBox(
"<h2>Pick-up in store</h2>",
"<p>We are open everyday from 9am to 5pm.</p>"
);

React Native: How should I store/modify a "Subtotal" state? Redux, Local State, or Global Variable?

I'm developing a shopping cart app that needs to store and modify a subtotal value. Ideally, when a user scans a product QR code the JSON data associated with the code is imported, then the "price" attribute is added to a Subtotal state (or subtracted if the product is later removed by the user).
Here is sample JSON data:
{
"id": "1",
"title": "Pink Platform Sneakers With Velcro Straps",
"business_name": "Foo Foo Shoes",
"price": "59.99"
"size": "11.5",
"description": "Foo foo foo...",
"image": "https://foofoo.com/products/images/image.jpg",
"thumbnail": "https://foofoo.com/products/images/thumbnail.jpg"
}
The Subtotal state will need to be displayed and modified in different views: Home Page, Cart Page, Shipping Page, and Confirmation Page.
I'm currently using Redux to store the Product List state, should I use Redux to store the Subtotal as well? Or would it be better to initialize a local state variable to hold this value? Or maybe I should use a global scope variable? From what I understand global variables are frowned upon in React Native, but this seems to be the easiest and cleanest approach. Please let me know what you guys think.
I'd definitely keep the subtotal in Redux, especially if you're already using it. What you're describing is exactly the problem Redux was built to solve: handling shared state that needs to be modified and kept in sync in different parts of the app.

How see analytics about branch links created using mobile SDK

I am creating dynamic branch links using Android SDK
https://github.com/BranchMetrics/android-branch-deep-linking#creating-a-deep-link
These are then shared to social media
How do I track things like click events, installs etc as I do not believe they show up in the dashboard quick links view? https://dashboard.branch.io/quick-links
Is there a HTTP API I can use to interrogate all links I may have dynamically created that are part of the same campaign?
Alex from Branch.io here:
You are correct that SDK-generated links do not show up in the Quick Links view on the dashboard. Most SDK-created links are 'disposable' (in that they get used once and then regenerated the next time), so showing every link there individually would quickly overwhelm the UI. It is possible to override this on a link-by-link basis with the type parameter, as detailed here.
However, you can access the numbers in aggregate, segmented by campaign value, which I believe is what you want anyway. This is not currently available through the API, but you can see these statistics through the Sources report on the dashboard: https://dashboard.branch.io/sources
you must include a "type": 2 in your branch params
https://help.branch.io/developers-hub/docs/deep-linking-api
const branchConfig = {
"branch_key": environment.branchio.key_live,
"type": 2,
"data": {
"$marketing_title": (params.job_name ? params.job_name : ""),
}
};

Facebook API : feed a carousel post (multi-photos)

For some time now, Facebook offers a new carousel post (basic feeding with link and many pictures) similar to the carousel ads, but every picture's link lead to the same page, it's a basic publication with text, link, image...
An sample of what I need (it's french, but sample images speak for itself:
http://www.leptidigital.fr/reseaux-sociaux/comment-creer-publication-facebook-carrousel-5612/
and the result about this news :
https://www.facebook.com/leptidigital/posts/868750466554694
I've only find documentation about the carousel ads (payable) via marketing API.
Any body know if is possible with the standard API ? My research come to nothing...
Special thanks for every one !
Thanks to CBroe for the comment left explaining where to find this information.
If you look at that post in Graph API Explorer, you see that the images are in the child_attachment structure. And apparently, you can use that field when creating page posts, too
Facebook feed documentation
Here's an example in Python on how to accomplish what the documentation means:
import requests
post_data = {"access_token": "your access token",
"message": "whatever you want to say"
"link": "https://some.link"
"child_attachments": '''[
{
"link": "http://some.link",
"picture": "https://app.replypro.io/media/wb3.jpg"
},
{
"link": "http://some.link",
"picture": "https://app.replypro.io/media/wb3.jpg"
}]'''}}
requests.post("https://graph.facebook.com/v5.0/<your page id>/feed", data=post_data)

Automatically progress to next page via clicking? (Automation)

I have a job that requires a lot of tedious clicking throughout a website as part of the workflow. In one step, I click a link, go to the page, then ALWAYS click a link on that page. I wish I could just go to that link directly, as it would greatly speed things up.
Is there a way to do this? Or to very quickly select the correct link?
In my case I have to click edit on an image, and then the next page is a list of ways to edit the image, and the link I click is always the same because we always use the same way to edit an image.
What browser do you use? I have some experience in writing plugins in Google Chrome, but not any other. I don't think the differences are that big really. An example with Chrome:
Create a new folder, and two new files - manifest.json and myscript.js
Code for the manifest.json file:
{
"name": "My awesome script",
"description": "Some description",
"version": "1.0",
"content_scripts": [
{
"matches": [
"http://www.mypage.com/*"
],
"js": [
"myscript.js"
]
}
]
}
Change the "matches" to the pages you want it to inject with you custom script, and change the js file to whatever file you'd like to run. I often tend to include jquery as well (to do this, simply type
"js": [
"myscript.js",
"jquery.js"
]
A way to do this with JQuery/JS could be something like this:
$(document).ready(function() {
var autoLink = $("#imageID").attr('href');
document.location=autoLink;
});
I hope this answered your question.
Edit: To load the script - open the page chrome://extensions/ and select "Load unpacked script" or something like that (I don't have it in english) and select the folder you created. Voila.