0

I have an issue with a script in my website. The application is based on RAILS 7 and Stimulus. I have added an external script in order to generate a simple form to sign-in for a newsletter (it is simply an input for the email and the submit button) based on Klaviyo. Klaviyo provides a short html code to generate their newsletter signup form. (shown below).

The form is shown in the footer and have to appear on all the pages of the website.

Actual behavior: the script is loaded only the first time the page loads. During the navigation the script is no more executed. If I refresh the form reappears, I think because the script is reexecuted only on refresh. I think it is related on the philosophy of turbolinks and stimulus themselves.

Expected behavior: I need the script executed on all the pages.

My external script (provided by Klaviyo):

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

I tried both putting it in head at the end of body section. I tried to add "defer" and/or "async" I tried to add "data-turbolinks-track='reload'"

The code related to form is:

<div class="klaviyo-form-MyFormCode"></div>

Is there a way to force turbolinks execute the script after the page is completely rendered? I want to still go on using turbolinks to get its advantages and I don't want to disable it only for this very small script.

versions:

  • Rails 7
  • ruby 3.0.3
  • turbolinks 5.2.1
  • turbo-rails 1.0.1
  • stimulus-rails 1.0.4

thanks a lot

Roberto Boldi
  • 117
  • 1
  • 7
  • Are you mixing turbo-rails and turbo links? Turbo replaced turbo-links – appleII717 Jun 22 '22 at 13:34
  • I haven't installed turbolinks, I know it is replaced by Turbo, I found it as dependency in gemfile.lock. I suppose it is used by active-admin Anyway have you any suggestion to make me run the script on loading a new page? – Roberto Boldi Jun 25 '22 at 16:19
  • I FOUND A SOLUTION!!! I don't know if it is the perfect way to proceed, but it works. I put an ID on the div containing the newsletter form and the attribute "data-turbo-permanent" on the same div. This block any modification of the newsletter form and keeps it as created the first time – Roberto Boldi Jul 01 '22 at 14:16

0 Answers0