Snippets
Snippets are blocks of code shared at the site level that can be added to your pages. Code that is not visual, such as Google Analytics, Facebook pixels, or custom CSS, should be placed into snippets. We recommend using separate snippets for each block of code to keep things flexible and easy to find.
Creating a snippet
To create a new snippet, deselect all elements and click the Page tab in the right sidebar. Click the ”+” icon in the “Snippets” panel, and select “Create snippet” in the menu.
Name your snippet, paste in your code, and add cleanup code if necessary. You can select if the code should be placed in the <head> or end of the closing <body>. If you’re unsure which to choose, please check with the code’s documentation. Lastly, select whether or not to automatically include this snippet when new pages are created.
After clicking “Create” you’ll be given the option of adding the new snippet to your current page or all pages in your site. This snippet will also appear in the add snippet menu for pages that don’t already include it.
To remove a snippet from a page, click on the — found on each snippet row.
Managing snippets
Opening a snippet’s action menu will display options to edit the snippet or add it to all pages. When editing a snippet, saved changes will be applied to all pages using this snippet. Deleting a snippet will remove it from all pages in a site.
Snippets and client-side routing
Makeswift sites are Next.js applications and feature client-side routing for blazing fast navigation throughout your site. Navigating between pages within the site does not cause a page refresh, which requires additional considerations for certain types of snippets.
Sometimes you want to be able to run a snippet in specific pages but not in others. For example, you might want a chat support widget on your marketing pages but not on your blog pages. Makeswift will automatically remove the relevant snippet HTML and CSS when moving from a page with a snippet to a page that doesn’t have that snippet. But if the snippet ran a side effect with JavaScript (i.e., installing a chat support widget), then a clean up script will need to be provided (i.e., to uninstall the chat support widget).
Note, the clean up script is only needed when a snippet isn’t used in all pages and also has some sort of side effect that needs to be cleaned up.
Clean up script example
Google Analytics provides instructions for measuring page activity in single page applications. Here’s an example of what that looks like in Makeswift.
Snippet
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<!-- Google Analytics SPA Tracking -->
<script>
window['ga-disable-UA-XXXXX-Y'] = false;
function onStateChange(state) {
ga('set', 'page', state.url);
ga('send', 'pageview');
}
var originalPushState = window.history.pushState;
window.history.pushState = function pushState(state) {
originalPushState.apply(window.history, arguments);
onStateChange(state);
};
var originalReplaceState = window.history.replaceState;
window.history.replaceState = function replaceState(state) {
originalReplaceState.apply(window.history, arguments);
onStateChange(state);
};
</script>
<!-- End Google Analytics SPA Tracking -->
Clean up script
window['ga-disable-UA-XXXXX-Y'] = true;
window.history.pushState = originalPushState;
window.history.replaceState = originalReplaceState;
Pro tips
Snippets can be configured to be automatically added to all new pages. To do so, check the box labeled “Add to new pages by default” when creating or editing a snippet. This is useful for snippets that should be included on every page, such as Google Analytics or Facebook pixels
Developer notes
When using a custom host, we suggest using next/script to add snippets directly to your codebase. Using next/script in Next.js is beneficial because it optimizes the loading of third-party scripts, ensuring they don’t block the main thread and improving page performance. It also allows for fine-grained control over script loading behavior, such as lazy loading or loading only after the page has rendered, enhancing the overall user experience.
Any snippets that need to be maintained by non-developers should be added to Makeswift as snippets. This allows for easy management and editing by non-technical users.