BrightonSEO / Juicer GTM Test
It isn’t always possible to implement code onto a clients website, typically simple fixes and implementation can take months, however GTM often makes it possible for us to put JavaScript straight onto a clients website. As an example, imagine wanting to put a social feed onto a clients website, a hashtag or a particular account.
Testing – embedding a Juicer.io social feed on a site through GTM – full example here –
http://usablecontent.co.uk/juicer-test-using-gtm/
1. Signed up at Juicer.io
2. Created my feed
3. Put the code and CSS into GTM
<script src=”//assets.juicer.io/embed.js” type=”text/javascript”></script>
<link href=”//assets.juicer.io/embed.css” media=”all” rel=”stylesheet” type=”text/css” />
4. put the code on the page
<ul class=”juicer-feed” data-feed-id=”brightonseo-example”><h1 class=”referral”><a href=”http://www.juicer.io”>Powered by Juicer</a></h1></ul>
5. Done (with a bit of help from the guys at Juicer – great support!)
Testing this it didn’t work, but this was because WordPress was changing the speechmarks (“) to the wrong type and with a bit of fiddling, it worked.
Full GTM implementation
(without having to put any code on the site)
The next stage was to test if this worked without needing to put the <ul class=”juicer-feed” … on the page, imagine if using GTM you can take any div, and providing it has an id it is pretty easy to use GTM to change this to being the content you want it to be – on the test page, I changed it to simple text “this is a blank page”, then used “innerhtml” to change this, meaning I can overwrite any named element on the page…
Set the trigger to being the URL you want the feed to be on, if you are overwriting the content div, it doesn’t matter what it says.
Suddenly using just GTM you can choose almost any page you want to replace the contents with a social feed…
Again, this demonstrates the power and ultimately the risk of giving the wrong person Tag Manager access.
Except it hasn’t worked 🙁
My guess is that for whatever reason it is stripping out the outer-level of html.
Try replacing this line:
Powered by Juicer
with this line:
Whoops, needed to escape those lines I guess!
replace this line
`Powered by Juicer`
with
“
No quotes, obviously.
Ugh that didn’t work either! Okay I am just going to send you an email
Thanks guys this got it working! – in fact it can now be deployed exclusively through GTM.