Many people use the technique of using a data layer variable called “dataLayer” to link data from HTML to Google Tag Manager.
However, I don’t really like the trend of “using data layer variables” if you want to “link data from HTML to Google Tag Manager”. Of course, I think there are things that should use data layer variables. However, after knowing other options, the time has come to think about how to link data to Google Tag Manager.
Why data layer variables are not universal and how to solve them
How metadata is defined on the web today
Now, when creating a web page, it is recommended to define a lot of metadata. Famous ones include:
- HTML title tag information
- HTML meta tag information (especially meta-description)
- Facebook Open Graph data
- Twitter Open Graph data
- Data such as JSON-LD and Microdata
- Favicon information
- Web Clip data (such as iOS icons)
- Information required by each marketing tool on a page-by-page basis
And so on. In addition to this, there are various marketing tags on the website, and metadata is added to pass the information you want to send with that marketing tag.
And the content of these metadata is surprisingly a lot of duplicate information. It becomes complicated, such as putting the same information as the <title> tag in the OGP title information and JSON-LD title information, and putting the page URL information in canonical, OGP and JSON-LD. In addition, various data of web marketing are added, so it will fall into a chaotic state.
If web developers understand how web marketing tools work, they can optimize the method of obtaining the necessary information using web marketing tools. Very few engineers are able to do it.
Problems of current metadata management
As mentioned above, when the same metadata is handled in various places in HTML, a situation that can occur is “partially updated metadata is omitted.” for example,
A new page was implemented by copying the HTML created in the past, but some metadata changes were missing
This is the situation. For example, if you forget to update your OGP information,
Even if someone shares the page on Facebook (or Twitter, etc.), the title, OGP image, description, link destination, etc. displayed at that time will be past page information.
That’s what happens. In the case of OGP, it seems that the production company will also test whether it is working properly, but if this is a web marketing tag, it is often omitted from the production company’s test.
In addition, when the marketing team tries to introduce a new marketing tool, it becomes necessary to have the HTML side modified according to the tool and implement tags. The more advanced marketing tools you want to implement, the more metadata you need to exchange information between this HTML and the tool tags, which hinders tool implementation.
how to solve
If we can change the specifications of the browser, <title> tag, meta tag, and OGP, we can write out all the metadata through schema.org (JSON-LD, Microdata, etc.), and use the <title> tag For information such as , duplication of information can be resolved by describing only how to allocate these metadata.
However, we cannot change the specifications of browsers, <title> tags, meta tags, and OGP. What we can do is avoid the need to implement HTML for each marketing tool as the number of marketing tools increases.
Until now, many sites used Google Tag Manager to receive information from HTML through dataLayer variables. The solution proposed here is not to use the dataLayer variable, but to get the schema.org metadata already embedded in the HTML from the tag manager and use that value in various marketing tags.
Many people think that “schema.org is set up to display rich snippets”. But it is not correct. More precisely, ” schema.org is for structured markup so that programs can better understand the information presented on the site .” The ability of the program to properly understand the information on the site is what makes it possible to implement a mechanism called rich snippets at this time. But schema.org doesn’t have to be limited to rich snippets. As long as the original purpose is “to make it easier for the program to properly understand the content”, various marketing tags should make more use of the information on schema.org.
In fact, in the field of shopping ads in Google Adwords , structured data is already being used in the form of automatic updating of product items .
How to read values defined in JSON-LD from GTM
Here, as the article title says, I’ll show you how to read values defined in JSON-LD from GTM.
Source JSON-LD example
Here, we will create GTM variables assuming the following JSON-LD. This is a JSON-LD implementation for a blog post detail page.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://sem-technology.info"
},
"url": "https://sem-technology.info/ja/google-tag-manager/ga-scroll-tracking",
"identifier": "84",
"headline": "Googleアナリティクスによる現代版のスクロール計測の方法",
"image": "https://sem-technology.info/assets/social-facebook.png",
"datePublished": "2018-02-14T14:15:13JST",
"dateModified": "2018-02-14T14:15:13JST",
"author": {
"@type": "Organization",
"name": "SEM Technology",
"logo": {
"@type": "ImageObject",
"url": "https://freelance.sem-technology.info/img/www/logo.png",
"height": 672,
"width": 1666
}
},
"description": "Googleアナリティクスのイベントトラッキングを使ってスクロール状況をトラッキングしたい。そういったニーズは数年前から出続けており、それに対する解決策として、「画面の何%スクロールされたか？をイベントトラッキングする」実装をしている人がほとんどだと思います。この記事では、この実装法の問題点とともに、どう実装するのが現代的であるかを解説したいと思います。"
}
</script>Examples of variables created in GTM
Now create a variable in Google Tag Manager. Currently there is no built-in variable type that reads JSON-LD, so create a custom JavaScript variable. In the sample below, we will describe how to get the article title (headline) and article author (author’s name) for JSON-LD in the format described above.
The first half of each script uses the same code, searching JSON-LD for root type “Article”. After that, at the end, we specify whether the target to be acquired is the “article title” or the “author of the article”.
Get the article title.
function () {
return [].slice.call(
document.querySelectorAll('script[type="application/ld+json"]')
).map(function(script) {
return JSON.parse(script.text);
}).filter(function(json) {
return json["@type"] == "Article";
})[0].headline;
}Get Article Author
function () {
return [].slice.call(
document.querySelectorAll('script[type="application/ld+json"]')
).map(function(script) {
return JSON.parse(script.text);
}).filter(function(json) {
return json["@type"] == "Article";
})[0].author.name;
}What should future tags look like?
Using Google Analytics’ augmented e-commerce as an example, I’d like to introduce what I think future tags should look like. that is,
After setting “enable advanced e-commerce functions”, the standard library side of GA tag reads metadata of schema.org and sends all necessary information. Naturally, all data such as product impressions, detailed page views, purchase information, and user information are sent cleanly.
I think. If schema.org metadata is comprehensively written in HTML, I think that most of the information required for enhanced e-commerce is complete (there is also a schema representing Order, so the order data is also available in schema.org , and information about logged-in users can also be represented in schema.org). All that’s left is for the standard GA tracking code to read that metadata and turn it into data for enhanced ecommerce.
If that were the case, more sites would include metadata such as JSON-LD and Microdata in their HTML for enhanced e-commerce implementations. This enriches the metadata in the HTML, making it easier for Google and other crawlers (bots) to interpret the content. If Google Analytics implements such an implementation, other tool vendors will follow suit, and tag implementation will become much easier. If the advertising platform crawls the site, all the information will be filled in the product feeds required for shopping ads, so I think there will be no need to create feeds.
Don’t you think technology marketing will accelerate at once if this happens?
summary
This time, I introduced how to read metadata from HTML code written according to JSON-LD. JSON-LD can describe a lot of information such as login user information and purchased product information in a format that is easy for programs to read.
By riding on the JSON-LD specification, it becomes possible to implement a more general-purpose tracking code.
