Current Problem

Currently, this module adds jQuery as a dependency for administration, debugging and the public tracking script. The flexibility in Drupal 8 allows us to control that per library, and the simplicity of the public-facing script lends itself to removing that dependency. This would allow non-administrative and non-developer traffic to lighten their load and execution time when loading/running js/google_analytics.js.

Details

  • Javascript changes will only impact js/google_analytics.js
  • Make use of core domready
  • Leverage modern javascript solutions that fit the Drupal 8 browser requirements
CommentFileSizeAuthor
#27 2798731-27.patch7.86 KBMegha_kundar
#25 2798731-25-google_analytics-remove_jquery.patch7.88 KBptmkenny
#24 2798731-23-google_analytics-remove_jquery.patch7.85 KBptmkenny
#23 2798731-22-google_analytics-remove_jquery.patch7.75 KBptmkenny
#22 google-analytics-remove-jquery-dependency-2798731-22.patch6.91 KBkunal_singh
#21 google-analytics-remove-jquery-dependency-2798731-21.patch7.39 KBkunal_singh
#19 google-analytics-remove-jquery-dependency-2798731-19.patch7.39 KBbgilhome
#18 google-analytics-remove-jquery-dependency-2798731-18.patch7.37 KBbgilhome
#16 google-analytics-remove-jquery-dependency-2798731-16.patch7.39 KBgaurav.kapoor
#12 2798731-remove-jquery-dependency.png137.89 KBUpTil4Music
#4 2798731-remove-jquery-dependency.patch7.37 KBevanmwillhite
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

evanmwillhite created an issue. See original summary.

hass’s picture

Assigned: evanmwillhite » Unassigned
Category: Feature request » Support request
Status: Active » Closed (works as designed)

It looks like you have not seen that jquery is required by the script.

evanmwillhite’s picture

Assigned: Unassigned » evanmwillhite
Category: Support request » Feature request
Status: Closed (works as designed) » Active

I did see it's a requirement currently, and I'm working to rewrite the javascript to remove that requirement. I've changed the Category to "Feature Request" though, as I think that makes more sense. Works fine as-is, this would just be nice to have.

evanmwillhite’s picture

I've now edited js/google_analytics.js to be vanilla javascript and removed the dependency in google_analytics.libraries.yml.

evanmwillhite’s picture

Assigned: evanmwillhite » Unassigned
Status: Active » Needs review
hass’s picture

Status: Needs review » Postponed
Parent issue: » #2671716: Use Autotrack
evanmwillhite’s picture

@hass can we consider not postponing this? The autotrack issue won't resolve all of what is being handled in this script (e.g., mailto, downloads and colorbox), and I think this file being vanilla js would actually be a step toward playing well with autotrack, which is also vanilla js. It's also just a minor tweak to get it inline with Drupal 8 best practices. Implementing a library like Autotrack is a much larger task.

hass’s picture

I have no plans to commit this patch at all to a stable branch as I have no idea where the code comes from and re-inventing the wheel it not something I'd preferto do. I had so many issues in past and the functions .closest and .on are critical for proper functionality. I expect that we may not need the patch here at all after the AutoTrack feature goes in.

+++ b/js/google_analytics.js
@@ -100,6 +103,47 @@
+    for ( ; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode ) {

Never seen such code. No idea whaht the first ";" is doing there.

evanmwillhite’s picture

I believe a couple of items here need clarity: 1. the Autotrack association and 2. code/syntax and testing.

The Autotrack association

If the Autotrack library was implemented today, you would still need the majority of js/google_analytics.js, and that code currently is dependent on jQuery code. My changes would still stand and help to remove that dependency. Below is a list of the Autotrack functionality using the following format: PLUGIN_NAME (RELATIONSHIP TO JS/GOOGLE_ANALYTICS.JS): DESCRIPTION_OF_PLUGIN

  1. cleanUrlTracker (unrelated): allows for a canonical url for paths that should be tracked as the same (e.g., /contact and /contact?q=2)
  2. eventTracker (unrelated): This at first seems related, but it only adds the ability to use special event declarations in your HTML/markup, not in JS
  3. impressionTracker (unrelated): Track when elements are visible within the viewport.
  4. mediaQueryTracker (unrelated): Track media query changes
  5. outboundFormTracker (unrelated): Track FORM SUBMITS to external domains.
  6. outboundLinkTracker (related: see Drupal.google_analytics.isInternal function): Automatically tracks link clicks to external domains.
  7. pageVisibilityTracker (unrelated): tracks page visibility (e.g., if someone left a tab open and returned to view)
  8. socialWidgetTracker (unrelated): tracks user interactions with the official Facebook and Twitter widgets.
  9. urlChangeTracker (unrelated): At first seems related, but it uses the History API and does not track hash changes, which is what you are accomplishing in your file

In other words, below are the parts of js/google_analytics.js that would still be required even if the Autotrack plugin was used:

  1. Download tracking
  2. Mailto tracking
  3. Hash change tracking
  4. Colorbox tracking
  5. Wrapper functions to track the above events

In summary, I don't believe this should be seen as a child to the Autotrack issue.

Code syntax and testing

I want this javascript to be tested by the community. I have tested it myself manually in the D8 supported browsers, but I would expect and hope for feedback and assistance in making sure it is readable and functional. To answer your specific question, that semicolon at the opening of the for loop just means that the initial expression isn't required in this instance. Here's a good explanation.

But please hear me when I say I never expected this code to just be merged into the stable branch outright. I was hoping that it would stay in "Needs Review" until other javascript developers in the community had a chance to vet it. Is that a possibility?

evanmwillhite’s picture

@hass Have you had a chance to read through what I wrote above? Basically, the ideal situation is that this would be moved back to "Needs Review" so that it can get some community testing and vetting.

hass’s picture

I have no idea where the code comes from and re-inventing the wheel it not something I'd preferto do. I had so many issues in past and the functions .closest and .on are critical for proper functionality. If you coded closest yourself I'm sorry to say, but I do not know you and do not trust you to write stable code that works in all browsers. I do not like to maintain this on my own and we need to be safe that it works the next 10-15 years. If you cannot prove it comes 1:1 copy/paste from jquery i have no idea how we could maintain it properly.

UpTil4Music’s picture

For what it's worth, I applied the patch from #4 at Simplytest.me. Using the Stark theme from core, I can confirm that:

  1. jQuery is not being loaded
  2. Google Analytics is working properly

I added the site to my GA Account, and immediately started receiving data. I've got Event data for Downloads, Messages, Outbound links and Emails. Nothing that I've tried in about two hours of kicking the tires hasn't worked.

@hass Thanks for the excellent module. Would you reconsider using @evanmwillhite 's excellent work in removing the jQuery dependency? It would be really nice to not have the performance hit.

hass’s picture

Ask yourself - is it worth risking 400K sites for something not tested and not properly maintained? There are not answers, too.

GrandmaGlassesRopeMan’s picture

Status: Postponed » Needs review

Overall, I can see the benefit of this refactor. jQuery gives us a consistent interface to potentially inconsistent browser DOM manipulations, however most of these actions probably don't need to be preformed with jQuery. Most of these are minor nits, and could be addressed easily.

  1. +++ b/js/google_analytics.js
    @@ -3,74 +3,77 @@
    +      var elementClicked = Drupal.google_analytics.getClosest(event.target, "a,area");
    

    Needs single quotes.

  2. +++ b/js/google_analytics.js
    @@ -3,74 +3,77 @@
    +        var fullHref = elementClicked.href;
    

    Maybe add some documentation about these two variables and their difference.

  3. +++ b/js/google_analytics.js
    @@ -100,6 +103,47 @@
    +    for (var i=0, iLen=evts.length; i<iLen; i++) {
    

    Spacing around infix operators.

  4. +++ b/js/google_analytics.js
    @@ -100,6 +103,47 @@
    +    for ( ; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode ) {
    

    Like previously mentioned, this is actually somewhat confusing.

  5. +++ b/js/google_analytics.js
    @@ -100,6 +103,47 @@
    +      for (var i = 0, len = selectors.length; i < len; i++) {
    

    Can we remove the sub loop here? Perhaps filter?

  6. +++ b/js/google_analytics.js
    @@ -100,6 +103,47 @@
    +        if ( elem.tagName.toLowerCase() === selectors[i] ) {
    

    Consistency around spacing of ( ).

  7. +++ b/js/google_analytics.js
    @@ -100,6 +103,47 @@
    +      return null;
    

    Benefit of returning null?

  8. +++ b/js/google_analytics.js
    @@ -110,7 +154,7 @@
    +    return crossDomains.indexOf(hostname) > -1 ? true : false;
    

    I'm always a bit skeptical of returning a boolean from a ternary operator.

hass’s picture

Status: Needs review » Needs work

Looks like you selected the wrong state.

gaurav.kapoor’s picture

krlucas’s picture

Status: Needs review » Needs work
Issue tags: +Needs tests

It would be awesome to remove jQuery as a strict dependency for this module especially for mobile browsers.

To @hass' (implicit) point though, this should never get committed without tests, especially now that Drupal has JavascriptTestBase.

bgilhome’s picture

Patch re-rolled to current 8.x-2.x.

bgilhome’s picture

sahaj’s picture

@bgilhome any possibility to re-roll the patch for current 8.x-3.x ?

That would be great!

kunal_singh’s picture

Version: 8.x-2.x-dev » 8.x-3.x-dev
Status: Needs work » Needs review
FileSize
7.39 KB

Patch re-rolled for 8.x-3.x

kunal_singh’s picture

Oops... Uploaded the wrong file.
Patch re-rolled for 8.x-3.x

ptmkenny’s picture

Version: 8.x-3.x-dev » 4.x-dev
Status: Needs review » Needs work
FileSize
7.75 KB

Re-roll for 4.x. Setting back to "needs work" because it still needs tests.

ptmkenny’s picture

Fix mistake in re-roll. Hiding old patch.

ptmkenny’s picture

Megha_kundar’s picture

Hi @ptmkenny,
I see from your latest comment that patch is rerolled because domready is deprecated.
But i see in your patch has core/domready is adding dependency.
I believe it is added by mistakenly.
I have updated patch removing domready library

Megha_kundar’s picture

Megha_kundar’s picture

Status: Needs work » Needs review