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:
1. Create your GTM account or log into your existing one.
2. Copy the GTM snippet.
3. In the dashboard, navigate to account > Global Doc settings. On this page, admins and designers can preconfigure seven settings.
Scroll down to the Google Tag Manager (GTM) section, and implement your GTM script there. Now, every new Foleon Doc will start with these settings, whether you start a Doc from scratch or from a template.
4. To inject a script into an existing Foleon Doc, click menu > Doc settings in your content editor. In the Global Doc settings section, you can fill the GTM field for a specific Foleon Doc only.
5. Publish or republish your Foleon Doc.
That’s it. You’ve now linked your Foleon Doc with your GTM container.
How single-page applications (SPA) like Foleon work
Foleon documents work slightly differently than your average web page, since they are single-page applications (SPA).
A single-page application is exactly what its name implies: a JavaScript-driven web application that requires only a single page load. This means that Foleon documents never need to talk to the server after loading.
A Foleon document is loaded once, and the content inside the browser is dynamically changed when switching a page. This impacts 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 use an additional trigger for your tags. Instead of only using a page view trigger, you must also 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.