Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Amp analytics #19

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Amp analytics #19

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
92681d3
ad amp google analytics tags
vonloh Sep 8, 2020
52ec4fc
add analytic tag manager to Blog settings
vonloh Sep 8, 2020
5ac4fcd
update readme
vonloh Sep 8, 2020
69ed440
rename analytics settings for tagManager container
vonloh Sep 15, 2020
dc7fd95
update readme
vonloh Sep 15, 2020
5525f45
update scripts to be places amp confrom
vonloh Sep 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Configuration/Settings.Blog.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,6 @@ Shel:
enabled: false
twitterId: ''
facebookId: ''
analytics:
tagManager:
id: ~
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,17 @@ If you have additional custom content elements in a blog article like videos and
you might need to provide processors to make them compatible with AMP.
See the `replaceImgTags` image processor as example.

If you have installed the neos/googleanalytics package aside with shel/blog all analytics tags will be diabled to be AMP confirmative.
You could add a tag manager with

```yaml
Shel:
Blog:
analytics:
tagManager:
id: <gtm tag manager id>
```

Please test the AMP version every time you add new features to your blog pages!
Also be sure to check Google Search Console on your live site as it will inform you of errors.

Expand Down
12 changes: 12 additions & 0 deletions Resources/Private/Fusion/Layouts/AmpPage.fusion
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
prototype(Shel.Blog:Layout.AmpPage) < prototype(Neos.Neos:Page) {
# Disable Neos.GoogleAnalytics and include amp tag manager -> https://support.google.com/tagmanager/answer/9205783?hl=en
googleTagManagerNoScript >
googleTracking >
googleTracking = Neos.Fusion:Join {
main = afx`
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics config={'https://www.googletagmanager.com/amp.json?id=' + Configuration.setting('Shel.Blog.analytics.tagManager.id') + '&gtm.url=SOURCE_URL'} data-credentials="include"></amp-analytics>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<amp-analytics config={'https://www.googletagmanager.com/amp.json?id=' + Configuration.setting('Shel.Blog.analytics.tagManager.id') + '&gtm.url=SOURCE_URL'} data-credentials="include"></amp-analytics>
<amp-analytics config={'https://www.googletagmanager.com/amp.json?id=' + Configuration.setting('Shel.Blog.analytics.tagManager.ampContainerId') + '&gtm.url=SOURCE_URL'} data-credentials="include"></amp-analytics>

`
@if.isset = ${Configuration.setting('Shel.Blog.amp.analytics.tagManager.id')}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it make sense to take the setting from the Analytics package setting path?
Then it's not necessary to define it twice.

And did you use a Join because people can add more to it?

Copy link
Author

@vonloh vonloh Sep 10, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

according this post, Inside google tag manager you have to create your own container type for amp pages, which then has its own container ID. Perhaps the settings name could be better, something like ampContainerID.

I've used a Join to get access to the @position method.
if you have a better idea i would be happy if you give me some idea how i can do it better

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can always use the @position. I think in this case I wouldn't even use AFX but just a Neos.Fusion:Tag instead of the join and define the attributes.

@position = 'after headTag 100'
}

# Additional scripts are not allowed with amp
lastVisitedNodeScript >

Expand Down