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.

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

Support new-style Google Analytics IDs #1300

Open
4 of 7 tasks
choldgraf opened this issue Apr 14, 2021 · 22 comments
Open
4 of 7 tasks

Support new-style Google Analytics IDs #1300

choldgraf opened this issue Apr 14, 2021 · 22 comments
Labels
enhancement New feature or request state: upstream Requires a change to a dependant package

Comments

@choldgraf
Copy link
Member

choldgraf commented Apr 14, 2021

Summary

There's a new kind of Google Analytics ID, and our current base theme doesn't use the right JavaScript for it. We depend on the upstream PyData theme for this.

To Do

  • Address the pydata issue for this
  • Wait for update to pydata theme
  • Release new Sphinx Book Theme to get latest pydata theme
  • This will then be closed!
  • Wait for new release of pydata theme
  • Update version for this theme
  • Close this
@choldgraf choldgraf added enhancement New feature or request state: upstream Requires a change to a dependant package labels Apr 14, 2021
@isabelizimm
Copy link

Hi @choldgraf-- I'm looking to add the new style of Google Analytics ID into a Jupyter Book. Is there an update on the status of this issue?

@choldgraf
Copy link
Member Author

I believe this should now "just work" assuming that you are using the latest pydata sphinx theme, I'll close this issue but feel free to re-open if it still doesn't work

@choldgraf
Copy link
Member Author

Ah nevermind, we need to update the pydata theme in the sphinx book theme and make a new release. Will do that now.

@choldgraf choldgraf reopened this Jul 20, 2021
@choldgraf
Copy link
Member Author

choldgraf commented Jul 20, 2021

ok a new release is out, so new GA style badges should be possible!

Try upgrading with

pip install -U jupyter-book

@isabelizimm
Copy link

isabelizimm commented Jul 21, 2021

Thank you for the update! After testing this out, the analytics still are not viewable with the new GA badge. The latest release I see is v0.11.2, which is from 7 days ago. Is this the release with new GA style badges?

CC: @choldgraf

@jackminchin
Copy link

Hi @choldgraf,

I'm still seeing no data sent to analytics through the g-tag. The code does appear in the deployed and compiled html though.

@choldgraf
Copy link
Member Author

huh - so the correct javascript is in the page, but GA doesn't get the right data?

@jackminchin
Copy link

jackminchin commented Jul 23, 2021

Yeah exactly that, I can see the Gtag installed on the site (see below) from the Jupyter-book build, however, no data is being received in GA.

Screenshot 2021-07-23 at 09 43 52

UPDATE

The GTAG script is getting loaded into the site twice, not sure if this can cause problems or not:
Screenshot 2021-07-23 at 09 52 17

@choldgraf
Copy link
Member Author

Hmmmm that is interesting indeed. Perhaps it's causing the issues that we're experiencing. Maybe you could try manually removing one of the duplicated scripts on a page, and seeing if that fixes the issue? Then we can find a fix for this

@jackminchin
Copy link

@choldgraf I'll give this a go and report back tomorrow.

@jackminchin
Copy link

@choldgraf. The issue seems to be that it is loading twice, and the fact that the gtag snippet is in the footer, where it should be in the header.

I manually moved the tag to the header and it worked fine.

I've looked for the code that deals with this but I can't find it, happy to fix it if you can point me in the right direction though.

@choldgraf
Copy link
Member Author

hmmm - so Jupyter Book in general should be getting its Google Analytics behavior from the PyData Sphinx Theme (https://pydata-sphinx-theme.readthedocs.io/en/latest/user_guide/configuring.html#google-analytics) which is a parent theme of the Sphinx Book Theme, the theme that Jupyter Book uses. I'm not sure why it would be duplicated though!

@jackminchin
Copy link

So after a bit more digging, the code doesn't appear to be duplicated, so not sure what's going on in the sources list. There are two differences between the code that PyData Sphinx is inserting and the code that I tested which works:

  1. Sphinx puts gtag snippet in footer where it should be in header.
  2. gtag('js', new Date()); line not included in snippet

One or both of these are probably what's causing the problem

@choldgraf
Copy link
Member Author

Hmm - here is the GA script insertion code in the theme:

https://github.com/pydata/pydata-sphinx-theme/blob/48afe724cfb18aed27263a2ac069639e5cdf1f70/pydata_sphinx_theme/__init__.py#L259

and here is where it's inserted:

https://github.com/pydata/pydata-sphinx-theme/blob/d29bd129f6dda3081dac9ab6a0e3fefaa9b51656/pydata_sphinx_theme/layout.html#L108

@jackminchin
Copy link

I've made a PR with the changes

@scottyhq
Copy link

@choldgraf should this be reopened temporarily? Seems that once pydata sphinx theme 0.6.4 is released it will be fixed

@choldgraf choldgraf reopened this Sep 25, 2021
@choldgraf
Copy link
Member Author

yep good point!

@mmann1123
Copy link
Contributor

mmann1123 commented Feb 28, 2023

For the G4 tag, I am being requested to
'''
Install the Google tag manually
Below is the Google tag for this account. Copy and paste it in the code of every page of your website, immediately after the element. Don’t add more than one Google tag to each page.
'''


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

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

Updating the google_analytics_id in _config.yml doesn't seem to apply this change in the head

I am trying to use _template to fix this as suggested here. I will let you know. executablebooks/meta#726 (comment)
@choldgraf @jackminchin

@mmann1123
Copy link
Contributor

Pretty sure this resolved it:
Created _templates/_layout.html with the following content:

{%- extends "!layout.html" %}
{%- block extrahead %}
{{ super() }}

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

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

{%- endblock %}

In _config.yml

sphinx:
    config:
       templates_path:
             - _templates

@mmann1123
Copy link
Contributor

mmann1123 commented Mar 1, 2023

Nevermind. My suggestion didn't work.... seems like i might have used the wrong code

@jackminchin
Copy link

Hi @mmann1123,

I believe I sorted this issue out a few years ago. Are you still having issues, if so, I can dig out the solution?

Thanks,
Jack

@mmann1123
Copy link
Contributor

@jackminchin You are right. I had just inserted the wrong g-code. Seems to be working now. Thanks for your work on this project! Its been a real life-saver.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request state: upstream Requires a change to a dependant package
Projects
None yet
Development

No branches or pull requests

5 participants