Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Google Analytics #1

Closed
timothystewart6 opened this issue Aug 14, 2021 · 5 comments
Closed

Google Analytics #1

timothystewart6 opened this issue Aug 14, 2021 · 5 comments

Comments

@timothystewart6
Copy link
Contributor

Would be nice to opt in to Google Analytics
@jjjonesjr33
Copy link

Found an easy workaround that works for analytics and sorting, takes a few steps but then you can do whatever. FYI you'll need to know a bit of HTML and docker pathing.

  1. Setup the docker once using the default docker-compose.yml and your options so you can launch the container/webpage.
  2. Inspect the page and copy the entire index.html to a notepad < You'll need this in a min.
  3. Edit the container by adding the following paths in 3-1 and 3-2 <<< you may have to delete the container and then re-added it, but this time only add the paths. No need to add any of the variables.
  4. In App.js you will need to remove some code or each time you restart your container it will reset to the default template. Examples on what code needs to be removed in 4-1 or the just copy and paste the code exactly from 4-2
  5. Run the container, set up a reverse proxy with SSL and point it to port HTTP://127.0.0.1:3000 and enjoy 😄 (Replace the 127.0.0.1 with your own IP of the host machine of the docker)

3-1) The first one is a path for the index.html

Container Path: /usr/src/app/www/index.html
Host Path: /mnt/user/appdata/littlelink/index.html <<< This was mine your's may be different on where you would like to store this file.

Keep in mind in the folder that you are linking the container to you need to create the index.html file or the container will fail to start. (you can just do this with notepad and then save the file as index.html)

Once you have access to the index.html you pretty much can do whatever you want. For example, adding an analytics script, moving the links to the right spot, or even adding a background and changing the color can be easily done.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-00000000000"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-00000000000');
</script>

3-2) Next is the App.js

Container Path: /usr/src/app/app.js
Host Path: /mnt/user/appdata/littlelink/app.js <<< This was mine your's may be different on where you would like to store this file.

Keep in mind in the folder that you are linking the container to you need to create the app.js file or the container will fail to start. (you can just do this with notepad and then save the file as app.js)

4-1) Fix App.js you may need to remove the following

fs.readFile('./template/index.html', 'utf8', (err, file) => {
  if (err) {
    throw err;
  }
  const { JSDOM } = jsdom
  const dom = new JSDOM(file);
  const html = "<!DOCTYPE html>\n" + useEnv(dom.window.document).documentElement.outerHTML;
  fs.writeFile('./www/index.html', html, 'utf8', (err) => {
    if (err) {
      throw err;
    }
  });
});

4-2) If the app.js file is empty the default code is

const express = require('express')
const morgan = require('morgan')
const compression = require('compression')
const fs = require('fs')
const jsdom = require('jsdom')
const useEnv = require('./env')



const app = express();
app.use(morgan('combined'));
app.use(express.static('www'));
app.use(compression())

const server = app.listen(process.env.PORT || 3000, () => {
    const host = server.address().address
    const port = server.address().port
    console.log('Express app listening at http://%s:%s', host, port)
})

ENJOY

That's pretty much it, once you have access to the index.html it's fair game on everything that you could or would want to edit or change for the main structure of the page. You could add the css folder as well if you want to customize the styles, but overall this is a quick and dirty way to gain access. If you want to check out what I've done you can do it at https://jjjonesjr33.com/

@timothystewart6
Copy link
Contributor Author

Hey! Thanks for this! It's been converted to reactjs. This should be relatively easy to do with some code now. I will write some some soon! Google analytics will be as simple as providing a UA or Tracking ID!

@northportio
Copy link
Contributor

Would be nice to add the option to set a meta tag to not have it indexed. See this Google Dev Doc.

@timothystewart6
Copy link
Contributor Author

This feature was added in 1dc1de2

@timothystewart6
Copy link
Contributor Author

added button click events 962742c

@escaparrac escaparrac mentioned this issue Jul 18, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@timothystewart6 @jjjonesjr33 @northportio