Support new-style Google Analytics IDs

[choldgraf]

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

[isabelizimm]

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]

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]

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

[choldgraf]

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

Try upgrading with

pip install -U jupyter-book

[isabelizimm]

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]

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]

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

[jackminchin]

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.

UPDATE

The GTAG script is getting loaded into the site twice, not sure if this can cause problems or not:

[choldgraf]

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]

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

[jackminchin]

@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]

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]

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]

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]

I've made a PR with the changes

[scottyhq]

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

[choldgraf]

yep good point!

[mmann1123]

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]

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]

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

[jackminchin]

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]

@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.

[HenriqueAJNB]

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, @jackminchin, this works for me! I couldn't find any other way around it. Should this issue be reopened? In the meantime, this could be added to the documentation.

[mmann1123]

Thanks. Adding that to the docs would be helpful