How can I always include the Google Analytics tacking code on my GitHub Pages webpage generated with R Markdown?
I am currently creating a webpage hosted on GitHub Pages using RMarkdown. To create site, I run rmarkdown::render_site(). This command will knit all R Markdown documents to create the relevant .html files.
However, I want to include Google Analytics on my site. To do this, I need to include a University Analytics tracking code to my property by pasting the JavaScript code in my main index.html file. I can easily do this by editing the index.html file directly. However, every time I run rmarkdown::render_site(), to render the site, it re-knits the index.Rmd file, and thus overwrites the index.html file, including the Google Analytics code I previously entered directly.
How can I fix this problem and always have my Google Analytics code contained in the page?
I just figured out how to get this done while trying to add google analytics to my own RMD site on Github Pages.
To add Google Analytics code before the closing </head> tag of an html document produced from RMD...
Step 1: Create a .html file containing the Google Analytics Script, and save it in the working directory for your site. (Simply, create new text file, paste script, save "filename.html".
Step 2: Adjust the yaml header of your rmd file to contain the includes: & in_header: arguments, and reference the .html file containing the tracking code
---
title: ""
output:
html_document:
includes:
in_header: GA_Script.html
---
Step 3: Adjust yaml headers for each rmd file related to your site so that each page reports back to Google Analytics.
It is recommended that the Google Analytics tracking code be placed before the closing <\head> tag in the sites html. The method above will get that done.
If for some reason you want to include it in the body of the html code, you could just include the GA code in the body of the rmd file by pasting it in between an html_preserve command:
<!--html_preserve-->
Google Analytics Code Here
<!--/html_preserve-->
I manually write the header in the same RMarkdown file and simply include the Google Analytics chunk. This header goes immediately after the yaml. Works like a charm.
---
title: "XXXXXXXXXX"
author: "XXXXXXXXXXX"
date: "`r Sys.Date()`"
---
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XXXXXXXXXX');
</script>
</head>
Related
I would like to add "hidden" text (the GitHub repo and code file name) to a report that is rendered to HTML with R Markdown (or Quarto). Is there an easy way to save some text information so it will show up when I inspect a document in a browser but the text will not show for the casual consumer of the web page?
With Quarto (and similar for R Markdown):
---
format: html
---
This is some text.
<!-- This will be displayed in the page source code but not in the output. -->
When I would create a html document in RMarkdown, the file transfer/email process was straightforward; I would simply transfer/email the resulting html file.
However, when I try to do the same with a Quarto document, I do not get all of the functionality in the transferred file. For example, my Quarto document includes tabs using the ::: {.panel-tabset} option. When I open the transferred html document, the panel-tabsets are not displayed properly.
I believe that this is because Quarto also produces files in a separate directory. However, I trying to programmatically email the html document out to a distribution, and sendmailR is not letting me attach this directory.
Furthermore, my distribution list are NOT technical folks. I am not looking to have to tell them to save these files and then open the html; I was hoping to just attach the html file like I did with RMarkdown and have them natively open it just like an regular attachment.
What is the best way to transfer/email Quarto produced html documents?
Someone directed me to use the html: self-contained in the YAML header.
Based on that, I found this post which states what to do.
By putting the following in my YAML header, the resultant html file is self-contained:
---
format:
html:
self-contained: true
---
Is there a way to automatically apply some post-processing to html files generated from R Markdown?
For example, if we use MathJax to render LaTeX code (primarily in RStudio), the resulting html file includes src= links to load MathJax from a CDN. The problem is, we also need to be able to display these files on internal network without internet access, and those links need to be replaced to point to a local copy of MathJax.
It would be convenient if there was some hook that I could use to do that after the html file is generated, but I haven't been able to find any.
If your post processing is specifically about MathJax, you might consider setting your output yaml to the following which will download local copies of libraries such as MathJax and link to them.
output:
html_document:
self_contained: FALSE
mathjax: local
I'm trying to add a favicon to my R Shiny app and I want to use a local image file so it can run without Internet connectivity. Using the example Emms gave here I've got a program that will display the favicon when it's using the NOAA logo's url. However, when I saved that exact image to my computer, I've not been able to get it to display. I've tried:
feeding the href parameter a complete file path "C:/Users/...favicon.ico"
feeding the href parameter only a file path that begins where the current working directory (viewed with getwd()) leaves off
putting the downloaded NOAA logo .ico into a folder called "www" and placing it with my project/where my current directory is viewing (I don't know if guidance on folders named 'www' applied to local readings, but I figured I'd try it anyway)
According to Giancarlo Tamburello's answer on the same page, I tried using this site to encode that same NOAA logo as a Base 64 character string--this required changing the whole function a bit, so that I assigned rel="icon", href="data:image/x-icon;base64,[my base 64 string]", and type="image/x-icon"
Nothing I've done with filepaths (or with the base 64 string) has resulted in anything other than Google Chrome's favicon placeholder. Any solution that works with filepaths or with base 64 would satisfy my requirement of being able to run without Internet connectivity.
I'm running R 4.0.2 with Windows 10 Pro OS on a 64-bit OS and launching into Google Chrome.
I noticed that when rendering a shiny R markdown into html, knitr copies all static assets into a <notebook_name>_files folder. This however doesn't work when an asset is referenced inside an include, as below. In such cases you can use this workaround (e.g. if your notebook is called index.Rmd):
in index.Rmd:
---
title: "Favicon"
output:
html_document:
includes:
in_header: "favicon.html"
---
then also place the favicon as an image somewhere in your document:
then in your favicon.html:
<link rel="shortcut icon" href="index_files/favicon-32x32.png">
knitr will copy the favicon image into it's static folder because it's present as an image in your document, which can then can also be referenced to display the favicon ;)
You could just paste a base-64 encoded favicon HTML snippet into your R Markdown file, for instance copied from https://www.codegrepper.com/code-examples/html/html+favicon+base64:
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
I am struggling to embed leaflet map created R into my github account
The file exported into single HTML file and I can view it on my computer
When I upload and then open from github, it gives raw HTML code, not the interactive map
And I'm not even sure how to embed this interactive map in ReadMe.md. When I place the link to the html and click it, I get the same raw map.
Help!
Update
I created follow-up question, If HTML doesn't work well in github, how can some people make it work
You can prepend http://htmlpreview.github.io/? to the url of where you put the html file. In your case:
http://htmlpreview.github.io/?https://github.com/Sonihal/yorbalinda_interactive_map/blob/master/web_Yorba_Linda.html
Just in case anyone is still looking for a solution, I wrote a post explaning how to do it, assuming that you use Jekyll to build your website hosted on GitHub.
https://dieghernan.github.io/201905_Leaflet_R_Jekyll/
In short,you have to perform several steps:
On GitHub/Jekyll
Identify the code you need to include. I already did it for you See on my GitHub
Copy/paste it in the code that builds your <head>. This would depend on your Jekyll implementation. After doing that, the needed libraries would be loaded every time that Jekyll builds the website.
On Rstudio
Create a map with leaflet and knit it to a github_document. It is important to knit it using always_allow_html: yes in the front matter.
On Markdown
Check that every leafletmap has produced an html code in the .mdfile. Something like this:
<!--html_preserve-->
<script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
{"x":{"options": ...
<!--more funky code here-->
Paste this chunk before the <script> part:
<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html-widget"></div>
So you got something like this for each leaflet map:
<!--html_preserve-->
<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html- widget"></div>
<script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
{"x":{"options": ...
<!--more funky code here-->
Now publish it on GitHub. Now when Jekyll builds your blog/web hosted on GitHub the libraries are loaded and the leaflet map displays correctly. Note that on local or markdown the map is still not visible.
Once that you have done it a couple of times you will see that is basicaly copy/paste/modify the chunk that I presented on step 5.