Google Tag Manager (GTM) is an external script manager. Instead of placing all these external tools (scripts) in the head of your web page or Foleon document, you place them in GTM. In this article, we discuss how you can use our GTM integration to manage your scripts in Foleon.
💡 This feature is not included in every plan. If you're interested in using this functionality, please reach out to our Customer Success Management team.
In this article
What is Google Tag Manager (GTM)?
Google Tag Manager (GTM) was first introduced in 2012 and since then it has become a major tool for marketers. Since its release, marketers are able to control scripts on their websites themselves, without development resources.
Google Tag Manager is an external script manager. Instead of placing all these external tools (scripts) in the head of your web page or Foleon document, you place them in GTM. Then the only thing you need to do is add the GTM container (which is a script) to the head of your web page or Foleon document.
⚠️ Important to know: the GTM field creates a lot of possibilities. However, with great power comes great responsibility. Adding custom code to this field might cause issues for your content. For that reason, any custom code that has been implemented is the responsibility of the creator.
Installing the GTM container
Enabling GTM on your Foleon document is easy. Here are the steps you need to follow:
Create your GTM account or log into your existing one.
Copy the GTM snippet.
3. Add the GTM snippet to the GTM field in the editor.
4. Publish or republish your Foleon Doc.
That’s it. You’ve now linked your Foleon document with your GTM container.
How single-page applications (SPA) like Foleon work
Foleon documents work a little differently than your average web page, since they are single-page applications (SPA).
A Foleon document is loaded once and that the content inside the browser is dynamically changed when switching a page. This has an impact on your Google Tag Manager setup.
For example, your page view tag in GTM will fire only once in Foleon documents. When you visit the next page, the page will not reload and therefore no new page view trigger will be fired. But don’t worry, there’s an easy way to fix this.
The only thing you have to do to fix this situation is using an additional trigger for your tags. Instead of only using a page view trigger, you also need to use the ‘History Change’ trigger. This is one of the default triggers in GTM.
Where the page view tag will fire once the page is loaded, the History Change trigger will fire every time the URL changes. Read the chapter below to see how to set this up.
💡 Some tags don’t require to be fired on each page. For example: if you load a chatbot on a Foleon document on a page view trigger, it will remain visible on all pages. The content is dynamically changed, but the tag will remain active when a reader visits the next page.
In general, if your script or tool requires information about which page they are on, then it’s often wise to fire the script on each page. This could be the case if your chatbot has certain rules on which messages to display on which page for example.
How to fire tags for a Foleon document
Here’s an example. We’re going to use a Facebook pixel on our Foleon document. Our document has 5 pages and looks like this:
Page 1 - myproject.foleon.com/mydocument/cover
Page 2 - myproject.foleon.com/mydocument/index
Page 3 - myproject.foleon.com/mydocument/article1
Page 4 - myproject.foleon.com/mydocument/article2
Page 5 - myproject.foleon.com/mydocument/contact-us
The first thing we need to do is copy our script from the Facebook platform and add it to a custom HTML tag in GTM.
Next, we’ll have to add a trigger, a page view trigger to be exact. Our tag looks like this now:
For the average website, this will be enough to fire the Facebook pixel on each web page. But because Foleon documents are single-page applications, this tag will only fire once when the page is loaded.
What we need to do next is add a History Change trigger to this tag. Let’s create that. Open up the trigger section and add a new trigger. Under ‘other’ select History Change’.
Then name and save it.
By default, this trigger will fire on any page change. You can add additional trigger rules so this trigger will only fire on your specific project or Foleon Doc. Here’s an example of a trigger that will only fire on each page change with our example Foleon project.
Now we can add this trigger to our tag that contains the Facebook pixel.
That’s it. This tag containing a Facebook pixel will now fire once the page is loaded and then every time the page is changed.