Third-party embeded content appears and disappears

Hi, I am building a site that uses a third-party embedded form (from EveryAction) and it keeps loading and then quickly disappearing. There’s no console errors or build errors. The form is located here: https://aclu-taan.netlify.app/form/

It works correctly on my local server, I’m only encountering this issue once I deploy to Netlify. Has anyone encountered something like this or have tips for why my embedded content keeps disappearing? Thanks!

Here’s the relevant portion of the code:

    <link rel="preload" href="https://d3rse9xjbp8270.cloudfront.net/at.min.css" as="style" />

    <script
      type="text/javascript"
      src="https://d3rse9xjbp8270.cloudfront.net/at.js"
      crossorigin="anonymous"
    ></script>
  </Helmet>
  <div
    class="ngp-form"
    data-form-url="https://secure.everyaction.com/v1/Forms/6_HjkC-M6ku1lmNUC957nw2"
    data-fastaction-endpoint="https://fastaction.ngpvan.com"
    data-inline-errors="true"
    data-fastaction-nologin="true"
    data-databag-endpoint="https://profile.ngpvan.com"
    data-databag="everybody"
    data-mobile-autofocus="false"
  ></div>

Hey @evanoneil,
Are you still running into this issue? When I load your url in both Firefox and Chrome, I’m not seeing the form quickly disappear. I do see a console error with the InternationalPhoneView.js script: Uncaught TypeError: t is undefined.

Let us know if you’re still experiencing this and we’ll keep digging. If you could link to a screen recording of what you’re seeing that would help as well. Thanks! And thanks for working on this important project!

1 Like

Hi @jen , thanks so much for looking into this!

I am still encountering this. I changed the front page to an iframe embed, but on /form, it’s still happening, here’s a screen recording I just took: https://www.dropbox.com/s/e1uln64se77tx8s/RecordIt-1596053456.mov?dl=0, it’s the same on desktop as well. I thought it might have been a content blocker causing it, but seems like that’s not it. Sometimes it will load on the first try, but only occasionally and after a refresh it starts disappearing. Thanks again for helping us on this!

Hey @evanoneil,
Thanks for sharing that. I ultimately was able to reproduce this on Firefox- it was just happening so fast that I couldn’t see it without testing a bunch, even with a screen recording!

I went ahead and made a site with just your form (much like the form you’re pulling in via iframe on your main page): https://flamboyant-kepler-826c7a.netlify.app/

The fact that this works, as does your iframe site, and that neither show the console error in the InternationalPhoneView.js script, suggests to me that the problem really is with that script. It obviously works fine on its own, but when it sits with the rest of your code, it does not work. The line where the error is happening is:

getNumberOnly: function () {
        var number;
        if (window.intlTelInputUtils) {
          number = this.intlTelInstance.getNumber(window.intlTelInputUtils.numberFormat.NATIONAL);
          if (this.name === 'WorkPhone' && this.intlTelInstance.getExtension()) {
            var ext = this.intlTelInstance.getExtension();
            // get phone number without extension
            number = number.substr(0, number.length - ext.length);
          }
        } else {
          number = Backbone.$(this.controlClass).val();
        }
        return number.replace(/\D/g, ''); <---- this line
      },

The error in Chrome is better: Uncaught TypeError: Cannot read property 'replace' of undefined

So I think there’s no number there for spaces and chars to be stripped from by the time that call is made- maybe intlTelInputUtils haven’t been loaded yet? Not sure! But I would tinker with that code or the timing of how you load those phone scripts and see if it fixes things for you. Let us know how it goes!

3 Likes

Thanks so much again @jen, this reply has helped get closer to a solution. You were right on that the problem is with their script, specifically how it interacts with Gatsby. I sent that on to the EveryAction support team, after some back and forth, they replied:

"I checked in with our Digital team and they did say that they’ve seen other reports of issues when using the Gatsby framework. They said that ActionTag looks for an instantiation and they think that the Gatsby setup isn’t giving ActionTag that clear heads up that it’s loading. They’ve created a ticket to improve the ActionTag handling for frameworks like these, but in the more immediate, your best solution would be to tell the page to load the ActionTag embed). "

edit: sorry I realized this has gone way out of the scope of this forum

2 Likes