Change Google Analytics code using Plates

Question

Change Google Analytics code using Plates

98 Views Asked by Michael Robinson At 06 February 2013 at 10:53

Is there a way to change the Google Analytics code included in a template using Plates?

For example, for the below template:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script id="googleAnalytics">
        var _gaq=[['_setAccount','GA_ACCOUNT_CODE'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>

I would like to use a different GA_ACCOUNT_CODE depending on the environment the code runs in.

Is this possible with Plates? If not, what is the common way one would solve this issue in NodeJS & Flatiron?

Original Q&A

There are 1 best solutions below

**thgie** · Answer 1 · 2013-02-19T10:29:00.507000

Plates' idea is great but far from complete. Here is a solution.

app.js

var fs = require('fs'); var plates = require('plates'); var flatiron = require('flatiron'); var app = flatiron.app;

app.use(flatiron.plugins.http);

app.router.get('/', function(){
    var html = fs.readFileSync('index.html', 'utf-8');
    var map  = plates.Map();
    var data = {"GA_ACCOUNT_CODE": "YOUR_CODE_FROM_CONFIG"}

    map.where('data-ga').is('GA_ACCOUNT_CODE').insert('GA_ACCOUNT_CODE');
    html = plates.bind(html, data, map);
    this.res.html(html);
});

app.start(3000);

index.html

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script id="googleAnalytics" data-ga="GA_ACCOUNT_CODE">
            var GA_ACCOUNT_CODE = document.getElementById('googleAnalytics').getAttribute('data-ga');

            var _gaq=[['_setAccount',GA_ACCOUNT_CODE],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>

Another way would just be string.replace() like this:

var html = fs.readFileSync('index.html', 'utf-8');
html     = html.replace('GA_ACCOUNT_CODE', 'YOUR_CODE_FROM_CONFIG');

this.res.html(html);

Have a look at cheerio for support. It's like any other css selector and dom manipulation frontend library, just backends.

Change Google Analytics code using Plates

There are 1 best solutions below

app.js

index.html

Related Questions in NODE.JS

Related Questions in FLATIRON.JS

Related Questions in PLATES

Trending Questions

Popular # Hahtags

Popular Questions