Solved

Embedded Forms Loading Slow

  • 12 October 2021
  • 1 reply
  • 710 views

Badge +2

I embedded a form on a page builder for my website and that form is taking way to long to load and sometimes wont even appear on the page please help.

 

https://www.yellowtree.com.au/pages/yellowtree-au this is the link to that page.

icon

Best answer by alex.hong 12 October 2021, 22:48

View original

1 reply

Userlevel 7
Badge +58

Hi there @YT123,

Welcome to the Community and thanks for posting your question here! Sorry to hear that you are suffering from long load times with your embedded forms. 

 

Without having an in-depth look into your specific form, it is difficult to pinpoint the exact reason you might be encountering this. 

These two posts are great examples of what might be going on with your form. Additionally, if you have a Shopify integration things could be different. 

If you are concerned with your site's performance and loading speed, you can manually install klaviyo.js in your Shopify theme files.
Note that you should only do this if you experience very high web traffic or your site suffers from slow loading time for any other reason. Otherwise, we recommend you install klaviyo.js by checking the box on the Shopify integration settings page.

Install klaviyo.js in Your Shopify Store

To install klaviyo.js into your Shopify store, copy the snippet of code below, and paste it into your theme.liquid file.

  1. In the script below, be sure to replace 'API_KEY' with your Public API Key from your Klaviyo account.

    <script type="text/javascript" async 
    src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=API_KEY"></script>

    If you've enabled Customer Accounts for your store, you can add and extra script to identify your customers with the email they use to log in to your store.

    Again, be sure to replace 'API_KEY' with your Public API Key from your Klaviyo account. The full script will look like the following:

    <script async type="text/javascript"
     src="//static.klaviyo.com/onsite/js/klaviyo.js?company_id=API_KEY"></script>
    <script>
     var _learnq = _learnq || [];
     if ('{{ customer.email }}') {
       _learnq.push(['identify', {
           '$email' : '{{ customer.email }}'
         }]);
      }
    </script>

    After you've updated the code snippet, copy it, and move to the next step.

  2. Next, from your Shopify Admin click Online Store > Themes. From the dropdown click Edit Code.
    mceclip4.png
  3. Search for the theme.liquid file. Click on the file to open it in the editor.
    themeLiquid.png
  4. Scroll to the bottom of the file and locate the closing </body> tag. Paste the first code snippet directly before the closing </body> tag. Click Save.
    2018-09-10_11-39-56.png
  5. Click Save.
  6. Switch back to your Klaviyo account. Click the Setup Web Tracking link in the account dropdown.setup-web-tracking.png
  7. Enter the URL for your Shopify store into the box. Click Next.
    mceclip7.png
  8. Click the link that is generated. This triggers an Active on Site event in your Klaviyo account.
    shopify-integration-web-tracking-data-received.png

A green Data Received button confirms that your web tracking is set up correctly. 

Lastly, I would also throw in the idea to create a legacy sign-up form so it loads at the same time as the website, avoiding any delays.

 

Hope this helped!

Alex

Reply