Best practices for third party tracking snippets that include single JavaScript files and JavaScript blocks?

[cfxd]

Problem

Best practices are unclear for installing the many third party tracking apps offered by Shopify vendors. These scripts are similar to Google Analytics where a <script> tag links to an external third party single JS file, and a subsequent block of code then invokes a function, method, or object/class/variable from the JS file.

Saving these single JS files locally seems rather tedious and then charges developers with keeping the vendor file updated, and just adding them to a template/section/snippet could end up render blocking.

One example is Klaviyo's back in stock flow snippet:

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "API key",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "btn",
      product_page_text_align: "center",
      product_page_margin: "0px",
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

[fbushell]

Not sure if this is helpful but we recently moved all of our third-party scripts on sites to Google Tag Manager which gives you and the client a central place to manage everything without needing to re-deploy the theme. You can also specify when and how to invoke the scripts which keep things performant.

[cfxd]

It's helpful yet also poses more questions. How are you integrating GTM?

[jonathanmoore]

@cfxd This does not have anything to do with Slate, and it's more of a general Shopify development question. The Shopify Community is a great place to ask questions like this. https://community.shopify.com/c/Shopify-Community/ct-p/en

Although I will say that this is by far the best guide I have found to integrate GTM for shops that are not Shopify Plus accounts. https://www.getelevar.com/how-to/google-tag-manager-shopify/

[cfxd]

@jonathanmoore thank you for the link. I do think it has something to do with Slate since I'm asking about best practices. If I wasn't working with Slate then I could just, as most third party integration guides suggest, paste that code right before </body>, but then I lose async and ideally I'd like not to.

[curiouscrusher]

@cfxd I would second the use of GTM for this scenario. I definitely can relate to the pain of having to keep up with all the 3rd party scripts, and while dropping them in theme.liquid with async/defer does work it just doesn't feel great. I think you'll be hard pressed to find a theme based solution that doesn't create the developer overhead you mentioned because as soon as those scripts hit the theme files they're part of the build/git/backup process.

With GTM containers though you can really fine tune script behavior, add triggers, specific page loading, etc. The one drawback that immediately comes to mind here is that you lose Liquid templating with the scripts by removing them from your theme. However you could easily add just about any variable to your data layer with JS and use them in GTM however you need.