I am currently converting a drupal module into gatsby. In this module I have many scripts like google analytics, tag manager, facebook pixel and more.
What is a good approach to integrate them into Gatsby?
some scripts contain a reference to script files, noscript tags and iframe tags, which I can't use in JSX straight away
Related
How can I get the analytics website css, js
I would like to put the tables, charts, and grap shown on the analytics website into the page I develop website . I am importing it through API, but I need a design that shows it. How can I get css html javascript?
You can use Google Analytics Embedded API, it is a JavaScript library that allows you to embed a dashboard in your system with the same design of Google Analytics:
https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started
I have created very simple portfolio website using Angular.js, and I'm hosting it on GitHub Pages. I use Angular.js because I'd like it to have a SPA feeling. It contains mostly images, as it is an artist portfolio app, but also it contains a description page with text, which is (probably) not crawled by Google bot.
Is there a way to SEO my Angular.js website, when it's hosted in static website hosting like GitHub Pages? I've read about prerender, but it's a server-side tool, which can't work on GitHub Pages. I don't control server side (GitHub Pages doesn't allow that). So I cant use anything like server-side rendering.
I use some seo-friendly markup in my index.html file, like meta title with words of value for me, description, etc., but I'm afraid this is not enough.
Based on my custom URL parameters I process, I am trying to modify dynamically a meta tag I have id'ed in index.html like so:
<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>
The code below in my home.ts seems to be working
document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;
I can verify it is via the browser dev console/elements.
However, when I view from facebook via their ojbect graph debugger at
https://developers.facebook.com/tools/debug/og/object/
It appears to see the default
http://example.com/someurl.jpg
as if the index.html is shipped before my home.ts gets chance to make the update.
Perhaps, my understanding is flawed and there is better way to do this.
Thank you.
Note1: initially, I was thinking I had to make some angular binding between index.html and one of my services but I could not locate any sample code, the closest I came to was this post
How can I update meta tags in AngularJS?
But I don't know how to apply it for my ionic2/3 code, so I opted for the document.get approach.
Note2: the ultimate goal here is to share a link into a social media (web or app) like facebook, a messenger like viber/skype, etc... and have it resolve to meaningful images, title, description to drive the visit back to the site via browser, or app if the user clicking on the link is on a mobile device with my app version of the site installed on his device.
Note3: if you decide to point me to ionic deeplinking please provide code to match above, because I could not understand how to apply to my case.
If you are trying to implement dynamic open graph meta tags values in your pages, you will need a server-side scripting language like php. Such a script will run on the server, update the pages as needed, then the pages will be served to the requesting site or application.
client-side scripting (ie. JavaScript) is usually ignored when a site or app is merely visiting your site/link for the purpose of extracting (aka scrapping, parsing html) information such as the one provided by the open graph meta tags (og:title, og:description og:image...).
Hugo is for people building a blog, company site, portfolio, tumblog, documentation, single page site or a site with thousands of pages.
http://gohugo.io/overview/introduction/
I'd like to make a single page site. My content is written in Markdown index.md. How do I build it?
It's necessary to build with Hugo (rather than pandoc) because I want to use its csv templating feature http://gohugo.io/extras/dynamiccontent/
I tried hugo new to create a blank site. If I create _layouts/index.html then hugo server will show that. But I want to write content in Markdown.
As of Hugo 0.18, this is now possible by creating a content/_index.md file, if the theme you are using supports it. You can create this file with the command hugo new _index.md. See the Hugo docs for more details.
Just write a post example.md as usual, Hugo will build it public/example/index.html. Then rather than push public to your web host, publish public/example. Voila, single page site.
the hugo quickstart should have everything you need to get started, including adding markdown posts. Specifically, hugo new POSTNAME.md will create a markdown post with proper header at content/POSTNAME.md.
i am playing around with qooxdoo lately, it is really interresting, but all the examples build up everything from a blank html page, which would end in being the whole site not indexable from a search engine.
Is there a way to build qooxdoo widgets from html source... most important for me would be a table, so i put html code of the table in the page and tell qooxdoo to build the table from the html source, is this possible?
A general approach would be to to make all your "pages" accessible via URLs styled like example.com/#page=x. Then configure your web-server to rewrite to those URLs, so that for example page/x.html is mapped to #page=x. Finally, submit an XML-Sitemap to Google and other search engines.