How can I load the firebase data before Google sees the content?
For example, retrieve data and render it with h1, p and other html tags, but my problem is SEO. I've been watching Gatsby JS but I don't need something like that.
On Firebase, the SEO is called App Analytics and it's possible to disable it on your database. However, you can only disable it generally and not load the data before it starts, once it's activated, it's always working, unfortunately.
I would recommend you to raise a Feature Request for this to be implemented here, so Google can check for further development.
Besides that, in case you want more information about how this is possible, you can check the below documentation.
Disable Analytics data collection
In addition, this question from the Community - How to use Cloud Functions for Firebase to prerender pages for SEO? - there is a case that I believe might help you, since it's about pre-rendering content. This is for another type of use case, but I believe it might help.
Let me know if the information helped you!
Related
I have in my .env fiel the field
REACT_APP_MEASUREMENT_ID=G-XXXXXXXX
I am using react-gtm-module and Google Tag Manager 4 (and still also Universal analytics) and I initialize in my App.js:
useEffect(() => {
TagManager.initialize({ gtmId: 'GTM-XXXXXX' });
analytics.logEvent('screen_view', {
firebase_screen: 'Home',
firebase_screen_class: 'MainPage',
})
}, [analytics])
However, the analytics object comes from firebase.analytics(app) that I initialized in the firebase.js file... has that analytics object from fire/analytics anything to do with the google tag manager or the datalayer object, or with google analytics at all or is that something different?
I am using that analytics object in my components just as the datalayer object, and it also gives me the same kind ob datalayer object in google tagassistant, e.g:
setGameFinished(gameFinished => (gameFinished = true))
analytics.logEvent('game_finished', {
score: `${correctAnswerCount} of ${quizData.length}`,
})
gives me dataLayer.push({event: "game_finished", eventModel: {score: "2 of 4", send_to: ""}, gtm.uniqueEventId: 23}) in google analytics tagassistant (debug window).
But is it the same? I think I might have messed something up there ;). Can someone explain me the difference?
Difference between Firebase and GTM? First of all, Firebase is an SDK. To be used in native apps. JS-driven apps (except react native, I believe) are supposed to use gtag.js. Gtag is a way to track data directly to GA4. And for Universal analytics, they use the analytics.js lib.
So, again:
Firebase SDK was meant to track apps and that data goes to the Firebase service. Soon after introducing firebase, Google realized it wasn't a very comfortable thing to use, so they rolled out GA4 with a very similar to Firebase data model, and since the data model is so close, they made it easy to sync Firebase instance with a GA4 instance. Also, they decided not to bother with a new SDK for the native apps and went with firebase for ga4.
Google Analytics (a slightly different thing from firebase) has had its history of bad architectures as well, but now we have two analytics libraries, analytics.js that is meant to be deprecated in a year or so with Universal Analytics and ga4 that is meant to replace it despite all the bugs it brings. Ga4 uses the gtag.js lib. But that's only for web. This will only work in apps that allow unsecure external scripts execution, so, like, browsers. Electron-driven apps, too.
Firebase SDK allows you to send events directly to your Firebase endpoint and that makes the data available for analysis or further ETL.
Now, GTM, unlike the other libs, is not meant to just send the payloads to the endpoint. It's meant to add a middle man. Basically, GTM deploys a collection of user logic, so in GTM users can grab whatever you're pushing in the dataLayer array, rearrange it, change it and send it to wherever. And wherever can be anything, it can be ga4, can be ga ua, can be facebook or any other endpoint. GTM, as any other tag management system ultimately executes custom javascript on pages where it's loaded.
There's also GTM for native apps. And that thing is largely useless. It can't really do anything and requires being loaded on every build. It also loses the ability to execute code, so no hotfixing or independent tracking implementation is not possible. Honestly, mobile GTM is about as helpful as the GTM loaded within the no script tag. Native GTM does not provide enough use to justify the spread of business logic and added dependency. It was made just so that Google could claim that it's cross-platform. Same about the no-script: just for the company to be able to claim that it doesn't depend on JS completely.
Good, now that we're done with the context of what's happening, if you're using react for front-end, then you don't need anything except GTM. GTM is able to load all the libraries it needs for tracking without your intervention and send events as needed, but someone needs to build logic in GTM for whatever is being pushed to the DL. You don't need firebase, having GTM (dataLayer) as the only touchpoint between analytics and front-end is the best practice.
If you're doing react native for a native app, then it's the opposite - you likely don't need GTM. But sync with your implementation specialists or whoever owns the GTM account in the company.
I'm running A/B redirect tests with Google optimize, using SPA on React, Redux platform.
A problem I'm trying to solve is - redirecting to the new page causes the full page reload, which I would like to avoid and rather prefer to do it manually, so it would be seamless for a user and much faster.
Is there a way to do that?
Although this is a three years old question, maybe there are still users like me have the same issue.
Now Google has provided Activation events to resolve dynamic websites and single-page apps reload issue.
By default, Optimize modifies the content of a webpage only during its initial load. However, dynamic websites (built with tools like AMP, React, Angular, etc.) and single-page apps (SPA) commonly load additional content long after the initial page load. Optimize supports modifying this late-appearing web content via activation events.
Have read up on angular and generating snapshots for the crawlers
Just want to know if the snapshot needs to have CSS or just plain and img tags for Facebook and Google etc. to work.
Any good examples of how to implement the framework with expression engine or Wordpress.
As I understand it you would actually create two versions of every page. Is that correctly understood ?
Cheers looking forward on trying it out .
As I understand it it's enough to modify the htaccess file to show the snapshots instead of the angular once when the request is coming from Facebook or Google etc.
Thanks
Sometimes when starting up a new instance on AppEngine the process may take some time. It obviously depends on your choice of libraries etc. My question is, is it possible to serve some other page while users are waiting? Reddit does a nice job of this. Other sites like Twitter provide a similar notice to users when the load is too much (they probably also starting more instances in the bg).
Does anybody have any experience in doing this on GAE?
Another twisted way that is very simple to implement without code changes: use another appengine that statically serves a tiny html of just an iframe to your real appengine.
This might break TOS so check that before doing it. It sill cost you more too.
That wrapper appengine can serve js that does the "loading" page , inserts the iframe and lster removes its content when hidden iframe finishes loading, then shows the iframe
Not sure what i am missing, but I have pushState working on my Backbone based app, where I could click around and have my URL look like www.example.com/route_specified, however if i try to go directly to that page it shows up as not found. If I do www.example.com/#route_specified it works, and quickly changes back to www.example.com/route_specified on the address bar
I am guessing i need to do something in Apache to handle this and make sure that all calls resolve to the index or something like that, but can't find explanation.
Correct. Think about it this way without pushstate enabled. Your server is still trying to serve the page at that route. Since it cannot find the specified document at that location, it throws a 404.
Technically speaking, your server should still produce some sort of result at the url location, then have Backbone take over. In it's simplest form, this is called progressive enhancement. The server should still serve some sort of static page with critical info, which will eliminate issues you will have with SEO. Work your site/app with javascript disabled, serving only the relevant data. Then have Backbone takeover. I have just come across Mashable's redesign, and they integrate progressive enhancement extremely well with Backbone.
If SEO is not a concern, you could always redirect the user to the index page. Just remember that search engines will only index your app page then. If your content is being served dynamically, there wont be any data to index.
Hope this helps.
Thanks
Tyrone