Merge pull request #3076 from bensternthal/bug-1431412-update-GA

Bug 1431412 update ga

.env-dist

@@ -11,3 +11,4 @@ ES_URLS=elasticsearch:9200
 SESSION_COOKIE_SECURE=False
 SECRET_KEY=secret
 DEBUG=True
+GTM_CONTAINER_ID=

.gitignore

@@ -26,6 +26,6 @@ venv/
 .cache
 .tox
 .env
-.npm
 .config
 .node-gyp
+.npm

kitsune/bundles.py

@@ -293,7 +293,6 @@
             'sumo/js/geoip-locale.js',
             'mailcheck/src/mailcheck.js',
             'sumo/js/ui.js',
-            'sumo/js/dnt-helper.js',
             'sumo/js/analytics.js',
             'sumo/js/surveygizmo.js',
             'sumo/js/instant_search.js',
@@ -351,7 +350,6 @@
     },
     'mobile-common': {
         'source_filenames': (
-            'sumo/js/dnt-helper.js',
             'sumo/js/templates/mobile-search-results.js',
             'moment/moment.js',
             'sumo/js/i18n.js',
@@ -546,7 +544,6 @@
             'modernizr/modernizr.js',
             'sumo/js/browserdetect.js',
             'sumo/js/mobile/ui.js',
-            'sumo/js/dnt-helper.js',
             'sumo/js/analytics.js',
             'sumo/js/libs/jquery.cookie.js',
             'sumo/js/libs/jquery.lazyload.js',
@@ -647,4 +644,11 @@
         ),
         'output_filename': 'build/experiment-fxa-cta-topbar-min.js'
     },
+    'gtm-snippet': {
+        'source_filenames': (
+            'sumo/js/dnt-helper.js',
+            'sumo/js/gtm-snippet.js',
+        ),
+        'output_filename': 'build/gtm-snippet-min.js'
+    },
 }

kitsune/landings/jinja2/landings/includes/register_contributor.html

@@ -6,10 +6,10 @@
           <form method="post" action="{{ url('users.make_contributor') }}">
             <input type="hidden" name="return_to" value="{{ request.get_full_path() }}">
             {% csrf_token %}
-            <button id="sign-up-contributor" class="btn btn-submit" data-ga-click="_trackEvent | Sign Me Up Click | Logged In">{{ _('Sign me up') }} &raquo;</button>
+            <button id="sign-up-contributor" class="btn btn-submit" data-event-category="Sign Me Up Click" data-event-action="Logged In">{{ _('Sign me up') }} &raquo;</button>
           </form>
         {% else %}
-          <a id="sign-up-contributor" class="btn btn-submit" href="{{ url('users.auth_contributor') }}" data-ga-click="_trackEvent | Sign Me Up Click | Logged Out">
+          <a id="sign-up-contributor" class="btn btn-submit" href="{{ url('users.auth_contributor') }}" data-event-category="Sign Me Up Click" data-event-action="Logged Out">
             {{ _('Sign me up') }} &raquo;
           </a>
         {% endif %}

kitsune/products/jinja2/products/documents.html

@@ -57,7 +57,8 @@ <h2 class="topic-description cf">
           {# only show subtopics on the parent topic page #}
           {% for subtopic in subtopics %}
             <li class="subtopic">
-              <a href="{{ url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) }}">
+              <a href="{{ url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) }}"
+              data-event-category="link click" data-event-action="subtopic" data-event-label="{{ subtopic.title }}">
                 {{ pgettext('DB: products.Topic.title', subtopic.title) }}
               </a>
               {% if subtopic.title != subtopic.description %}
@@ -68,7 +69,8 @@ <h2 class="topic-description cf">
         {% endif %}
         {% for document in documents %}
           <li>
-            <a href="{{ document['url'] }}">{{ document['document_title'] }}</a>
+            <a href="{{ document['url'] }}" data-event-category="link click" data-event-action="document"
+            data-event-label="{{ document['document_title'] }}">{{ document['document_title'] }}</a>
             {{ document['document_summary'] }}
           </li>
         {% endfor %}

kitsune/products/jinja2/products/includes/product_macros.html

@@ -7,7 +7,7 @@
         {% else %}
           {% set prod_url = url('products.product', slug=product.slug) %}
         {% endif %}
-        <a class="cf" href="{{ prod_url }}">
+        <a class="cf" href="{{ prod_url }}" data-event-category="link click" data-event-action="product" data-event-label="{{ product.title }}">
           <img src="{{ STATIC_URL }}sumo/img/blank.png" class="logo-sprite" style="{% if product.image and product.image_offset %}background-image: url({{ product.sprite_url() }}); background-position: -100px -{{ 100 + (product.image_offset * 296) }}px;{% else %}background-image: url({{ product.image_url }}){% endif %}" alt="" />
           <span class="title">{{ pgettext('DB: products.Product.title', product.title) }}</span>
           <span class="description">{{ pgettext('DB: products.Product.description', product.description) }}</span>

kitsune/products/jinja2/products/includes/topic_macros.html

@@ -3,15 +3,15 @@
     {% if loop.first %}<ul class="card-grid cf">{% endif %}
     <li>
       {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
-      <a href="{{ topic_url }}" class="cf">
+      <a href="{{ topic_url }}" class="cf" data-event-category="link click" data-event-action="topic" data-event-label="{{topic.title}}">
         <img src="{{ STATIC_URL }}sumo/img/blank.png" class="topic-icon" style="background-image: url('{{ topic.image_url }}')" alt="" />
         <span class="title">{{ pgettext('DB: products.Topic.title', topic.title) }}</span>
       </a>
     </li>
     {% if loop.last %}
       {% if show_community_support %}
         <li class="community-support">
-          <a href="{{ url('wiki.document', 'get-community-support') }}" class="cf">
+          <a href="{{ url('wiki.document', 'get-community-support') }}" class="cf" data-event-category="link click" data-event-action="topic" data-event-label="Get community support">
             <img src="{{ STATIC_URL }}sumo/img/blank.png" class="topic-icon" alt="" />
             <span class="title">{{ _('Get community support') }}</span>
           </a>
@@ -27,15 +27,15 @@
     {% for topic in topics %}
       {% set topic_url = url('products.documents', product_slug=product.slug, topic_slug=topic.slug) %}
       <li {% if selected_topic == topic %}class="selected {% if selected_subtopic != None %}subtopic-selected{% endif %}"{% endif %}>
-        <a href="{{ topic_url }}">
+        <a href="{{ topic_url }}" data-event-category="link click" data-event-action="topic sidebar" data-event-label="{{topic.title}}">
           {{ pgettext('DB: products.Topic.title', topic.title) }}
         </a>
         {% if selected_topic == topic %}
           <ul class="subtopics">
             {% for subtopic in subtopics %}
               {% set subtopic_url = url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) %}
               <li {{ selected_subtopic|class_selected(subtopic) }}>
-                <a href="{{ subtopic_url }}">
+                <a href="{{ subtopic_url }}" data-event-category="link click" data-event-action="subtopic sidebar" data-event-label="{{subtopic.title}}">
                 {{ pgettext('DB: products.Topic.title', subtopic.title) }}
                 </a>
               </li>

kitsune/products/jinja2/products/mobile/documents.html

@@ -38,15 +38,17 @@
       {# only show subtopics on the parent topic page #}
       {% for subtopic in subtopics %}
         <li>
-          <a href="{{ url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) }}">
+          <a href="{{ url('products.subtopics', product_slug=product.slug, topic_slug=topic.slug, subtopic_slug=subtopic.slug) }}"
+          data-event-category="link click" data-event-action="subtopic" data-event-label="{{ subtopic.title }}">
             {{ pgettext('DB: products.Topic.title', subtopic.title) }}
           </a>
         </li>
       {% endfor %}
     {% endif %}
     {% for document in documents %}
       <li>
-        <a class="cf" href="{{ document['url'] }}">{{ document['document_title'] }}</a>
+        <a class="cf" href="{{ document['url'] }}" data-event-category="link click"
+        data-event-action="document" data-event-label="{{ document['document_title'] }}">{{ document['document_title'] }}</a>
       </li>
     {% endfor %}
     {% if product.questions_enabled(request.LANGUAGE_CODE) %}

kitsune/products/jinja2/products/mobile/product.html

@@ -16,14 +16,16 @@
   <ul id="topics">
     {% for topic in topics %}
       <li>
-        <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.slug) }}" class="cf">
+        <a href="{{ url('products.documents', product_slug=product.slug, topic_slug=topic.slug) }}" class="cf"
+        data-event-category="link click" data-event-action="topic" data-event-label="{{ topic.title }}">
           <img src="{{ STATIC_URL }}sumo/img/blank.png" class="topic-sprite topic-{{ topic.slug }}" alt="">
           {{ pgettext('DB: products.Topic.title', topic.title) }}
         </a>
       </li>
       {% if loop.last %}
           <li>
-            <a href="{{ url('wiki.document', 'get-community-support') }}" class="cf">
+            <a href="{{ url('wiki.document', 'get-community-support') }}" class="cf"
+            data-event-category="link click" data-event-action="topic" data-event-label="Get community support">
               <img src="{{ STATIC_URL }}sumo/img/blank.png" class="topic-sprite topic-get-community-support" alt="">
               {{ _('Get community support') }}
             </a>

kitsune/products/jinja2/products/mobile/products.html

@@ -8,7 +8,7 @@
   <ul id="products">
     {% for product in products %}
       <li>
-        <a class="cf" href="{{ url('products.product', slug=product.slug) }}">
+        <a class="cf" href="{{ url('products.product', slug=product.slug) }}"  data-event-category="link click" data-event-action="product" data-event-label="{{ product.title }}">
           <img src="{{ STATIC_URL }}sumo/img/blank.png" class="logo-sprite" {% if product.image and product.image_offset %}style="background-position: -50px -{{ 50 + (product.image_offset * 148) }}px;"{% endif %} alt="">
           <span class="title">{{ pgettext('DB: products.Product.title', product.title) }}</span>
           {{ pgettext('DB: products.Product.description', product.description) }}

kitsune/products/jinja2/products/product.html

@@ -22,8 +22,9 @@ <h1 class="product-title cf">
     {% if product.slug == 'firefox' %}
       <div class="download-firefox">
         <a href="https://www.mozilla.org/firefox/new/#download-fx" class="download-button"
-         data-ga-click="_trackEvent | Download Button | Panel Opening"
-         data-latest-version="{{ latest_version }}">
+         data-event-category="Download Button"
+         data-event-action="Panel Opening"
+         data-event-label="{{ latest_version }}">
           <span class="download-content">
             <strong class="download-title">{{ _('Firefox') }}</strong>
             <span class="download-subtitle">{{ _('Free Download') }}</span>
@@ -45,17 +46,19 @@ <h1 class="product-title cf">
           {{ _('How does it work?') }}
         </a>
         <a href="https://www.mozilla.org/firefox/new/#download-fx"
-         data-ga-click="_trackEvent | Download Button | Panel Opening"
-         data-latest-version="{{ latest_version }}">
-          {{ _('Download a fresh copy') }}
+            data-event-category="Download Button"
+            data-event-action="Panel Opening"
+            data-event-label="{{ latest_version }}">
+            {{ _('Download a fresh copy') }}
         </a>
       </div>
     {% endif %}
 
     {% if product.slug == 'thunderbird' %}
       <div class="download-thunderbird">
         <a href="https://www.mozilla.org/thunderbird" class="download-button"
-         data-ga-click="_trackEvent | Download Button | Download Thunderbird">
+        data-event-category="Download Button"
+        data-event-action="Download Thunderbird">
           <span class="download-content">
             <strong class="download-title">{{ _('Thunderbird') }}</strong>
             <span class="download-subtitle">{{ _('Free Download') }}</span>

kitsune/questions/jinja2/questions/includes/aaq_macros.html

@@ -22,7 +22,10 @@ <h2>{{ _('Which product would you like to post a question about?') }}</h2>
   <ul id="product-picker" class="card-grid cf">
     {% for key, product in products.iteritems() %}
       <li>
-        <a class="cf" href="{{ url('questions.aaq_step2', product_key=key) }}">
+        <a class="cf" href="{{ url('questions.aaq_step2', product_key=key) }}"
+        data-event-category="link click"
+        data-event-action="product"
+        data-event-label="{{ product.name }}">
           <img src="{{ STATIC_URL }}sumo/img/blank.png" alt="" class="logo-sprite logo-{{ key }}">
           <span class="title">{{ product.name }}</span>
           <span class="description">{{ product.subtitle }}</span>
@@ -48,7 +51,10 @@ <h2>{{ _('Which category best describes your problem?') }}</h2>
     <ul class="select-one">
       {% for key, category in product.categories.iteritems() %}
         <li>
-          <a href="{{ url('questions.aaq_step3', product_key=product.key, category_key=key) }}">{{ category.name }}</a>
+          <a href="{{ url('questions.aaq_step3', product_key=product.key, category_key=key) }}"
+          data-event-category="link click"
+          data-event-action="category"
+          data-event-label="{{ category.name }}">{{ category.name }}</a>
         </li>
       {% endfor %}
     </ul>

kitsune/questions/jinja2/questions/mobile/new_question.html

@@ -25,7 +25,8 @@ <h2>{{ _('Products') }}</h2>
         <ul>
           {% for key, product in products.iteritems() %}
             <li class="{% if product == current_product %}selected{% endif %}">
-              <a href="{{ url('questions.aaq_step2', product_key=key) }}">
+              <a href="{{ url('questions.aaq_step2', product_key=key) }}" data-event-category="link click"
+              data-event-action="product" data-event-label="{{ product.name }}">
                 <span class="logo-sprite logo-{{ key }}"></span>
                 {{ product.name }}
               </a>

kitsune/questions/jinja2/questions/new_question.html

@@ -67,7 +67,7 @@ <h2 class="no-results">{{ _('This question has not been asked before.') }}</h2>
       <input type="hidden" name="search" value="{{ request.GET.search }}" />
       <input type="hidden" name="step" value="{% if user.is_authenticated() %}aaq-question{% else %}aaq-register{% endif %}" />
       {% set ga_action = 'pre-registered question' if user.is_authenticated() else 'step 1 link' %}
-      <button type="submit" data-ga-click="_trackEvent | Ask A Question Flow | {{ ga_action }}" class="btn btn-submit big">
+      <button type="submit" data-event-category="Ask A Question Flow" data-event-action="{{ ga_action }}" class="btn btn-submit big">
           {{ button_text }}
       </button>
     </form>
@@ -80,4 +80,4 @@ <h2>{{ _('Ask your question to our community of users') }}</h2>
 {% endblock %}
 
 {% block submit_button_value %}{{ _('Post Question') }}{% endblock %}
-{% block submit_button_attrs %}data-ga-click="_trackEvent | Ask A Question Flow | step 3 link"{% endblock %}
+{% block submit_button_attrs %}data-event-category="Ask A Question Flow" data-event-action="step 3 link"{% endblock %}

kitsune/questions/jinja2/questions/new_question_login.html

@@ -13,4 +13,4 @@
 {% endblock %}
 
 {% block submit_button_value %}{{ _('Post Question') }}{% endblock %}
-{% block submit_button_attrs %}data-ga-click="_trackEvent | Ask A Question Flow | step 3 link"{% endblock %}
+{% block submit_button_attrs %}data-event-category="Ask A Question Flow" data-event-action="step 3 link"{% endblock %}

kitsune/questions/static/questions/js/components/TitleContentEditor.jsx

@@ -107,7 +107,7 @@ class SuggestionItem extends React.Component {
       <li className={classString}>
         <a
           href={suggestion.url}
-          data-ga-click="_trackEvent | Ask A Question Flow - SPA | suggested article selected"
+          data-event-category="Ask A Question Flow - SPA" data-event-action="suggested article selected"
         >
           {suggestion.title}
         </a>

kitsune/search/jinja2/search/mobile/results.html

@@ -5,10 +5,6 @@
 {% set classes = 'results' %}
 {% set styles = ('mobile-search',) %}
 
-{% if num_results == 0 %}
-  {% set ga_push = [['_trackEvent', 'Zero Search Results', q]] %}
-{% endif %}
-
 {% block after_header %}
   <div class="search-bar slide-on-exposed">
     {{ mobile_results_form(q, search_params) }}

kitsune/search/jinja2/search/results.html

@@ -4,10 +4,6 @@
 {% from "search/includes/macros.html" import basic_search_form with context %}
 {% set meta = (('WT.oss', q), ('WT.oss_r', num_results), ('robots', 'noindex')) %}
 
-{% if num_results == 0 %}
-  {% set ga_push = [['_trackEvent', 'Zero Search Results', q]] %}
-{% endif %}
-
 {% if advanced %}
   {% set title = _('Advanced Search Results') %}
   {% set crumbs = [(url('search.advanced'), _('Advanced Search')), (None, _('Results'))] %}

kitsune/search/tests/test_search_simple.py

@@ -109,26 +109,6 @@ def test_clean_question_excerpt(self):
         doc = pq(response.content)
         assert 'script' not in doc('div.result').text()
 
-    def test_ga_zero_results_event(self):
-        """If there are no results, verify ga-push data attr on body."""
-        doc = DocumentFactory(title=u'audio', locale=u'en-US', category=10)
-        doc.products.add(ProductFactory(title=u'firefox', slug=u'desktop'))
-        RevisionFactory(document=doc, is_approved=True)
-
-        self.refresh()
-
-        # If there are results, data-ga-push should be an empty list.
-        response = self.client.get(reverse('search'), {'q': 'audio'})
-        eq_(200, response.status_code)
-        doc = pq(response.content)
-        eq_('[]', doc('body').attr('data-ga-push'))
-
-        # If there are no results, then Zero Search Results event is there.
-        response = self.client.get(reverse('search'), {'q': 'piranha'})
-        eq_(200, response.status_code)
-        doc = pq(response.content)
-        assert '"Zero Search Results"' in doc('body').attr('data-ga-push')
-
     def test_fallback_for_zero_results(self):
         """If there are no results, fallback to a list of top articles."""
         firefox = ProductFactory(title=u'firefox', slug=u'desktop')

kitsune/settings.py

@@ -966,6 +966,7 @@ def JINJA_CONFIG():
 GA_ACCOUNT = config('GA_ACCOUNT', 'something@developer.gserviceaccount.com')  # Google API Service Account email address
 GA_PROFILE_ID = config('GA_PROFILE_ID', default='12345678')  # Google Analytics profile id for SUMO prod
 GA_START_DATE = date(2012, 11, 10)
+GTM_CONTAINER_ID = config('GTM_CONTAINER_ID', default='') # Google container ID
 
 MOBILE_COOKIE = config('MOBILE_COOKIE', default='msumo')