Statie 3: How to Add Reusable Parts of Code

You already know how to run Statie with layout and how to add data structures.

Today I will show you: how to use decouple big templates to smaller and reusable snippets. Like Google Analytics code.

Sometimes you need to add part of template, that you want to use on multiple pages (in the same form or with smaller changes) or that makes your template less readable.

Google Analytics

Often you start a new web with settings up Google Analytics measure code.

It looks like this:

<script>
    ga=function(){ ga.q.push(arguments) };
    ga.q=[];
    ga.l=+new Date;
    ga('create', 'YXZ', 'auto');
    ga('send','pageview');
</script>
<script async defer src="https://www.google-analytics.com/analytics.js"></script>

We put into layout:

<!-- source/_layouts/default.latte -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        {block content}{/block}

        <script>
            ga=function(){ ga.q.push(arguments) };
            ga.q=[];
            ga.l=+new Date;
            ga('create', 'XYZ', 'auto');
            ga('send','pageview');
        </script>
        <script async defer src="https://www.google-analytics.com/analytics.js"></script>
    </body>
</html>

This layout might be small, but it will be definitely bigger in real app and will keep growing and growing in time.

Google Analytics code is not something we change or extend too much. Why not outsource it?

Sexy & Small Snippet

What if you could use some "include googleAnalytics snippet" command?

With Statie you can!

{include "googleAnalytics"}

How does it Work?

Statie scans /_snippets directory and turns all files to snippets. Name of the file represents key for including the snippets.

Decoupling the Snippet

First, we create the snippet file and move the Google Analytics code there:

<!-- source/_snippets/googleAnalytics.latte -->

<script>
    ga=function(){ ga.q.push(arguments) };
    ga.q=[];
    ga.l=+new Date;
    ga('create', 'XYZ', 'auto');
    ga('send','pageview');
</script>
<script async defer src="https://www.google-analytics.com/analytics.js"></script>

Then clean the layout:

<!-- source/_layouts/default.latte -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        {block content}{/block}
        {include "googleAnalytics"}
    </body>
</html>

There is one last think that bothers me:

ga('create', 'XYZ', 'auto');

Can you see it?

ProTip #1: Why Always Put IDs to Config and Not to Code

When you start using static site generator, you'll appreciate its power in scaling:

To allow this flow, I recommend keeping all IDs that change from site to site - Google Analytics, Facebook Pixel, Disqus ID... - in _config/config.neon file. When you create a new website, all you have to do is change one file to make it customized.

How To Do It

I wrote about config in previous post - go read it, if you missed it.

So you should end up with this:

ga('create', {$googleAnalytics}, 'auto');

Nice work!

ProTip #2: Too Many Snippets? Group them by Type

Often, I've ended up with many unrelated snippets in one directory.

/source
    /_snippets
        comments.latte
        header.latte
        footer.latte
        postMetadata.latte
        postHeadline.latte
        postRecommendations.latte

There is no need for that. You can group them to subdirs as you like. Nothing changes.

/source
    /_snippets
        /layout
            header.latte
            footer.latte
        /post
            comments.latte
            postMetadata.latte
            postHeadline.latte
            postRecommendations.latte

Now You Know

Happy coding!



What do you think?