Marker.ioの可視化エラーリポートを技術のなコンテキストを含むZendeskサポートチケットに変換

• •HTTP Webhookエンドポイント（n8nが自動生成）
• •ターゲットAPIの認証情報が必要な場合あり

{
  "meta": {
    "instanceId": "b8d4a47d3554c1f7fcd3ee16a413d67d707f3769dee6d5380a7d25c6b616c836"
  },
  "nodes": [
    {
      "id": "912f522b-6e2f-4c8d-9271-173a6b0ed780",
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "position": [
        300,
        -120
      ],
      "webhookId": "a1bfef52-25c9-4a7d-916f-87c0ca195305",
      "parameters": {
        "path": "a1bfef52-25c9-4a7d-916f-87c0ca195305",
        "options": {},
        "httpMethod": "POST"
      },
      "typeVersion": 2
    },
    {
      "id": "9decf387-197b-4da6-9fd4-c01b19d031d3",
      "name": "Marker.ioデータのフォーマット",
      "type": "n8n-nodes-base.code",
      "position": [
        520,
        -120
      ],
      "parameters": {
        "jsCode": "// Extract data from Marker.io webhook\nconst data = $input.first().json.body.data;\n\n// Format the conversation message\nconst issueTitle = data.title;\nconst issueDescription = data.description;\nconst markerId = data.markerId;\nconst priority = data.priority;\nconst issueType = data.issueType.name;\nconst publicUrl = data.publicUrl;\nconst privateUrl = data.privateUrl;\nconst dueDate = data.dueDate;\nconst browser = `${data.browser.name} ${data.browser.version}`;\nconst os = `${data.operatingSystem.family} ${data.operatingSystem.version}`;\nconst website = data.website.url;\nconst contextString = data.contextString;\n\n// Create formatted message body with Marker.io ticket link\nconst messageBody = `${issueTitle}\n${issueDescription}`;\n\n// Create formatted message body with Marker.io ticket link\nconst noteBody = `🐛 **New Issue Reported via Marker.io**\n\n**Issue:** ${issueTitle}\n**ID:** ${markerId}\n**Type:** ${issueType}\n**Priority:** ${priority}\n**Due Date:** ${dueDate ? new Date(dueDate).toLocaleDateString() : 'Not set'}\n\n**Description:**\n${issueDescription}\n\n**Technical Details:**\n• Browser: ${browser}\n• OS: ${os}\n• Website: ${website}\n• Context: ${contextString}\n\n**Marker.io Links:**\n• 🔗 [View Issue](${publicUrl})\n\n**Custom Data:**\n${Object.entries(data.customData || {}).map(([key, value]) => `• ${key}: ${value}`).join('\\n')}`;\n\nreturn [{\n  json: {\n    reporterEmail: data.reporter.email,\n    reporterName: data.reporter.name,\n    messageTitle: data.title,\n    messageBody: messageBody,\n    nodeBody: noteBody,\n    issueId: data.id,\n    markerId: markerId,\n    priority: priority,\n    issueType: issueType,\n    publicUrl: publicUrl,\n    privateUrl: privateUrl,\n    projectId: data.project.id,\n    reporterRole: data.reporter.role,\n  }\n}];"
      },
      "typeVersion": 2
    },
    {
      "id": "2dba9246-37f2-4c47-a09e-9d2cacbf28ae",
      "name": "ユーザーの作成/更新",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        740,
        -120
      ],
      "parameters": {
        "url": "https://[REPLACE_SUBDOMAIN].zendesk.com/api/v2/users/create_or_update.json",
        "method": "POST",
        "options": {},
        "sendBody": true,
        "authentication": "predefinedCredentialType",
        "bodyParameters": {
          "parameters": [
            {
              "name": "user",
              "value": "={{ { \"name\": $json.reporterName, \"email\": $json.reporterEmail, \"role\": $json.reporterRole } }}"
            }
          ]
        },
        "nodeCredentialType": "zendeskApi"
      },
      "typeVersion": 4.2,
      "continueOnFail": true
    },
    {
      "id": "857bb007-3ada-4a0e-bd8b-7e30c2b228c8",
      "name": "チケットの作成",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        960,
        -120
      ],
      "parameters": {
        "url": "https://[REPLACE_SUBDOMAIN].zendesk.com/api/v2/tickets.json",
        "method": "POST",
        "options": {},
        "sendBody": true,
        "authentication": "predefinedCredentialType",
        "bodyParameters": {
          "parameters": [
            {
              "name": "ticket",
              "value": "={{ {\n  \"subject\": $('Format Marker.io Data').item.json.messageTitle,\n  \"comment\": {\n    \"body\": $('Format Marker.io Data').item.json.messageBody\n  },\n  \"requester\": {\n    \"email\": $('Format Marker.io Data').item.json.reporterEmail,\n    \"name\": $('Format Marker.io Data').item.json.reporterName\n  },\n  \"priority\": $('Format Marker.io Data').item.json.priority,\n  \"tags\": [\"marker-io\", $('Format Marker.io Data').item.json.issueType],\n  \"custom_fields\": [\n    {\n      \"id\": 123456,\n      \"value\": $('Format Marker.io Data').item.json.markerId\n    }\n  ]\n} }}"
            }
          ]
        },
        "nodeCredentialType": "zendeskApi"
      },
      "typeVersion": 4.2
    },
    {
      "id": "ce5b6b09-9d82-4d0b-8a1c-fcbafa4e97d6",
      "name": "内部コメントの追加",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        1180,
        -120
      ],
      "parameters": {
        "url": "=https://[REPLACE_SUBDOMAIN].zendesk.com/api/v2/tickets/{{ $json.ticket.id }}.json",
        "method": "PUT",
        "options": {},
        "sendBody": true,
        "authentication": "predefinedCredentialType",
        "bodyParameters": {
          "parameters": [
            {
              "name": "ticket",
              "value": "={{ {\n  \"comment\": {\n    \"body\": $('Format Marker.io Data').item.json.nodeBody,\n    \"public\": false\n  }\n} }}"
            }
          ]
        },
        "nodeCredentialType": "zendeskApi"
      },
      "typeVersion": 4.2
    },
    {
      "id": "974302df-baf6-4fed-a2a8-26b702a522a0",
      "name": "付箋2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -540,
        -740
      ],
      "parameters": {
        "width": 700,
        "height": 2160,
        "content": "# Marker.io to Zendesk Integration\n\n**Automatically create Zendesk tickets with full technical context when your team receives new Marker.io issues**\n\n## 🎯 What this template does\nThis workflow creates a seamless bridge between Marker.io and Zendesk, your customer support platform. Every issue submitted through Marker.io's widget automatically becomes a trackable ticket in Zendesk, complete with technical details and visual context. Centralizing customer issues in Zendesk helps your support agents continue the conversation right where they work every day.\n\nWhen an issue is reported, the workflow:\n- Creates or updates the reporter as a Zendesk user\n- Opens a new ticket with all issue details\n- Adds a comprehensive internal comment with technical metadata\n- Preserves all screenshots, browser info, and custom data\n- Automatically tags tickets for easy filtering\n\n## ✨ Benefits\n- **Zero manual entry** - All bug details transfer automatically\n- **Instant visibility** - Support agents see issues immediately  \n- **Rich context** - Technical details preserved for developers\n- **Better collaboration** - Single source of truth for bugs\n- **Faster resolution** - No time wasted gathering information\n- **Smart organization** - Auto-tagging for efficient triage\n\n## 💡 Use Cases\n- **Product Teams**: Streamline bug triage without switching tools\n- **Support Teams**: Get technical context for customer-reported issues\n- **Development Teams**: Access browser info, console logs, and network logs directly from support tickets\n\n## 🔧 How it works\n1. **N8N Webhook receives** Marker.io issue data\n2. **Format and extract** relevant information from the payload\n3. **Create/update user** in Zendesk with reporter details\n4. **Create ticket** with the title and issue description\n5. **Add internal comment** with screenshot, full technical context and Marker.io links for the support agent\n\nThe result is a perfectly organized support ticket that your team can act on immediately, with all the context they need to reproduce and resolve the issue.\n\n## 📋 Prerequisites\n- **Marker.io account** with webhook capabilities\n- **Zendesk account** with API access\n- **Zendesk API token** with appropriate permissions\n\n## 🚀 Setup Instructions\n1. **Import this workflow** into your n8n instance\n\n2. **Configure the Webhook**:\n   - Copy the test/production webhook URL after saving\n   - Add to Marker.io: Workspace Settings → Webhooks → Create webhook\n   - Select \"Issue Created\" as the trigger event\n\n3. **Set up Zendesk credentials**:\n   - Generate an API token from Zendesk Admin Center → Apps and integrations → APIs → Zendesk API\n   - Add credentials to all three HTTP Request nodes\n   - Update your subdomain in the URLs (replace `[REPLACE_SUBDOMAIN]` with your subdomain)\n\n4. **Customize fields** (optional):\n   - Update the custom field ID in \"Create Ticket\" node if you want to store Marker ID\n   - Modify tags to match your workflow\n   - Adjust priority mapping if needed\n\n5. **Test the integration**:\n   - Create a test issue in Marker.io\n   - Verify the ticket appears in Zendesk\n   - Check that all data transfers correctly\n\n## 📊 Data Captured\n\n### Customer-facing ticket includes:\n- Issue title (as subject)\n- Description (as ticket body)\n\n### Internal comment includes:\n- 🆔 Marker ID\n- 📊 Priority level and issue type\n- 📅 Due date (if set)\n- 🖥️ Browser and OS details\n- 🤓 Developer console & network logs\n- 🌐 Website URL where issue occurred\n- 🔗 Direct link to Marker.io issue\n- 📦 Any custom data fields\n\n[→ Read more about Marker.io webhook events](https://help.marker.io/en/articles/3738778-webhook-notifications)"
      },
      "typeVersion": 1
    },
    {
      "id": "a821b1b9-2fba-408e-bb55-04ae69cd02e4",
      "name": "付箋3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        280,
        240
      ],
      "parameters": {
        "color": 5,
        "width": 440,
        "height": 620,
        "content": "\n## 🚨 Troubleshooting\n\n**Webhook not triggering:**\n- Verify webhook URL is correct in Marker.io\n- Check that \"Issue Created\" event is selected\n- Test with Marker.io's webhook tester\n\n**User creation failing:**\n- Ensure Zendesk API token has user management permissions\n- Check email format in reporter data\n- Verify subdomain is correct in URLs\n\n**Ticket not appearing:**\n- Check API token has ticket creation permissions\n- Verify required fields are populated\n- Review Zendesk audit logs for errors\n\n**Internal comment missing:**\n- Ensure ticket was created successfully first\n- Verify API token permissions\n- Check that ticket ID is being passed correctly\n\n**Custom field not updating:**\n- Verify custom field ID is correct\n- Ensure field is active and visible to agents\n- Check field type matches the data format"
      },
      "typeVersion": 1
    }
  ],
  "pinData": {},
  "connections": {
    "912f522b-6e2f-4c8d-9271-173a6b0ed780": {
      "main": [
        [
          {
            "node": "9decf387-197b-4da6-9fd4-c01b19d031d3",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "857bb007-3ada-4a0e-bd8b-7e30c2b228c8": {
      "main": [
        [
          {
            "node": "ce5b6b09-9d82-4d0b-8a1c-fcbafa4e97d6",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "2dba9246-37f2-4c47-a09e-9d2cacbf28ae": {
      "main": [
        [
          {
            "node": "857bb007-3ada-4a0e-bd8b-7e30c2b228c8",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "9decf387-197b-4da6-9fd4-c01b19d031d3": {
      "main": [
        [
          {
            "node": "2dba9246-37f2-4c47-a09e-9d2cacbf28ae",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}