# Marketing / SEO - Structured Data Part2

常見的 JavaScript 動態生成 Structured Data 的方式有兩種：
1. Google 代碼管理工具
2. 自訂 JavaScript

# 使用 Google Tag Manager 動態產生 JSON-LD

Google Tag Manager 可以不必編輯程式碼就能直接管理網站上的程式碼，其操作的步驟：
1. 在網站上安裝 Google Tag Manager
2. 在 Container 中新增**自訂HTML** 標記
3. 將所需的 Structured Data 區塊貼到程式碼內容中
4. 前往容器管理選單的「安裝 Google Tag Manager」，按照其中的說明安裝
5. 發佈容器
6. 用 Rich Results Test 測試

## 在 Google 代碼管理工具中使用變數

範例：想要以網站的標題作為食譜的名稱，則可以建立一個，則可以建立一個變數，命名為 `recipe_name`。並使用以下 function 來賦值

```
function() { return document.title; }
```

並在自訂HTML 中使用變數

```
<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>
```

# 利用 JavaScript 產生 Structured Data

這個方式會是更適合大多數使用者的場景，可以更加的客製化。以下是單純的 JavaScript 範例：

```
fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
```