Skip to content

Commit

Permalink
docs: add trackGA function and listeners
Browse files Browse the repository at this point in the history 
GITHUB_PR_NUMBER: 5526
GITHUB_PR_URL: #5526

Co-authored-by: sezgi <139535+sezgi@users.noreply.github.com>
GitOrigin-RevId: 041d213
  • Loading branch information
@hasura-bot @sezgi
hasura-bot and sezgi committed Feb 22, 2021
1 parent 377425f commit 96209f6
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 29 deletions.
11 changes: 11 additions & 0 deletions docs/_static/scripts/hdocs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ window.hdocs = (function () {
setup: function () {
Array.from(document.getElementsByClassName('menuLink')).forEach(function (el) { el.addEventListener('click', hdocs.toggleMenu) });

Array.from(document.getElementsByClassName('tracked')).forEach(function (el) { el.addEventListener('click', function () { hdocs.trackGA(el.getAttribute('data-label')) }) });

document.getElementById('nav_tree_icon').addEventListener('click', hdocs.handleNavClick);
document.getElementById('sidebar-close').addEventListener('click', hdocs.handleNavClick);

Expand Down Expand Up @@ -42,6 +44,15 @@ window.hdocs = (function () {
marketoSuccess.classList.add('hide');
}
},
trackGA: function (label, action) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'Click Events',
category: 'Docs Custom',
action: action || 'Link Click',
label: label
})
},
toggleMenu: function () {
var x = document.getElementById("navbar")
if (x.className === "topnav") {
Expand Down
53 changes: 24 additions & 29 deletions docs/_theme/djangodocs/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,21 +65,21 @@
<div class="headerWrapper">
<div class="navLeft">
<div class="brand">
<a href="https://hasura.io/">
<a class="tracked" data-label="Nav: Logo" href="https://hasura.io/">
<img src="{{ pathto('_images/layout/white-logo.svg', 1) }}" alt="Logo"/>
</a>
</div>
<a href="https://discordapp.com/invite/hasura" target="_blank" rel="noopener noreferrer">
<a class="tracked" data-label="Nav: Discord" href="https://discordapp.com/invite/hasura" target="_blank" rel="noopener noreferrer">
<div class="socialBtn discordBtn">
<img src="{{ pathto('_images/layout/discord-brands-block.svg', 1) }}" alt="Discord"/>
</div>
</a>
<a href="https://twitter.com/hasurahq" target="_blank" rel="noopener noreferrer">
<a class="tracked" data-label="Nav: Twitter" href="https://twitter.com/hasurahq" target="_blank" rel="noopener noreferrer">
<div class="socialBtn twitterBtn">
<img src="{{ pathto('_images/layout/twitter-brands-block.svg', 1) }}" alt="Twitter"/>
</div>
</a>
<a id="gitHubBtn" class='socialBtn gitHubBtn hide' href="https://github.com/hasura/graphql-engine/" target="_blank" rel="noopener noreferrer">
<a class="tracked socialBtn gitHubBtn hide" data-label="Nav: Github" id="gitHubBtn" href="https://github.com/hasura/graphql-engine/" target="_blank" rel="noopener noreferrer">
<div class='gitHubStars'>
<img src="{{ pathto('_images/layout/github-header.svg', 1) }}" alt='GitHub'/>
<span>Star</span>
Expand All @@ -91,35 +91,35 @@
<ul class="navBarUL">
<li>v1.x</li>
<li class='navListActive'>
<a href="/docs/">Docs</a>
<a class="tracked" data-label="Nav: Docs" href="/docs/">Docs</a>
</li>
<li>
<a href='https://hasura.io/blog/'>
<a class="tracked" data-label="Nav: Blog" href='https://hasura.io/blog/'>
Blog
</a>
</li>
<li>
<a href="https://hasura.io/learn/">
<a class="tracked" data-label="Nav: Tutorials" href="https://hasura.io/learn/">
Tutorials
</a>
</li>
<li>
<a href="https://hasura.io/enterprise/">
<a class="tracked" data-label="Nav: Enterprise" href="https://hasura.io/enterprise/">
Enterprise
</a>
</li>
<li>
<a href="https://hasura.io/cloud/">
<a class="tracked" data-label="Nav: Hasura Cloud" href="https://hasura.io/cloud/">
Hasura Cloud
</a>
</li>
<li>
<a href="https://hasura.io/pricing/">
<a class="tracked" data-label="Nav: Pricing" href="https://hasura.io/pricing/">
Pricing
</a>
</li>
<li>
<a href='https://cloud.hasura.io/signup?pg=docs&plcmt=header&cta=get-started&tech=default'>
<a class="tracked" data-label="Nav: Get Started For Free" href='https://cloud.hasura.io/signup?pg=docs&plcmt=header&cta=get-started&tech=default'>
<button class="commonBtn navBtnHome">
Get Started For Free
</button>
Expand All @@ -138,45 +138,38 @@
<div class="visibleMobile">
<ul class="navBarULMobile">
<li>
<a class="menuLink" href="/docs/">Docs</a>
<a class="tracked menuLink" data-label="Mobile Nav: Docs" href="/docs/">Docs</a>
<span class="versionTxt">
v1.x
<!-- <select value="{{ version }}" onchange="location = this.value;" class="selected" aria-label="Select Version">
{%- if version == '1.0' %}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html" selected="selected">v1.x</option>
{%- else -%}
<option class="option_val" value="https://{{ BASE_DOMAIN }}/docs/1.0/graphql/manual/index.html">v1.x</option>
{% endif %}
</select> -->
</span>
</li>
<li>
<a class="menuLink" href='https://hasura.io/blog/'>
<a class="tracked menuLink" data-label="Mobile Nav: Blog" href='https://hasura.io/blog/'>
Blog
</a>
</li>
<li>
<a class="menuLink" href='https://hasura.io/learn/'>
<a class="tracked menuLink" data-label="Mobile Nav: Tutorials" href='https://hasura.io/learn/'>
Tutorials
</a>
</li>
<li>
<a class="menuLink" href="https://hasura.io/enterprise/">
<a class="tracked menuLink" data-label="Mobile Nav: Enterprise" href="https://hasura.io/enterprise/">
Enterprise
</a>
</li>
<li>
<a class="menuLink" href="https://hasura.io/cloud/">
<a class="tracked menuLink" data-label="Mobile Nav: Hasura Cloud" href="https://hasura.io/cloud/">
Hasura Cloud
</a>
</li>
<li>
<a class="menuLink" href="https://hasura.io/pricing/">
<a class="tracked menuLink" data-label="Mobile Nav: Pricing" href="https://hasura.io/pricing/">
Pricing
</a>
</li>
<li>
<a class="menuLink" href='https://cloud.hasura.io/signup?pg=docs&plcmt=header&cta=get-started&tech=default'>
<a class="tracked menuLink" data-label="Mobile Nav: Get Started" href='https://cloud.hasura.io/signup?pg=docs&plcmt=header&cta=get-started&tech=default'>
<button class='commonBtn navBtnHome'>
Get Started For Free
</button>
Expand All @@ -201,12 +194,12 @@
<img src="{{ pathto('_images/layout/close-icon.svg', 1) }}" alt="Close"/>
</div>
<div class="tabbarContainerWrapper blueBgColor boderBottom">
<a href="{{ pathto('graphql/core/index.html', 1) }}" {%- if is_core %} class="tabbarTabActive" {%- endif %}>
<a href="{{ pathto('graphql/core/index.html', 1) }}" {%- if is_core %} class="tracked tabbarTabActive" data-label="Tabs: Core" {%- endif %}>
<span>
Hasura Core
</span>
</a>
<a href="{{ pathto('graphql/cloud/index.html', 1) }}" {%- if is_cloud %} class="tabbarTabActive" {%- endif %}>
<a href="{{ pathto('graphql/cloud/index.html', 1) }}" {%- if is_cloud %} class="tracked tabbarTabActive" data-label="Tabs: Cloud" {%- endif %}>
<span>
Hasura Cloud
</span>
Expand Down Expand Up @@ -239,7 +232,7 @@
<input type="text" id="search_element" placeholder="Search docs..." />
</div>
<div class="edit-github-btn-wrap inline-block mobile-hide">
<a class="edit-github-btn" target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/docs/{{ pagename }}.rst">
<a class="tracked edit-github-btn" data-label="Edit on GitHub" target="_blank" rel="noopener" href="https://github.com/hasura/graphql-engine/blob/master/docs/{{ pagename }}.rst">
<img src="{{ pathto('_images/layout/github-32.png', 1) }}" alt='GitHub'/>
<span>Edit on GitHub</span>
</a>
Expand Down Expand Up @@ -368,7 +361,9 @@
const HDOCS_ALGOLIA_API_KEY = "{{ALGOLIA_API_KEY}}";

document.addEventListener('DOMContentLoaded', function () {
hdocs && hdocs.setup();
if (hdocs) {
hdocs.setup();
}
});
</script>

Expand Down

0 comments on commit 96209f6

Please sign in to comment.