Module breaks or blocks other javascript

Here's a patch that's fixing the issue for me.

Im getting the following error when adding a product to the cart with ajax, both with and without this patch.

If i disable the module it goes away.

I'm using Drupal 9.5.11

"
An AJAX HTTP error occurred.
HTTP Result Code: 200
Debugging information follows.
Path: /event/365052?ajax_form=1
StatusText: OK
ResponseText: TypeError: Drupal\commerce\Context::__construct(): Argument #1 ($customer) must be of type Drupal\Core\Session\AccountInterface, null given, called in /Users/XXXXX/web/modules/contrib/commerce/modules/cart/src/Form/AddToCartForm.php on line 248 in Drupal\commerce\Context->__construct() (line 58 of /Users/XXXXX/web/modules/contrib/commerce/src/Context.php)."

@andyg5000 could you please turn this into a MR?

BTW should this eventually even use async? Is there any documentation from facebook available for best practice?

Meta's best practices guide says to place it in the HEAD
https://www.facebook.com/business/help/218844828315224?id=1205376682832142

This is to ensure that an ad conversion is counted. However it will also slow down page load which IMO is far more important to conversion than the metrics catching users that close the page while it's still loading.

I'm working on this issue, Friday, September 6, to Update the Issue Summary. This is my first contribution, Feel free to correct me if I did wrong on this. Thank you.

Hey, we want to test this issue, but we're concerned that it will take a lot of time. Also, setting it up on the commerce site seems really complicated. Do you have any suggestions to make the process of creating a commerce site faster?

Based on #7 it should be a setting IMHO. What should be the default?

rhovland → closed merge request !23

After examining the code closer it appears that the tracking code is already async. It however is not deferred. My best understanding of this is that the assets will load in parallel with the rest of the page but still be parsed as the page is loading. If it was deferred then the browser would wait until the page is loaded to request and parse the tracking script.

I examined several other tracking modules and almost all of them attach their code in the HEAD as well. So the source of the bug is still unknown.

Also there's some information missing here as commerce does not use ajax to submit the add to cart form. It only uses ajax when selecting variations. We need to know the name of the module that ajaxifies the add to cart button to properly debug this.

Thanks for your investigations @rhovland!
Anyway we could still make this a setting defaulting to the suggestion from facebook to put it into the header and link the documentation.

I'm unsure, but looks like generally this works as designed.

@andyg5000 @rhovland so focus on ✨ Add option to defer loading pixel Needs work ?

Since we don't know the cause of the original issue there's no way to know if deferring loading would work the same as moving it to the footer. There could be an issue in the module's code itself instead of the facebook pixel library. There could be a name collision or something similar going on. There could be problem with the way window is used.

I don't have the needed javascript knowledge to examine the code and tell what's done correctly and what isn't.

The libraries.yml entry encompasses the entire module's javascript code including the configuration checks. Deferring loading can either be done at the libraries.yml level (not really needed) or in the request for the facebook pixel code (an external resource that could slow down page loads).