Magnolia 5.4 reached end of life on November 15, 2018. This branch is no longer supported, see End-of-life policy.
The Marketing Tags app is a central place to manage marketing tags such as Web analytics, third-party content and advertising network code snippets. The app allows you to create tags and place them on pages.
A tag is typically a piece of JavaScript code. When a page loads, the JavaScript code runs and collects usage information about the page and the visitor. The tag then reports this information to the service that provided the tag. The service stores and analyses the information. If the service provides an analytics dashboard you can display it in the Marketing Tags app.
For more information about what marketing tags are and how they are used, see:
The Marketing Tags app is installed by the Marketing Tags module. The app is configured at Configuration > /modules/marketing-tags/
.
Node name |
---|
modules |
marketing-tags |
The app operates on the tags
workspace where the code snippets and their details are stored.
The Marketing Tags module registers a custom mgnl:tag
node type. The Marketing Tags app operates on nodes of this type.
The module inserts marketing tags into three alternative page areas: bodyBeginScripts
, bodyEndScripts
and headerScripts
. To function correctly your page templates should contain these areas.
Example: Enterprise Edition Travel demo prototype in Web Dev > Site /travel/prototype/areas
.
Node name | Value |
---|---|
areas | |
bodyBeginScripts | |
bodyEndScripts | |
extends | ../headerScripts |
headerScripts | |
createAreaNode | false |
modelClass | info.magnolia.marketingtags.model.ScriptsAreaModel |
templateScript | /templates/scriptsArea.ftl |
type | noComponent |
.... |
Properties:
<area name> | required Area definition within a page template |
| optional, default is When set to |
| optional $webResourceManager.requireResource("info.magnolia.sys.confluence.artifact-info-plugin:javadoc-resource-macro-resources")
ScriptsAreaModel
: Area model for tag insertion. It looks through all the tags to determine which ones belongto each tag area of the page. |
| required
|
| required
|
Here's scriptsArea.ftl
:
[#assign areaModel = model!] [#list areaModel.tags as tagNode] [#assign tag = cmsfn.asContentMap(tagNode)] [#if (cmsfn.publicInstance || tag.activeAuthor!false) && tag.content?has_content] ${areaModel.preRender(tag)} [/#if] [/#list]
In tag properties, define a name for the tag and indicate where in page HTML it should be inserted. Usually the provider of the tag will specify where the tag should be added. If not specified, the safest is probably the head
element. If the tag takes a long time to load and delays page rendering put at the end of the body. Optionally you can also define a dashboard URL for viewing the information collected by the tag.
Fields:
<head>
element<body>
element</body>
elementTag content is typically a piece of JavaScript code. Some tag providers refer to it as a tag, others as a snippet or hook. Paste the code provided by the service into the box. Magnolia will insert the code on the pages you choose on the Pages tab.
Choose to which pages the tag should be added. Check the Insert in subpages box to insert the tag on all pages in a site branch. Alternatively, you can select a template. Tags will be added to all pages based on the template.
To test tag insertion, create a tag that displays a JavaScript popup. This way you can verify that a tag would be inserted on the correct pages.
<script> window.alert("Hello Magnolia!"); </script>
Publish the tags from the author instance to the public instance.
Visit the website of the service that provided the tag in order to view the information collected by the tag. You can view the information in a separate browser window or in the Marketing Tags app. Click the Show provider dashboard action.
This example shows a Clicky dashboard. You need to be logged into the analytics service to see the dashboard.
Some dashboards such as Google Analytics cannot be displayed in a subapp. Google explicitly specifies in their headers that a dashboard cannot be displayed in an iFrame (x-frame-options: SAMEORIGIN
). To get around this limitation, click the link at the top of the subapp to open the dashboard in a new window.