Problem/Motivation

The opt-in dialog does not appear unless the page is manually refreshed. This happens because the Google API script loads asynchronously after the Drupal behavior runs.

Steps to reproduce

  1. Configure the module with a valid Merchant ID;
  2. Enable the Google Customer Reviews pane on the checkout complete step (default configuration);
  3. Complete a checkout;
  4. Observe that the opt-in dialog does not appear on the complete page;
  5. Refresh the page => the dialog now appears.

Proposed resolution

Two issues prevent the dialog from showing:

Incorrect onload handler

In google_customer_reviews.libraries.yml, the onload attribute uses onload: renderOptIn which only references the function but does not call it. It should be onload: "renderOptIn()".

Remaining tasks

  • Review and test the patch

User interface changes

None

API changes

None

Data model changes

None

CommentFileSizeAuthor
#3 optin-dialog-fix-3571687-2.patch570 bytesoana.hulpoi
optin-dialog-fix.patch1.42 KBoana.hulpoi

Issue fork google_customer_reviews-3571687

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

oana.hulpoi created an issue. See original summary.

oana.hulpoi’s picture

oana.hulpoi commented
Issue summary: View changes
oana.hulpoi’s picture

oana.hulpoi commented
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new optin-dialog-fix-3571687-2.patch570 bytes

After further investigation, the root cause is simpler than initially described. The issue is only in the library definition.

The original google_customer_reviews.libraries.yml uses an HTML onload attribute:
https://apis.google.com/js/platform.js: { type: external, attributes: { async: true, defer: true, onload: renderOptIn } }
This references the function but doesn't reliably call it after the API is fully initialized.

Google's documentation specifies using the ?onload query parameter on the script URL:
https://apis.google.com/js/platform.js?onload=renderOptIn: { type: external, attributes: { async: true, defer: true } }
This is Google's own callback mechanism built into platform.js. It calls renderOptIn() after the API is fully initialized.
No changes needed to the JS file. Updated patch attached with the one-line YAML fix.

rhovland made their first commit to this issue’s fork.

rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented

Thank you for reporting this. I tested the module and have had it in production for a while now but missed this. I'm curious what browser did you encounter this in.

From my research it appears that the way I wrote this library file puts the onload as an HTML attribute which I guess sometimes fails to trigger in some browsers?

You're definitely right that google expects it in the url. I didn't know there was a difference.

rhovland opened merge request !2

rhovland’s picture

rhovland
he/him
Primary language English
Location Oregon
commented
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • rhovland committed 2ec13082 on 2.x 
    fix: #3571687 Opt-in dialog not showing without page refresh

By: oana....

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.